学完html+css就可以做的web前端项目实战

一、安徽龙禧

公共样式：

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 }