<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--
*{
margin: 0px;
padding: 0px;
}
.clear{
clear: both;
}
a{
text-decoration: none;
font-size: 13px;
color:RGB(108,108,108);
}
#header{
width:auto;
background-color: RGB(245,245,245);
}
.header_content{
width: 1190px;
margin: 0px auto;
line-height: 40px;
text-align: center;
}
.header_left{
height: 40px;
float: left;
}
.header_right{
height: 40px;
float: right;
}
.header_left a{
margin-right: 10px;
display: inline-block;
height: 40px;
}
.header_right a{
margin-right: 1px;
display: inline-block;
height: 40px;
width:82px;
}
.header_a:hover{
background-color:RGB(255,255,255);
color:RGB(242,61,19);
}
.header_a1:hover{
color:RGB(242,61,19);
}
-->
<link rel="stylesheet" type="text/css" href="csss/font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.min.css">
<title>导航的总结</title>
</head>
<body>
<div id="header">
<div class="header_content">
<div class="header_left">
<a href=""class="header_a">中国大陆 <samp class="fa fa-angle-down"></samp></span></a>
<a href=""style="color: RGB(242,61,19)">亲，请登录</a>
<a href=""class="header_a1" >免费注册</a>
<a href=""class="header_a1">手机逛淘宝</a>
</div>
<div class="header_right">
<a href="" class="header_a">我的淘宝 <samp class="fa fa-angle-down"></samp></a>
<a href=""class="header_a"><i class="fa fa-cart-plus" style="color:RGB(242,61,19)"></i> 购物车<span style="color: RGB(242,61,19)">0</span></a>
<a href=""class="header_a">收藏夹</a>
<a href=""class="header_a1">商品分类</a>
<a href=""class="header_a">卖家中心 <samp class="fa fa-angle-down"></samp></a>
<a href=""class="header_a">联系客服 <samp class="fa fa-angle-down"></samp></a>
<a href=""class="header_a"><i class="fa fa-list" style="color:RGB(242,61,19)"></i> 网站导航 <samp class="fa fa-angle-down"></samp></a>
</div>
<div class="clear"></div>
</div>
</div>
</body>
</html>
导航布局总结：
1、首先分析导航栏的布局： 背景、盒子、字体样式
2、在外部写CSS代码，这样简洁高效：使用外部CSS样式可以使代码复用。
2、先在body写出布局结构的class或id的命名，然后再在CSS里面写入样式，这样逻辑更清晰
3、class命名最好逻辑命名
4、在写CSS的时候先清除内外边距
5、用完浮动一定要记着清除浮动
6、引用字体库必须计算机上也要有字体库，最好和网页在一个总文件夹。