摘要：1. index.html代碼部分<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>天貓精選-上天貓,就夠了</title><link rel="stylesheet"
1. index.html代碼部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>天貓精選-上天貓,就夠了</title>
<link rel="stylesheet" href="static/css/style.css" type="text/css">
<link rel="shortcut icon" href="static/images/logo1.png" type="image/x-icon">
<link rel="stylesheet" href="static/font-awesome/css/font-awesome.min.css">
</head>
<body>
<!-- 頭部導(dǎo)航 -->
<div class="top">
<div class="content">
<div class="left">
<a href="">喵,歡迎來(lái)到天貓</a>
<a href="">請(qǐng)登錄</a>
<a href="">免費(fèi)注冊(cè)</a>
</div>
<ul class="right">
<li><a href="">我的淘寶<i class="fa fa-angle-down" style="color: #6d6e6a;"></i></a>
<div class="number">
<a href="">已買(mǎi)到的寶貝</a><br>
<a href="">已賣(mài)出的寶貝</a>
</div>
</li>
<li><a href=""><i class="fa fa-shopping-cart"></i> 購(gòu)物車(chē)0件</a></li>
<li><a href="">收藏夾<i class="fa fa-angle-down" style="color: #6d6e6a;"></i></a>
<div class="dope">
<a href="">收藏的寶貝</a><br>
<a href="">收藏的店鋪</a>
</div>
</li>
<li><a href="">|</a></li>
<li><a href=""><i class="fa fa-mobile"></i> 手機(jī)版</a></li>
<li><a href="">淘寶網(wǎng)</a></li>
<li><a href="">商家支持<i class="fa fa-angle-down" style="color: #6d6e6a;"></i></a>
<div class="support">
<p>商家:</p>
<a href="">商家中心</a>
<a href="">天貓規(guī)則</a><br>
<a href="">商家入駐</a>
<a href="">運(yùn)營(yíng)服務(wù)</a><br>
<a href="">商家品控</a>
<a href="">商家工具</a><br>
<a href="">天貓智庫(kù)</a>
<a href="">喵言喵語(yǔ)</a><br>
<!-- <span></span> -->
<p>幫助:</p>
<a href="">幫助中心</a>
<a href="">問(wèn)商友 </a><br>
</div>
</li>
<li><a href=""><i class="fa fa-list-ul"></i> 網(wǎng)站導(dǎo)航<i class="fa fa-angle-down" style="color: #6d6e6a;"></i></a>
<div id="website">
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
2. CSS樣式部分
* {margin: 0px;padding: 0px;}
ul {list-style: none;}
a {text-decoration: none;color: #6d6e6a;}
body {font-size: 13px;}
.top {background: #f2f2f2;height: 35px;}
.content {height: 35px;line-height: 35px;width: 1300px; margin: 0px auto;}
.left {width: 300px;float: left;}
.left a{margin-right: 17px;}
.right {float: right;}
.right li {float: left;margin-right: 17px;position: relative;}
.right li i {color: red;}
.content a:hover{color:red;}
.right li div {box-shadow: 2px 1px 5px #ccc;background: #fff;text-align: center;display: none;}
.number {width: 115px;position: absolute;left: 0px; top: 35px;line-height: 23px;padding: 8px 0px;}
.dope {width: 100px;position: absolute;left: 0px;top: 35px;line-height: 23px;padding: 8px 0px;}
.support {width: 150px;position: absolute;right: 0px;top: 35px;line-height: 23px;padding: 8px 0px;}
.support p {text-align: left;margin-left:15px;}
/* .support span {width: 150px;border-bottom: 1px solid #6d6e6a;display: inline-block;} */
#website {width: 1300px;height: 250px;position: absolute;right: 0px;top: 35px;}
.right li:hover div {display: block;}
批改老師：查無(wú)此人批改時(shí)間：2019-05-14 09:16:09
老師總結(jié)：完成的不錯(cuò)。想學(xué)好編程，就要多看別人代碼，多模仿別人功能。繼續(xù)加油。