サマリー：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>淘寶小導(dǎo)航</title><link rel="stylesheet" type="text/css" href="font-awesome
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>淘寶小導(dǎo)航</title>
<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.min.css">
<style>
*{margin:0px; padding:0px;}
.clear{clear:both;}
a{color:#6C6C6C; text-decoration:none;}
li{list-style:none; font-size:12px;}
span{margin:0 6px;}
.t_color{color:#F22E00;}
.l{float:left;}
.r{float:right;}
.header{width:100%; background:#F5F5F5;} /*導(dǎo)航條整條DIV*/
.header_content{width:1190px; height:37px; margin:0 auto;} /*導(dǎo)航條居中DIV*/
.header_l{}
.header_r{}
.header_li{line-height:37px; padding:0 5px;} /*頭部的列表項*/
.header_ul_ul{display:none;} /*下拉菜單無序列表*/
.header_li:hover .header_a{color:#F22E00;} /*移上列表項，改變帶A鏈接的文字顏色*/
.header_li1:hover .header_ul_ul{display:block;} /*移上包含下拉列表的列表項，顯示下拉無序列表*/
.header_li1:hover{background:#fff;} /*移上包含下拉列表的列表項，改變背景顏色*/
.header_ul_ul li:hover{background:#F5F5F5;} /*移上下拉列表項，顯示對應(yīng)列表項背景色*/
.header_ul_ul{margin:5px -5px; border:1px solid #F5F5F5; border-top:none;}
/*1.為什么不設(shè)置下拉列表會自動有上級列表項的邊距呢？ 2.如何讓下拉列表邊框連接上上方邊框且保持一定的白色外邊距*/
.header_ul_ul li{padding-left:5px; line-height:25px;}
</style>
</head>
<body>
<div>
<div>
<ul>
<li class='header_li l header_li1'>中國大陸<span class="fa fa-angle-down"></span>
<ul>
<li><a href="">全球</a></li>
<li><a href="">中國大陸</a></li>
<li><a href="">香港</a></li>
</ul>
</li>
<li class='header_li l'><a href="#" class='header_a t_color'>親,請登錄</a></li>
<li class='header_li l'><a href="#">免費注冊</a></li>
<li class='header_li l'><span></span><a href="#">手機(jī)逛淘寶</a></li>
</ul>
<ul>
<li class='header_li r header_li1'>
<a href="#"><span class="fa fa-bars t_color"></span>網(wǎng)站導(dǎo)航</a>
<span class="fa fa-angle-down"></span>
<ul>
<li><a href="">亞馬遜</a></li>
<li><a href="">京東商城</a></li>
</ul>
</li>
<li class='header_li r header_li1'>
<a href="#">聯(lián)系客服</a>
<span class="fa fa-angle-down"></span>
<ul>
<li><a href="">消費者客服</a></li>
<li><a href="">賣家客服</a></li>
</ul>
</li>
<li class='header_li r header_li1'>
<a href="#">千牛賣家中心</a>
<span class="fa fa-angle-down"></span>
<ul>
<li><a href="">免費開店</a></li>
<li><a href="">已賣出的寶貝</a></li>
</ul>
</li>
<li class='header_li r'>
<a href="#">商品分類</a>
<span></span><span>|</span>
</li>
<li class='header_li r header_li1'>
<a href="#"><span class="fa fa-star"></span>收藏夾</a>
<span class="fa fa-angle-down"></span>
<ul>
<li><a href="">收藏的寶貝</a></li>
<li><a href="">收藏的店鋪</a></li>
</ul>
</li>
<li class='header_li r header_li1'>
<a href="#"><span class="fa fa-cart-plus t_color"></span>購物車</a>
<span class="fa fa-angle-down"></span>
<ul>
<li><a href="">查看我的購物車</a></li>
</ul>
</li>
<li class='header_li r header_li1'>
<a href="#">我的淘寶</a>
<span class="fa fa-angle-down"></span>
<ul>
<li><a href="">已購買的寶貝</a></li>
<li><a href="">我的足跡</a></li>
</ul>
</li>
</ul>
<div></div>
</div>
</div>
</body>
</html>
添削の先生：查無此人添削時間：2019-04-03 13:22:02
先生のまとめ：完成的不錯。下次把代碼縮進(jìn)，看著整齊。繼續(xù)加油