本文提供了一段HTML5页面的左右框架布局代码示例，包括导航栏、 banner 图片展示区以及右侧信息栏。通过CSS实现不同区域的样式设置，如导航栏的悬浮效果、banner的阴影动画以及内容区域的多列布局。
*{margin:0;padding:0;font-family:微软雅黑;list-style:none;
}body{background-image:url(1.jpg);
}
/*导航栏部分开始*/.nav{width:1366px;height:35px;background-color:black;position:relative;
}.nav li{width:60px;
/*border: 1px solid #fff;*/color:#fff;
/*padding-left: 20px;*/line-height:35px;float:left;margin-left:100px;text-align:center;
}.nav li:hover{background-color:#1e53eb;cursor:pointer;
}
/*导航栏部分结束*/
/*banner部分开始*/.banner{width:820px;height:375px;background-image:url(2.jpg);margin-left:100px;margin-top:10px;box-shadow:2px 2px 2px 2px rgba(0,0,0,0.8);
}.banner p{padding:290px 180px;font-size:30px;font-weight:normal;color:#000;transition:1s;
}.banner p:hover{transform:scale(1.5);color:#fff;
}
/*banner部分结束*/
/*右边栏部分开始*/.right{width:250px;height:450px;border:1px solid #000;position:absolute;left:960px;top:45px;box-shadow:1px 1p
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
