abstract：通过本章节的练习，继续锻炼了定位使用和样式的使用，实现代码如下：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>仿天猫商城导航栏</title> <link rel="stylesheet&
通过本章节的练习，继续锻炼了定位使用和样式的使用，实现代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>仿天猫商城导航栏</title> <link rel="stylesheet" href="static/css/zuoye.css"> <link rel="shortcut icon" href="static/images/logo1.png" type="image/x-icon" /> <link href="static/font-awesome/css/font-awesome.min.css" rel="stylesheet"> </head> <body> <div> <div> <div> <a href="#">喵，欢迎来到天猫</a> <a href="#">请登录</a> <a href="#">免费注册</a> </div> <ul> <li> <a href=""> 我的淘宝 </a> <div> <a>已买到的宝贝</a> <a>已卖出的宝贝</a> </div> </li> <li><i class="fa fa-shopping-cart"></i><a href="" style="display:inline-block;">购物车<font>0</font>件</a></li> <li> <a href="">收藏夹</a> <div> <a>收藏的宝贝</a> <a>收藏的店铺</a> </div> </li> <li><span></span></li> <li><a href="">手机版</a></li> <li><a href="">淘宝网</a></li> <li> <a href="">商家支持</a> <div> <ul> <li> <h4>商家：</h4> <a href="">商家中心</a> <a href="">天猫规格</a> <a href="">商家服务</a> <a href="">运营服务</a> <a href="">商家中心</a> <a href="">天猫规格</a> <a href="">商家服务</a> <a href="">运营服务</a> <span></span> </li> <li> <h4>帮助：</h4> <a href="">帮助中心</a> <a href="">问商友</a> </li> </ul> </div> </li> <li><a href="">网站导航</a></li> </ul> </div> </div> </body> </html>
zuoye.css文件：
*{margin:0px;padding: 0px;}
a{text-decoration: none;color:#999;font-size: 13px;}
li{list-style: none;}
.clear{clear: both;}
.top{width: 100%;background: #f2f2f2;height: 35px;}
.topContent{margin: 0px auto;width: 1300px;height: 35px;line-height: 35px;text-align: center;}
.topContentLeft{float: left;width: 330px;}
.topContentLeft a{margin-right: 15px;}
.topContentLeft a:hover{color:#FF0036;}
.topContentRight{float: right;}
.topContentRight li{float: left;margin-right: 5px;position: relative;}
.topContentRight li:hover >a{color:#FF0036;background: white;text-decoration:underline;}
.topContentRight li:hover >a[class="noBg"]{text-decoration: none;background: none;}
.topContentRight li:hover font{color:#FF0036;text-decoration: none;}
.topContentRight li:hover div ul li a{text-decoration: none;background: none; color: #999}
.topContentRight li a{text-align: center;line-height: 35px;display: block;width: 70px;}
.topContentRight li font{color: #666;font-weight: 700;}
.topContentRight li span{border-right: 1px solid #ccc;height: 15px;display: inline-block;text-align: center;margin-top: 10px;}
.topContentRight li i{margin-right: 2px;color:#FF0036; }
.topContentRight li:hover div{display:block;}
.topContentRight li div{box-shadow: 2px 1px 5px #ccc;width: 90px;position: absolute;top:35px;left: 0px;display: none;}
.topContentRight li div a{width: 90px;height: 25px;line-height: 25px;font-size: 10px;}
.topContentRight li div >a:hover{text-decoration: underline;color: #FF0036;cursor: pointer;}
.topContentRight li .shangjiaDiv{width: 160px;box-shadow: 2px 1px 5px #ccc;}
.topContentRight li div{left:-90px;}
.topContentRight li div ul{width: 160px;height: 200px;}
.topContentRight li div ul li{margin-right: 0px;}
.topContentRight li div ul li h4{text-align: left;margin-left: 10px;font-size: 13px;}
.topContentRight li div ul li span{border-bottom: 1px dotted gray;display: block;width: 145px;text-align: center;margin-top: 100px;height: 1px;margin-left: 5px;}
.topContentRight li div ul li a{width: 48px;color:black;display: block;height: 20px;text-align: left;margin-right: 20px;float: left;line-height: 20px;margin-left:10px;margin-bottom: 5px;}
.topContentRight li div ul li a:hover{text-decoration: underline;color: #FF0036;cursor: pointer;}
Correcting teacher：灭绝师太Correction time：2018-11-17 11:32:08
Teacher's summary：完成的不错！相信现在的布局对于你来说不太难啊，加油
