摘要：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>導航菜單</title><link rel="stylesheet" type="text/css" href="css/font-awes
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>導航菜單</title>
<link rel="stylesheet" type="text/css" href="css/font-awesome/css/font-awesome.min.css">
<style>
*{padding: 0;margin: 0;}
a{text-decoration: none;color: #6C6C6C;font-size: 12px;}
.clear{clear:both;}
.pl8{padding-left: 8px}
.top{width: 100%;height: 40px;line-height: 40px;background: #F5F5F5;border-bottom: 1px solid #eee;}
.menu{width: 1200px;margin: 0 auto;}
.menu a{display: inline-block;padding: 0 4px}
.left{width: 300px;float: left;}
.right{width: 600px;float: right;}
.menu a:hover{color:#FF4400;}
.menu a.bg:hover {background: #fff;}
.orange{color: #FF5000;}
</style>
</head>
<body>
<div>
<div>
<div>
<a href="">中國大陸<span class="pl8 fa fa-angle-down"></span></a>
<a href="">親,請登錄</a>
<a href="">免費注冊</a>
<a href="">手機逛淘寶</a>
</div>
<div>
<a href="">我的淘寶<span class="pl8 fa fa-angle-down"></span></a>
<a href=""><span class="fa fa-cart-plus orange"></span> 購物車<span class="pl8 fa fa-angle-down"></span></a>
<a href=""><span class="fa fa-star"></span> 收藏夾</a>
<a href="">商品分類</a>
<a href="">賣家中心<span class="pl8 fa fa-angle-down"></span></a>
<a href="">聯(lián)系客服<span class="pl8 fa fa-angle-down"></span></a>
<a href=""><span class="fa fa-navicon orange"> </span>網(wǎng)站導航<span class="pl8 fa fa-angle-down"></span></a>
</div>
</div>
</div>
<div></div>
<!-- 總結(jié)： 對于新手來說難點在于浮動和偽類以及什么是內(nèi)外邊距的理解-->
</body>
</html>
批改老師：韋小寶批改時間：2019-03-11 17:08:17
老師總結(jié)：一個網(wǎng)站的導航對于網(wǎng)站來說是非常重要的部分 在寫導航的時候一定要注意到美觀