技术文章 | Technical articles

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

一、安徽龙禧

 

公共样式:

/*公共样式*/

/*版心*/

.inner {

width: 1000px;

/*块级元素水平居中*/

margin: 0 auto;

/*相对定位不脱离标准文档流   不设置left top 位置不会改变*/

position: relative;

}

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 }

/*header开始*/

.header {

/*压盖 绝对定位*/

position: absolute;

left: 0px;

top: 19px;

width: 992px;

height: 103px;

10  z-index: 11;

11 }

 

 

1.1.2 logo需要使用h1标签

<div>

<h1>

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

</h1>

</div>

 

1.1.3导航的悬停效果,用相对定位实现位置微调。

.header .nav ul li {

/*浮动float是盒子属性不能继承 祖先浮动和子元素没有任何关系*/

float: left;

width: 120px;

height: 91px;

border-right: 1px solid #EBEBEB;

/*为了实现 a标签Hover效果需要将白色背景添加在li*/

background-color: #fff;

}

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”,获取最新前端资讯,学习资料  

微信个人号二维码.jpg
项目实战视频教程、web前端视频教程
,请添加微信“haomei0452”免费领取 


B站搜索“爱创课堂网络科技” 免费观看前端视频以及项目实战


QQ图片20190401143635.jpg


上一篇文章: web前端Vue仿美团项目实战——爱创课堂专业前端培训前端
下一篇文章: 为什么要选择爱创课堂学前端?
更多详细内容请访问爱创官网首页:http://www.icketang.com/

最新发布 | 这里有最新的文章查看更多>>

爱创推荐 | 这里有推荐的文章查看更多>>