摘要：<!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></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></a> <a href="#" >商品分类</a> <span style="color:#ccc">|</span> <a href="#" class="nav_a">卖家中心 <i class="fa fa-angle-down"></i></a> <a href="#" class="nav_a">联系客服 <i class="fa fa-angle-down"></i></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; }
.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;}
.nav_a:hover{background: #fff;}对辅助工具的使用不够熟练，还没有一个明确的思路去确定先做哪一步，再完成哪一步，总结就是一句话，基本知识了解了，然而并不会灵活运用。
批改老师：灭绝师太批改时间：2019-01-06 15:21:34
老师总结：这就是练习少了，没其他毛病，基本布局没有问题！
