摘要：<DOCTYPE html><html><head><meta charset=UTF-8 "><title>淘宝导航</title><link rel="stylesheet " type="text/css " href="css/index.css &qu
<DOCTYPE html>
<html>
<head>
<meta charset=UTF-8 ">
<title>淘宝导航</title>
<link rel="stylesheet " type="text/css " href="css/index.css ">
<link rel="stylesheet " type="text/css " href="css/font/css/font-awesome.min.css ">
</head>
<body>
<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:#FF5000; ">亲，请登录</a>
<a href=" ">免费注册</a>
<a href=" ">手机逛淘宝</a>
</div>
<div class="header_right ">
<a href=" " class="header_a ">我的淘宝 <i class="fa fa-angle-down "></i></a>
<a href=" "><span class="fa fa-cart-plus "></span> 购物车</a>
<a href=" " class="header_a "><span class="fa fa-star "></span> 收藏夹 <i class="fa fa-angle-down "></i></a>
<a href=" ">商品分类</a>
<a href=" " class="header_a ">卖家中心 <i class="fa fa-angle-down "></i></a>
<a href=" " class="header_a ">联系客服 <i class="fa fa-angle-down "></i></a>
<a href=" " class="header_a ">网站导航 <i class="fa fa-bars "></i></a>
</div>
</div>
<div class="clear "></div>
</div>
</body>
</html>
* {
margin: 0px;
padding: 0px;
}
a {
font-size: 13px;
text-decoration: none;
color: #000000;
}
.clear {
clear: both;
}
.header {
width: 100%;
height: 40px;
background-color: #F5F5F5;
}
.header_content {
line-height: 40px;
width: 1200px;
height: 40px;
margin: 0px auto;
}
.header_left {
height: 40px;
float: left;
}
.header_left a {
margin-right: 5px;
}
.header_content a:hover {
color: #ff5000
}
.header_right {
width: 600px;
height: 40px;
float: right;
}
.header_a {
display: inline-block;
height: 40px;
width: 90px;
text-align: center;
}
.header_a:hover {
background-color: #fff;
}
批改老师：灭绝师太批改时间：2018-12-12 10:37:13
老师总结：完成的不错，布局思路清晰，但是下次建议看一遍视频，接着自己完成一下案例，不会的地方统计一下，再看一遍视频巩固！
