摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>01天猫导航栏案例</title> <link rel="stylesheet" type="te
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>01天猫导航栏案例</title>
<link rel="stylesheet" type="text/css" href="static/font-awesome/css/font-awesome.min.css"/>
<style>
body{margin:0;padding:0;}
a{text-decoration: none;}
header { width:100%;height:40px;background:#f1f1f1;font-size:12px;}
/* 盒子 */
.head {width:1200px;margin:0 auto;line-height:40px;}
.head a {color:#777;padding:0 10px;position: relative;display:inline-block;height:100%;}
/* a链接下的盒子 */
.head a div {line-height:30px;box-shadow: 0 1px 5px 1px #999;background-color:#fff;position: absolute;top:41px;display: none;color:#777;text-align: center;}
.head a:hover{color:#e00;}
.head a:hover div{display: block;}
.head-left {float: left;}
/* 最左边a */
.head-left a:first-child{padding-left:0;}
.head-right{float: right;}
/* 图标颜色 */
.head-right i {color:#e00;}
/* 我的淘宝div */
.number1{width:110px;left:10px;}
/* 网页导航 */
.number3{width:1200px;height:300px;right:0!important;}
/* 通用的类 */
.rightBorder { border-right:1px solid #999;}
</style>
</head>
<body>
<header>
<div class="head">
<!-- 左 -->
<div class="head-left">
<a href="#">喵，欢迎来到天猫</a>
<a href="#">请登录</a>
<a href="#">免费注册</a>
</div>
<!-- 右 -->
<div class="head-right">
<a href="#">
我的淘宝
<div class="number1">
已买到的宝贝
<br>
已卖出的宝贝
</div>
</a>
<a href="#"><i class="fa fa-heart"></i> 我关注的品牌</a>
<a href="#"><i class="fa fa-heart"></i> 购物车0件</a>
<a href="#" >收藏夹</a>
<span>|</span>
<a href="#"><i class="fa fa-heart"></i> 手机版</a>
<a href="#">淘宝网</a>
<a href="#">
网页导航
<div class="number3">
</div>
</a>
</div>
</div>
</header>
</body>
</html>
批改老师：韦小宝批改时间：2019-02-11 09:27:10
老师总结：写的很不错 对于我个人而言，导航部分使用纯css就可以搞定了，并不需要使用js方面的东西！
