学完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   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   27  /*位置微调   相对定位  相对于原位置进行偏移*/ 28  position: relative; 29  top: -4px; 30  left: 0px; 31  /*显示hover 最终占有高度是91px 将height内减*/ 32  height: 63px; 33 }