一、安徽龙禧

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 }

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 <div>

2  <h1>

3   <a href="">安徽龙禧</a>

4  </h1>

5 </div>

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 }