摘要：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>头部导航栏</title><link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesom
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>头部导航栏</title>
<link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/1.css">
</head>
<body>
<div class="header">
<div class="header-center">
<div class="header-left">
<a href=""><i class="fa fa-home"></i> 天猫首页</a>
<p>喵，欢迎来天猫</p>
<a href="">请登录</a>
<a href="">免费注册</a>
</div>
<div class="header-right">
<a href="">我的淘宝 <i class="fa fa-caret-down"></i></a>
<a href=""><i class="fa fa-heart"></i> 我关注的品牌</a>
<a href=""><i class="fa fa-shopping-cart"></i> 购物车</a>
<a href="">收藏夹 <i class="fa fa-caret-down"></i></a>
<a href="">| 淘宝网</a>
<a href="">企业购</a>
<a href="" style="color:#9c9c9c;"><i class="fa fa-th-list"></i> 网站导航 <i class="fa fa-caret-down"></i></a>
</div>
</div>
</div>
</body>
</html>
//css部分：
*{
margin:0;
padding:0;
}
a{
text-decoration:none;
color:#9C9C9C;
font-size:14px;
line-height:30px;
margin-left:15px;
}
a:hover{
color:#D55959;
text-decoration:underline;
}
.fa-home,.fa-heart,.fa-shopping-cart,.fa-th-list{
color:#D55959;
}
p{
display:inline;
color:#9C9C9C;
font-size:14px;
line-height:30px;
margin-left:15px;
}
.header{
width:100%;
height:30px;
background:#F2F2F2;
}
.header-center{
width:1350px;
margin:0px auto;
}
.header-left{
height:30px;
float:left;
}
.header-right{
height:30px;
float:right;
}
.header-a{
display:inline-block;
height:30px;
width:90px;
text-align:center;
}
.header-a:hover{
background:#fff;
}
总结：头部导航栏对于我们初学者也是可以比较容易掌握的，只要在布局的过程中认真细心点，对基本的知识有了一定的掌握就可以做得好了。在布局的过程中，对字体的大小，间距之间还是很难做到和原网页一样，还是要继续努力！
批改老师：韦小宝批改时间：2019-03-11 08:58:17
老师总结：一个网站的导航对于网站来说是非常重要的部分 在写导航的时候一定要注意到美观
