导航布局案例总结

原创 2018-11-10 22:17:22 2
摘要:浮动元素脱离文档流,即使浮动元素设置了高度,也不会撑开其父元素的高度。这时,需要在浮动元素后面加上<div style="clear:both"></div>,或者直接给父元素设置成和浮动元素一样的高度案例代码<!DOCTYPE html><html><head><meta charset="UTF-8

浮动元素脱离文档流,即使浮动元素设置了高度,也不会撑开其父元素的高度。这时,需要在浮动元素后面加上<div style="clear:both"></div>,或者直接给父元素设置成和浮动元素一样的高度

案例代码


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>淘宝</title>
<link href="css/font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/case.css">
</head>
<body>
<div>
<div>
<div>
<a href="" style="color:#000;">中国大陆&nbsp;<i class="fa fa-angle-down"></i></a>
<a href="" style="color: #FF4400;">亲,请登录</a>
<a href="">免费注册</a>
<a href="">手机逛淘宝</a>
</div>
<div>
<a href="">我的淘宝&nbsp;<i class="fa fa-angle-down"></i></a>
<a href=""><i class="fa fa-cart-plus">&nbsp;</i>购物车&nbsp;<i class="fa fa-angle-down"></i></a>
<a href=""><i class="fa fa-star"></i>&nbsp;收藏夹&nbsp;<i class="fa fa-angle-down"></i></a>
<a href="">商品分类</a>
<span>|</span>
<a href="">卖家中心&nbsp;<i class="fa fa-angle-down"></i></a>
<a href="">联系客服&nbsp;<i class="fa fa-angle-down"></i></a>
<a href=""><i class="fa fa-navicon"></i>&nbsp;网站导航&nbsp;<i class="fa fa-angle-down"></i></a>
</div>
<div></div>
</div>
</div>
</body>
</html>


*{margin: 0;padding: 0;}

.clear{clear: both;}

.header{width: 100%;background: #F5F5F5;}

.header_content{width: 1192px;margin: 0px auto;line-height: 36px;text-align: center;}

.header_a{display: inline-block;width: 86px;}

.header_a:hover{background: #FFF;}

.header_content a{text-decoration: none;color:#6C6C6C;margin-right: 2px;}

.header_content a:hover{color: #FF4400;}

.header_left{height: 36px;float: left;}

.header_left a{font-size:13px;}

.header_right{height:36px;float: right;}

.header_right a{font-size:14px;}

.fenge{font-size:13px;color: #ccc;margin-left: 6px;}


批改老师:灭绝师太批改时间:2018-11-11 09:30:11
老师总结:刚开始的布局可以仿照老师的,之后要试着用自己的方法和风格完成作业啦

发布手记

热门词条