一、安徽龙禧
公共样式:
1 /*公共样式*/ 2 /*版心*/ 3 .inner { 4 width: 1000px; 5 /*块级元素水平居中*/ 6 margin: 0 auto; 7 /*相对定位不脱离标准文档流 不设置left top 位置不会改变*/ 8 position: relative; 9 } 10 img { 11 /*图片转块 去掉3px间隔*/ 12 display: block; 13 width: 100%; 14 } 15 a { 16 text-decoration: none; 17 color: #665E73; 18 } 19 body { 20 /*文字属性*/ 21 font-size: 14px; 22 font-family: "Arial","Microsoft Yahei"; 23 color: #8F8C97; 24 } |
1.1 header部分
1.1.1 header压盖住banner,需要用绝对定位实现。
25 .inner{ 26 width: 1000px; 27 margin:0 auto; 28 position: relative; //header的参考父盒子 29 } 1 2 /*header开始*/ 3 .header { 4 /*压盖 绝对定位*/ 5 position: absolute; 6 left: 0px; 7 top: 19px; 8 width: 992px; 9 height: 103px; 10 z-index: 11; 11 } |
1.1.2 logo需要使用h1标签
1 <div> 2 <h1> 3 <a href="">安徽龙禧</a> 4 </h1> 5 </div> |
1.1.3导航的悬停效果,用相对定位实现位置微调。
1 .header .nav ul li { 2 /*浮动float是盒子属性不能继承 祖先浮动和子元素没有任何关系*/ 3 float: left; 4 width: 120px; 5 height: 91px; 6 border-right: 1px solid #EBEBEB; 7 /*为了实现 a标签Hover效果需要将白色背景添加在li*/ 8 background-color: #fff; 9 } 10 .header .nav ul li.chance { 11 width: 114px; 12 } 13 .header .nav ul li a { 14 display: block; 15 /*块级元素 不设置宽度 自动盛满父盒子的内容宽*/ 16 height: 67px; 17 padding-top: 24px; 18 line-height: 35px; 19 font-size: 15px; 20 text-align: center; 21 } 22 .header .nav ul li a:hover { 23 /*a标签 书写的样式都会渲染4个伪类身上*/ 24 border-top: 4px solid #F28D00; 25 /*白色背景不能渲染在a 标签因为 hover效果会将a相同的效果层叠掉*/ 26 background-color: #F9F9F9; 27 /*位置微调 相对定位 相对于原位置进行偏移*/ 28 position: relative; 29 top: -4px; 30 left: 0px; 31 /*显示hover 最终占有高度是91px 将height内减*/ 32 height: 63px; 33 } |
关注微信公众号“icketang”,获取最新前端资讯,学习资料
项目实战视频教程、web前端视频教程,请添加微信“haomei0452”免费领取
B站搜索“爱创课堂网络科技” 免费观看前端视频以及项目实战