摘要：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>淘宝导航</title> <link rel="stylesheet" href=&qu
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>淘宝导航</title>
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="font/css/font-awesome.min.css">
</head>
<body>
<div>
<div>
<div>
<a href="">中国大陆 <i class=" fa fa-angle-down"></i></a>
<a href="" style="color: #F22E00">亲,请登录</a>
<a href="">免费注册</a>
<a href="">手机逛淘宝</a>
</div>
<div>
<a href="">我的淘宝<i class=" fa fa-angle-down"></i>
<ul>
<li>已买到的宝贝</li>
<li>我的足迹</li>
</ul>
</a>
<a href=""><i class=" fa fa-cart-plus"></i> 购物车 </a>
<a href=""><i class=" fa fa-star"></i>收藏夹<i class=" fa fa-angle-down"></i></a>
<a href="">商品分类</a>
<a href="">卖家中心<i class=" fa fa-angle-down"></i>
<ul>
<li>免费开店</li>
<li>已卖出的宝贝</li>
<li>出售中的宝贝</li>
<li>卖家服务市场</li>
<li>卖家培训中心</li>
</ul>
</a>
<a href="">联系客服<i class=" fa fa-angle-down"></i></a>
<a href="">网站导航<i class=" fa fa-angle-down"></i></a>
</div>
</div>
</div>
</body>
</html>
css 样式
*{
margin: 0;
padding: 0;
}
li{
/* !**!list-style:none;!**!*/
}
li{
list-style-type:none;
}
.header{
width: 100%;
/* height: 40px;*/
background-color: #F5F5F5; }
.ba ul{
display: none;
color:#3C3C3C;
border: 1px #F5F5F5 solid;
position: absolute;
}
.aaa li:hover{
color:#F22E00;
}
a{
text-decoration:none;
color: #3C3C3C;
display: inline-block;
margin: 0 5px;
}
a:hover{
color: #F22E00;
}
.ba:hover{
background-color:#ffffff;
}
.header_content{
width: 1190px;
height: 36px;
margin: 0 auto;
line-height: 40px;
}
.header_left{
height: 36px;
float: left;
}
.header_right{
height: 36px;
float: right;
position: relative;
}
.ba:hover ul{
display: block;
}
.sss:hover ul{display: block; color:#3C3C3C }
.sss ul{
display: none;
position: absolute;
}
.sss ul li:hover {
color: #F22E00;
}感觉 在写样式的时候 有点杂乱。。。。有时候 都不知道 具体在写那个位置的样式
批改老师：韦小宝批改时间：2018-11-02 14:58:30
老师总结：写的很完整！样式可以内嵌到html代码的某些位置例如body和head之间！再或者外部来进行引入啊！这样写的确是不太好！
