摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>淘宝导航</title> <link rel="stylesheet" type="text/css"
<!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> <div> <div> <a href="#">中国大陆 <em class="fa fa-angle-down"></em></a> <a href="#" style="color:#F22E00">亲，请登录</a> <a href="#">免费注册</a> <a href="#"> 手机逛淘宝</a> </div> <div> <a href="">我的淘宝 <em class="fa fa-angle-down"></em> <ul> <li>已买到的宝贝</li> <li>我的足迹</li> </ul> </a> <a href=""><span class="fa fa-shopping-cart"style="color:#F22E00"> </span>购物车 <em class="fa fa-angle-down"></em></a> <a href=""><span class="fa fa-star"> </span>收藏夹 <em class="fa fa-angle-down"></em> <ul> <li>收藏的宝贝</li> <li>收藏的店家</li> </ul> </a> <a href="">商品分类</a> <span>|</span> <a href="">卖家中心 <em class="fa fa-angle-down"></em> <ul> <li>免费开店</li> <li>已卖出的宝贝</li> <li>出售中的宝贝</li> <li>已卖出的宝贝</li> <li>卖家服务市场</li> <li>卖家培训中心</li> <li>体检中心</li> <li>问商友</li> </ul> </a> <a href="">联系客服 <em class="fa fa-angle-down"></em> <ul> <li>消费者客服</li> <li>卖家客服</li> </ul> </a> <a href="">网站导航 <em class="fa fa-angle-down"></em> <ul> <li>百度</li> <li>淘宝</li> </ul> </a> </div> </div> <div></div> </div> </body> </html>
CSS部分：
*{margin: 0;padding: 0;}
a{color:#6C6C6C;font-family:courier;text-decoration:none;;font-size:12px;}
ul li{list-style:none;}
a:hover{color:#F22E00;}
.header{width:100%;/*height:36px;*/background-color:#F5F5F5;}
.header_content{width:1190px;/*height:36px;*/margin:0 auto;line-height:36px;position:relative;}
.header_content_left{height:36px;float:left;}
.h_c_left_china{display:inline-block;width:80px;text-align:center;}
.h_c_left_china:hover{background-color:white;}
.header_content_right{height:36px;float:right;}
.h_c_right_stand{font-size:8px;color:#6C6C6C;margin-left:5px;margin-right:5px;}
.clear{clear:both;}
.header_content ul {display:none;position:absolute;background-color: white;width:80px;}
.header_content a:hover ul{display:block;}
.header_content ul li{text-align:left;padding-left:5px;margin:3px 0;color:#6C6C6C;line-height:30px;width:80px;}
.header_content ul li:hover{background-color:#F5F5F5;}条码实现效果：
老师，用视频中的方法设置CSS好像无法在li中添加a标签进行链接，应该改一下CSS的设置就可以添加，但是我看淘宝是大导航条用的li，然后下跳出来的是用div做的。这几种方法哪种更好呢？在性能和后期维护上来说？
批改老师：灭绝师太批改时间：2018-11-05 09:07:06
老师总结：布局基本ok,下次可以尝试与课程内容不同的案例
