摘要：//html 代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org
//html 代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>淘宝导航</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="header">
<div class="header_content">
<div class="header_left">
<a href="" class="header_a">中国大陆 <li class="fa fa-angle-down"> </li></a>
<a href="" style="color:#C03">亲，请登录</a>
<a href="">免费注册</a>
<a href="">手机逛淘宝</a>
</div>
<div class="header_right">
<a href="" class="header_a">我的淘宝<li class="fa fa-angle-down"></li></a>
<a href=""><li class="fa fa-cart-plus">购物车<li class="fa fa-angle-down"></li></a>
<a href="" class="header_a"> <span class="fa fa-star"></span>收藏夹</a>
<a href="" class="header_a">商品分类</a>
<a href="" class="header_a">卖家中心<li class="fa fa-angle-down"></li></a>
<a href="" class="header_a">联系客服<li class="fa fa-angle-down"></li></a>
<a href="" class="header_a">网站导航<li class="fa fa-angle-down"></li></a>
</div>
</div>
</div>
<div class="clear">
</body>
</html>
// css 代码
*{
margin: 0px;
padding: 0px;
}
a{
color: #333;
text-decoration: none;
font-size: 10px;
}
.clear{clear:both;}
.header{
weight: 100%;
height:40px;
background: #F5F5F5;
}
.header_a{
display: inline-block;
width:70px;
height: 40px;
text-align: center;
}
.header_a:hover{
background-color: #FFF;
}
.header_content{
width: 1200px;
margin: 0px auto;
line-height: 40px;
}
.header_left{
float: left;
height: 40px;
width: 300px;
}
.header_left a{
margin-right: 5px;
}
.header_content a:hover{color:#ff5000;}
.header_right{
float: right;
height: 40px;
width: 600px;
}
.header_right a{
margin-right:5px;}
// CSS 总结
标签选择器 p{}
id选择器 #box{}
class选择器 .main{}
派生选择器 p i{}
属性选择器 a[href='#']
margin可以单独改变元素的上，下，左，右边距。也可以一次改变所有的属性。
Padding（内边距）
Border(边框) - 围绕在内边距和内容外的边框。
Content(内容) - 盒子的内容，显示文本和图像。
Float（浮动），往往是用于图像，但它在布局时一样非常有用。
如果图像是右浮动，下面的文本流将环绕在它左边：
清除浮动 .clear{clear:both;}
批改老师：天蓬老师批改时间：2018-12-20 16:39:34
老师总结：导航, 无非就是二种: 垂直 和 水平, 都要掌握
