摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>淘宝首页导航</title> &nb
<!DOCTYPE html> <html> <head> <meta 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="nav"> <div class="nav_left"> <a href="#" style="color:#000;" class="nav_a">中国大陆 <i class="fa fa-angle-down"></i></a> <a href="#" style="color:#f50000;">亲，请登录</a> <a href="#">免费注册</a> <a href="#">手机逛淘宝</a> </div> <div class="nav_right"> <a href="#" class="nav_a">我的淘宝 <i class="fa fa-angle-down"></i> <ul> <li>已买到的宝贝</li> <li>我的足迹</li> </ul> </a> <a href="#" class="nav_a"><span class="fa fa-cart-plus" style="color:#f50000"> </span>购物车 <i class="fa fa-angle-down"></i></a> <a href="#" class="nav_a"><span class="fa fa-star" ></span> 收藏夹 <i class="fa fa-angle-down"> </i> <ul> <li>收藏的宝贝</li> <li>收藏的店铺</li> </ul> </a> <a href="#" >商品分类</a> <span style="color:#ccc">|</span> <a href="#" class="nav_a">卖家中心 <i class="fa fa-angle-down"></i> <ul> <li>免费开店</li> <li>已卖出的宝贝</li> <li>出售中的宝贝</li> <li>卖家服务市场</li> <li>卖家培训中心</li> <li>体检中心</li> </ul> </a> <a href="#" class="nav_a">联系客服 <i class="fa fa-angle-down"></i> <ul> <li>消费者客服</li> <li>卖家客服</li> </ul> </a> <a href="#" class="nav_a">网站导航 <i class="fa fa-angle-down"></i></a> </div> </div> <div class="clear"></div> </div> </body> </html>
*{margin: 0px;padding: 0px;}
a{text-decoration: none;margin-right:5px;color: #ccc; }
li{list-style: none;}
.clear{clear: both;}
.header{ width: 100%;background:#f5f5f5;}
.nav{width: 1200px; background: skyblue; margin:0px auto;font-size:12px;line-height: 40px; }
.nav a:hover{color:#f50000;}
.nav_left{height:40px;float: left;}
.nav_right{height: 40px;float: right;}
.nav_a{display: inline-block;width: 80px;text-align: center;position: relative;}
.nav_a:hover{background: #fff;}
.nav_a ul{display: none;border: 1px solid #f5f5f5;border-top:none;}
.nav_a:hover ul{display: block;color: #ccc;position: absolute;}
.nav_a ul li{height: 30px;text-align:left;padding: 0 3px;margin: 5px 0;width: 90px;}
.nav_a ul li:hover{background: #f5f5f5}静态页面还是需要JS来实现一些页面效果，单纯的仿造大型网站做出相似效果，细节方面实现不出来，但是可以模仿各大知名互联网公司的网站（一般都是运用框架）来练习，确实可以提升自己的能力。
批改老师：灭绝师太批改时间：2019-01-06 17:36:37
老师总结：有js还叫静态页面么？单纯布局是完全可以做到和原网页一摸一样，就是要花时间去微调了，只有将基础学完，上手框架才能得心应手啦！加油！
