abstract：仿天貓商城左側(cè)移上顯示商品效果（HTML部分）<!DOCTYPE html><html> <head> <title>天貓精選-上天貓，就夠了</title> <meta charset="utf-8"> <link href="static/css/style.css" r
仿天貓商城左側(cè)移上顯示商品效果（HTML部分）
<!DOCTYPE html>
<html>
<head>
<title>天貓精選-上天貓，就夠了</title>
<meta charset="utf-8">
<link href="static/css/style.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="static/images/logo1.png" type="image/x-icon" />
<link href="static/font-awesome/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<!-- 頭部導(dǎo)航 -->
<div class="top">
<div class="content">
<div class="left">
<a href=""> 喵，歡迎來到天貓</a>
<a href="">請登錄</a>
<a href="">免費(fèi)注冊</a>
</div>
<ul class="right">
<li><a href="">我的淘寶</a>
<div class="number">
<a href="">已買到的寶貝</a><br>
<a href="">已賣出的寶貝</a>
</div>
</li>
<li><a href=""><i class="fa fa-heart"></i> 我關(guān)注的品牌 </a></li>
<li><a href=""><i class="fa fa-shopping-cart"></i> 購物車0件</a></li>
<li><a href="">收藏夾</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-android"></i> 手機(jī)版</a></li>
<li><a href="">淘寶網(wǎng)</a></li>
<li><a href="">網(wǎng)頁導(dǎo)航</a>
<div id="website">
</div>
</li>
</ul>
</div>
<div class="clear"></div>
</div>
<div class="middle">
<div class="content">
<ul class="menu">
<li><a href="#"><i class="fa fa-hand-o-right"></i> 女裝/內(nèi)衣</a>
<div class="menu_content">
<div class="menu_left">
<p><b>當(dāng)季流行</b><span class="fa fa-angle-right"></span></p>
<p class="hr">
<a href="" style="color: pink;">夏季新品</a>
<a href="">商場同款</a>
<a href="">仙女連衣裙</a>
<a href="">T恤</a>
<a href="">襯衫</a>
<a href="">時髦外套</a>
<a href="">休閑外套</a>
<a href="">牛仔褲</a><br>
<a href="">無痕文胸</a>
<a href="">運(yùn)動文胸</a>
<a href="">潮流家居服</a>
<a href="">百搭船襪</a>
</p>
<p><b>當(dāng)季流行</b><span class="fa fa-angle-right"></span></p>
<p class="hr">
<a href="">夏季新品</a>
<a href="">商場同款</a>
<a href="">仙女連衣裙</a>
<a href="">T恤</a>
<a href="">襯衫</a>
<a href="">時髦外套</a>
<a href="">休閑外套</a>
<a href="">牛仔褲</a><br>
<a href="">無痕文胸</a>
<a href="">運(yùn)動文胸</a>
<a href="">潮流家居服</a>
<a href="">百搭船襪</a>
</p>
<p><b>當(dāng)季流行</b><span class="fa fa-angle-right"></span></p>
<p class="hr">
<a href="">夏季新品</a>
<a href="">商場同款</a>
<a href="">仙女連衣裙</a>
<a href="">T恤</a>
<a href="">襯衫</a>
<a href="">時髦外套</a>
<a href="">休閑外套</a>
<a href="">牛仔褲</a><br>
<a href="">無痕文胸</a>
<a href="">運(yùn)動文胸</a>
<a href="">潮流家居服</a>
<a href="">百搭船襪</a>
</p>
<p><b>當(dāng)季流行</b><span class="fa fa-angle-right"></span></p>
<p class="hr">
<a href="">夏季新品</a>
<a href="">商場同款</a>
<a href="">仙女連衣裙</a>
<a href="">T恤</a>
<a href="">襯衫</a>
<a href="">時髦外套</a>
<a href="">休閑外套</a>
<a href="">牛仔褲</a><br>
<a href="">無痕文胸</a>
<a href="">運(yùn)動文胸</a>
<a href="">潮流家居服</a>
<a href="">百搭船襪</a>
</p>
<p><b>當(dāng)季流行</b><span class="fa fa-angle-right"></span></p>
<p class="hr">
<a href="">夏季新品</a>
<a href="">商場同款</a>
<a href="">仙女連衣裙</a>
<a href="">T恤</a>
<a href="">襯衫</a>
<a href="">時髦外套</a>
<a href="">休閑外套</a>
<a href="">牛仔褲</a><br>
<a href="">無痕文胸</a>
<a href="">運(yùn)動文胸</a>
<a href="">潮流家居服</a>
<a href="">百搭船襪</a>
</p>
<p><b>當(dāng)季流行</b><span class="fa fa-angle-right"></span></p>
<p class="hr">
<a href="">夏季新品</a>
<a href="">商場同款</a>
<a href="">仙女連衣裙</a>
<a href="">T恤</a>
<a href="">襯衫</a>
<a href="">時髦外套</a>
<a href="">休閑外套</a>
<a href="">牛仔褲</a><br>
<a href="">無痕文胸</a>
<a href="">運(yùn)動文胸</a>
<a href="">潮流家居服</a>
<a href="">百搭船襪</a>
</p>
<p><b>當(dāng)季流行</b><span class="fa fa-angle-right"></span></p>
<p >
<a href="">夏季新品</a>
<a href="">商場同款</a>
<a href="">仙女連衣裙</a>
<a href="">T恤</a>
<a href="">襯衫</a>
<a href="">時髦外套</a>
<a href="">休閑外套</a>
<a href="">牛仔褲</a>
</p>
</div>
<div class="menu_right">
<a href=""><img src="static/images/3.jpg"></a>
<a href=""><img src="static/images/4.jpg"></a>
<a href=""><img src="static/images/5.jpg"></a>
<a href=""><img src="static/images/6.jpg"></a>
<a href=""><img src="static/images/3.jpg"></a>
<a href=""><img src="static/images/3.jpg"></a>
<a href=""><img src="static/images/3.jpg"></a>
<a href=""><img src="static/images/3.jpg"></a>
<a href=""><img src="static/images/3.jpg"></a>
<a href=""><img src="static/images/3.jpg"></a>
<a href=""><img src="static/images/3.jpg"></a>
<a href=""><img src="static/images/3.jpg"></a>
<a href=""><img src="static/images/3.jpg"></a>
<a href=""><img src="static/images/3.jpg"></a>
<a href=""><img src="static/images/5.jpg"></a>
<a href=""><img src="static/images/6.jpg"></a>
<a href=""><img src="static/images/5.jpg"></a>
<a href=""><img src="static/images/6.jpg"></a>
</div>
</div>
</li>
<li><a href="#"><i class="fa fa-hand-o-right"></i> 男裝/運(yùn)動戶外</a></li>
<li><a href="#"><i class="fa fa-hand-o-right"></i> 女鞋/男鞋/箱包</a></li>
<li><a href="#"><i class="fa fa-hand-o-right"></i> 美妝/個人護(hù)理</a></li>
<li><a href="#"><i class="fa fa-hand-o-right"></i> 腕表/眼鏡/珠寶飾品</a></li>
<li><a href="#"><i class="fa fa-hand-o-right"></i> 手機(jī)/數(shù)碼/電腦辦公</a></li>
<li><a href="#"><i class="fa fa-hand-o-right"></i> 母嬰玩具</a></li>
<li><a href="#"><i class="fa fa-hand-o-right"></i> 零食/茶酒/進(jìn)口食品</a></li>
<li><a href="#"><i class="fa fa-hand-o-right"></i> 生鮮水果</a></li>
<li><a href="#"><i class="fa fa-hand-o-right"></i> 女鞋/男鞋/箱包</a></li>
<li><a href="#"><i class="fa fa-hand-o-right"></i> 美妝/個人護(hù)理</a></li>
<li><a href="#"><i class="fa fa-hand-o-right"></i> 腕表/眼鏡/珠寶飾品</a></li>
<li><a href="#"><i class="fa fa-hand-o-right"></i> 手機(jī)/數(shù)碼/電腦辦公</a></li>
<li><a href="#"><i class="fa fa-hand-o-right"></i> 母嬰玩具</a></li>
<li><a href="#"><i class="fa fa-hand-o-right"></i> 圖書音像</a>
<div class="menu_content">
<div class="menu_left">
<p><b>當(dāng)季流行</b><span class="fa fa-angle-right"></span></p>
<p class="hr">
<a href="" style="color: pink;">夏季新品</a>
<a href="">商場同款</a>
<a href="">仙女連衣裙</a>
<a href="">T恤</a>
<a href="">襯衫</a>
<a href="">時髦外套</a>
<a href="">休閑外套</a>
<a href="">牛仔褲</a><br>
<a href="">無痕文胸</a>
<a href="">運(yùn)動文胸</a>
<a href="">潮流家居服</a>
<a href="">百搭船襪</a>
</p>
<p><b>當(dāng)季流行</b><span class="fa fa-angle-right"></span></p>
<p class="hr">
<a href="">夏季新品</a>
<a href="">商場同款</a>
<a href="">仙女連衣裙</a>
<a href="">T恤</a>
<a href="">襯衫</a>
<a href="">時髦外套</a>
<a href="">休閑外套</a>
<a href="">牛仔褲</a><br>
<a href="">無痕文胸</a>
<a href="">運(yùn)動文胸</a>
<a href="">潮流家居服</a>
<a href="">百搭船襪</a>
</p>
<p><b>當(dāng)季流行</b><span class="fa fa-angle-right"></span></p>
<p class="hr">
<a href="">夏季新品</a>
<a href="">商場同款</a>
<a href="">仙女連衣裙</a>
<a href="">T恤</a>
<a href="">襯衫</a>
<a href="">時髦外套</a>
<a href="">休閑外套</a>
<a href="">牛仔褲</a><br>
<a href="">無痕文胸</a>
<a href="">運(yùn)動文胸</a>
<a href="">潮流家居服</a>
<a href="">百搭船襪</a>
</p>
<p><b>當(dāng)季流行</b><span class="fa fa-angle-right"></span></p>
<p class="hr">
<a href="">夏季新品</a>
<a href="">商場同款</a>
<a href="">仙女連衣裙</a>
<a href="">T恤</a>
<a href="">襯衫</a>
<a href="">時髦外套</a>
<a href="">休閑外套</a>
<a href="">牛仔褲</a><br>
<a href="">無痕文胸</a>
<a href="">運(yùn)動文胸</a>
<a href="">潮流家居服</a>
<a href="">百搭船襪</a>
</p>
<p><b>當(dāng)季流行</b><span class="fa fa-angle-right"></span></p>
<p class="hr">
<a href="">夏季新品</a>
<a href="">商場同款</a>
<a href="">仙女連衣裙</a>
<a href="">T恤</a>
<a href="">襯衫</a>
<a href="">時髦外套</a>
<a href="">休閑外套</a>
<a href="">牛仔褲</a><br>
<a href="">無痕文胸</a>
<a href="">運(yùn)動文胸</a>
<a href="">潮流家居服</a>
<a href="">百搭船襪</a>
</p>
<p><b>當(dāng)季流行</b><span class="fa fa-angle-right"></span></p>
<p class="hr">
<a href="">夏季新品</a>
<a href="">商場同款</a>
<a href="">仙女連衣裙</a>
<a href="">T恤</a>
<a href="">襯衫</a>
<a href="">時髦外套</a>
<a href="">休閑外套</a>
<a href="">牛仔褲</a><br>
<a href="">無痕文胸</a>
<a href="">運(yùn)動文胸</a>
<a href="">潮流家居服</a>
<a href="">百搭船襪</a>
</p>
<p><b>當(dāng)季流行</b><span class="fa fa-angle-right"></span></p>
<p >
<a href="">夏季新品</a>
<a href="">商場同款</a>
<a href="">仙女連衣裙</a>
<a href="">T恤</a>
<a href="">襯衫</a>
<a href="">時髦外套</a>
<a href="">休閑外套</a>
<a href="">牛仔褲</a>
</p>
</div>
<div class="menu_right">
<a href=""><img src="static/images/3.jpg"></a>
<a href=""><img src="static/images/4.jpg"></a>
<a href=""><img src="static/images/5.jpg"></a>
<a href=""><img src="static/images/6.jpg"></a>
<a href=""><img src="static/images/3.jpg"></a>
<a href=""><img src="static/images/3.jpg"></a>
<a href=""><img src="static/images/3.jpg"></a>
<a href=""><img src="static/images/3.jpg"></a>
<a href=""><img src="static/images/3.jpg"></a>
<a href=""><img src="static/images/3.jpg"></a>
<a href=""><img src="static/images/3.jpg"></a>
<a href=""><img src="static/images/3.jpg"></a>
<a href=""><img src="static/images/3.jpg"></a>
<a href=""><img src="static/images/3.jpg"></a>
<a href=""><img src="static/images/5.jpg"></a>
<a href=""><img src="static/images/6.jpg"></a>
<a href=""><img src="static/images/5.jpg"></a>
<a href=""><img src="static/images/6.jpg"></a>
</div>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
仿天貓商城左側(cè)移上顯示商品效果（css部分）
*{margin: 0px;padding: 0px;}
ul{list-style: none;}
a{text-decoration: none;}
body{font-size: 13px;}
.top{background: #f2f2f2;height: 35px;}
.content{height: 35px;line-height: 35px;width: 1200px;margin: 0px auto;}
.left{width: 300px;float: left;}
.left a{margin-right:17px;}
.top a{ color: #6D6E6A;}
.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: 10px 0px; }
.dope{width: 100px;position:absolute; left: 0px;top:35px;line-height: 23px;padding: 10px 0px; }
#website{width: 1200px;height: 250px;position: absolute;right: 0px;top: 35px;z-index: 4;}
.right li:hover div{display: block;}
.middle{width:100%;height: 500px;background: url(../images/2.png);background-size: cover;margin-top: 40px;}
.middle .content{margin: 0px auto;width: 1200px;height: 500px;}
.menu{width: 200px;height: 500px;background:#000;background: rgba(0,0,0,0.4);position: relative; }
.menu li{height: 33px;line-height: 33px;}
.menu li:hover{background: #fff;}
.menu li a[href="#"]{color: #fff;font-weight: 400;}
.menu li:hover a[href="#"]{color: red;}
.menu li:hover i{color: red;}
.menu li a i{margin: 0px 10px 0px 15px;}
.menu_content{width: 820px;height: 500px;position: absolute;left: 200px;top: 0px;background: #f2f2f2;display: none;}
.menu li:hover .menu_content{display: block;}
.menu_left{width: 620px;height: 500px;float: left;background: #fff;}
.menu_left p{float: left;margin:10px 0px 0px 20px;}
.menu_left p a{margin-right: 8px;color: #6D6E6A;}
.menu_content p span{margin: 0px 10px 0px 5px;}
.hr{border-bottom: 1px dashed #ccc;}
.menu_right{width: 180px;height: 480px;float: right;margin:8px 10px;line-height: 14px;}
.menu_right a img{height: 52px;width: 87px;}
Correcting teacher：查無此人Correction time：2019-05-23 13:17:53
Teacher's summary：完成的不錯。學(xué)編程，先從模仿開始，繼續(xù)加油。