摘要：<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>layout</title><link rel="stylesheet
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>layout</title>
<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css">
<style>
*{margin:0;padding:0;}
.header_content a{text-decoration:none;color:#6c6c6c;font-size:13px;}
.header_content li{list-style:none;}
.header{
width:100%;
/* height:40px; */
background:#f5f5f5;
}
.header_content{
width:1200px;
/* height:40px; */
/* background:green; */
margin:0 auto;
line-height:40px;
}
.header_content a:hover{
color:#FF8901;
}
.header_left{
/* width:300px; */
height:40px;
float:left;
}
.header_left a{
margin-right:5px;
}
.header_right{
width:600px;
height:40px;
/* background:yellow; */
float:right;
}
/*清除浮动 */
.clear{
clear:both;
}
.header_a{
display:inline-block;
height:40px;
width:90px;
/* background-color:yellow; */
text-align:center;
position:relative;
}
.header_a:hover{
background-color:#fff;
}
.header_a ul{
border: 1px solid #f5f5f5;
display:none;
border-top:none;
}
.website ul{display:block;}
.header_a:hover ul{display:block;position:absolute;width:90px;}
.website:hover ul{display:none;}
.header_a ul li:hover{background:#f5f5f5;}
.header_a ul li{color:#6c6c6c;height:30px;line-height:30px;text-align:left;padding:0 4px;margin:3px 0;}
/*网站导航 */
.website_navigation{
border:1px solid red;
width:1176px;
height:200px;
float:right;
}
.website_navigation_one{
border:1px solid red;
width:292px;
height:200px;
float:left;
}
</style>
</head>
<body>
<!-- 头部导航条 begin -->
<div class="header">
<div class="header_content">
<div class="header_left">
<a href="" class="header_a">中国大陆 <i class="fa fa-angle-down"></i></a>
<a href="" style="color:#FF8901">亲，请登录</a>
<a href="">免费注册</a>
<a href="">手机逛淘宝</a>
</div>
<div class="header_right">
<a href="" class="header_a">我的淘宝<i class="fa fa-angle-down"></i>
<ul>
<li>已买到的宝贝</li>
<li>我的足迹</li>
</ul>
</a>
<a href=""><span class="fa fa-cart-plus" style="color:#FF8901"></span> 购物车</a>
<a href="" class="header_a"><span class="fa fa-star"></span> 收藏夹 <i class="fa fa-angle-down"></i>
<ul>
<li>收藏的的宝贝</li>
<li>收藏的店铺</li>
</ul>
</a>
<a href="">商品分类</a>
<a href="" class="header_a">卖家中心 <i class="fa fa-angle-down"></i>
<ul>
<li>免费开店</li>
<li>已买出的宝贝</li>
<li>出售中的宝贝</li>
<li>体验中心</li>
</ul>
</a>
<a href="" class="header_a">联系客服 <i class="fa fa-angle-down"></i>
<ul>
<li>消费者客服</li>
<li>卖家客服</li>
</ul>
</a>
<a href="" class="header_a website"><span style="color:#FF8901" class="fa fa-align-justify"></span> 网站导航 <i class="fa fa-angle-down"></i>
<!-- 网站导航begin -->
<div class="website_navigation">
<div class="website_navigation_one">
<div website_navigation_one_title>
<h4>市场主题</h4>
</div>
<div website_navigation_one_list>
<ul>
<li>女装</li>
<li>男装</li>
<li>内衣</li>
<li>鞋靴</li>
<li>箱包</li>
<li>婴童</li>
</ul>
</div>
</div>
<div class="website_navigation_one"></div>
<div class="website_navigation_one"></div>
<div class="website_navigation_one"></div>
</div>
<!-- 网站导航end -->
</a>
</div>
</div>
<!--清除浮动 -->
<div class="clear"></div>
</div>
<!-- 头部导航条 end -->
</body>
</html>
<!-- 注意浮动的清除 样式尽量为外部引入 设置标签样式最好带上父级元素的class名以便扩展和修改 就现在想到这些 -->
批改老师：灭绝师太批改时间：2018-11-16 13:46:13
老师总结：目前布局注意事项差不多就是你总结的这些，继续加油！
