摘要：<!DOCTYPE html> <html> <head> <meta charset=UTF-8 "> <title>淘宝导航</title>
<!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 ">
<style type="text/css">
/*浏览器边距清零*/
* {
margin: 0px;
padding: 0px;
}
/*导航链接*/
a {
font-size: 13px;
text-decoration: none;
color: #6c6c6c;
}
/*li标签样式*/
li{list-style: none;}
/*浮动清零*/
.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;
position: relative;
}
.header_a:hover {
background-color: #fff;
}
.header_a ul {
border: 1px solid #F5F5F5;
display: none;
border-top: none;
}
.header_a:hover ul {
display: block;
position: absolute;
width: 100px;
}
.header_a ul li:hover{
background-color: #F5F5F5;
}
.header_a ul li {
color: #6c6c6c;
height: 30px;
line-height: 30px;
text-align: left;
padding: 0px 3px;
margin: 5px 0px;
}
</style>
</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>
<ul>
<li>已买到的宝贝</li>
<li>我的足迹</li>
</ul>
</a>
<a href=" "><span class="fa fa-cart-plus " style="color:#FF5000; "></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>
<li>卖家培训中心</li>
<li>体验中心</li>
<li>问商友</li>
</ul>
</a>
<a href=" " class="header_a ">联系客服 <i class="fa fa-angle-down "></i></a>
<a href=" " class="header_a ">网站导航 <i class="fa fa-bars " style="color:#FF5000; "></i></a>
</div>
</div>
<div class="clear "></div>
</div>
</body>
</html>
批改老师：天蓬老师批改时间：2018-12-12 14:35:07
老师总结：你消除浮动的方式很有意思, 想想,是不是还有更优雅的方式呢
