一、安徽龙禧
公共样式：
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
2
3 安徽龙禧
4
5
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 }
