abstrakt：<!DOCTYPE html><html><head> <title>天貓tmall.com--理想生活上天貓</title> <meta charset="utf-8"> <link rel="stylesheet" href="font-awesome/css/fon
<!DOCTYPE html>
<html>
<head>
<title>天貓tmall.com--理想生活上天貓</title>
<meta charset="utf-8">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<style>
*{margin:0;padding:0;}
.nav{width:100%;background-color: #f2f2f2;}
.nav_content{margin:0 auto;width:1230px;height:34px;line-height:34px;text-align:center;font-size:12px;}
.nav_content_left{width:220px;float:left;}
.nav_content_left a{margin-right:15px;}
.nav_content_right{width:520px;float:right;}
.nav_menu_one{position:relative;padding:0 8px;float:left;}
.nav_menu_two{padding:10px 10px;line-height:22px;position:absolute;display:none;border:1px solid #e0e0e0;border-top:none;}
.pos_left{left:-1px;top:34px;width:80px;}
.pos_cen{left:-60px;top:34px;width:160px;}
.pos_right{right:-1px;top:34px;}
.nav a{text-decoration: none;color:gray;}
.nav a:hover{color:red;}
.nav li{list-style-type: none;}
.nav li:hover{background-color: #fff;border:1px solid #e0e0e0;border-bottom:none;}
.nav li:hover .nav_menu_two{display:block;}
.nav li a:hover
</style>
</head>
<body>
<div class="nav">
<div class="nav_content">
<div class="nav_content_left">
<span style="color:gray;margin-right:15px;">喵，歡迎來天貓</span>
<a href="">請登錄</a>
<a href="">免費注冊</a>
</div>
<ul class="nav_content_right">
<li class="nav_menu_one">
<a href="">我的淘寶<i class="fa fa-angle-down"></i></a>
<div class="nav_menu_two pos_left">
<a href="" >已買到的寶貝</a><br>
<a href="" >已賣出的寶貝</a>
</div>
</li>
<li class="nav_menu_one">
<i class="fa fa-shopping-cart" style="color:red;padding-right:5px;"></i><a href="">購物車件</a>
</li>
<li class="nav_menu_one">
<a href="">收藏夾</a><i class="fa fa-angle-down"></i>
<div class="nav_menu_two pos_left">
<a href="">收藏的寶貝</a><br>
<a href="">收藏的店鋪</a>
</div>
</li>
<li class="nav_menu_one">
<i class="fa fa-mobile" style="color:red;padding-right:5px;"></i><a href="">手機版</a>
<div class="nav_menu_two pos_cen" style="padding:0;">
<img src="images/2dbarcode.png">
</div>
</li>
<li class="nav_menu_one">
<a href="">淘寶網(wǎng)</a>
</li>
<li class="nav_menu_one">
<a href="">商家支持</a><i class="fa fa-angle-down"></i>
<div class="nav_menu_two pos_right" style="width:130px;">
<a style="text-align:left;font-weight:600;">商家：</a><br>
<a href="" style="margin-right:20px;">商家中心</a><a href="">天貓規(guī)則</a><br>
<a href="" style="margin-right:20px;">商家入駐</a><a href="">運營服務(wù)</a><br>
<a href="" style="margin-right:20px;">商家品控</a><a href="">商家工具</a><br>
<a href="" style="margin-right:20px;">天貓智庫</a><a href="">喵言喵語</a>
<a style="text-align:left;font-weight:600;">幫助：</a>
<div style="border-bottom:1px dashed #e0e0e0;"></div>
<a href="" style="margin-right:20px;">幫助中心</a><a href="">問商友</a>
</div>
</li>
<li class="nav_menu_one">
<i class="fa fa-bars" style="color:red;padding-right:5px;"></i><a href="">網(wǎng)站導(dǎo)航</a><i class="fa fa-angle-down"></i>
<div class="nav_menu_two pos_right" style="width:1200px;height:150px;">
<div style="width:400px;font-size:14px;font-weight:600;color:red;float:left;">熱點推薦</div>
<div style="width:400px;font-size:14px;font-weight:600;color:blue;float:left;">行業(yè)市場</div>
<div style="width:300px;font-size:14px;font-weight:600;float:left;">服務(wù)指南</div>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
一級菜單可用a標(biāo)簽，二級菜單可用ul標(biāo)簽，巧用二級菜單行高。
Korrigierender Lehrer：查無此人Korrekturzeit：2019-05-05 09:34:52
Zusammenfassung des Lehrers：完成的不錯。常用的css樣式，可以寫到一個公用文件里，隨時可以使用。繼續(xù)加油。