摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>天貓tmall.com--理想生活上天貓</title> </head> <link rel="sty
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>天貓tmall.com--理想生活上天貓</title>
</head>
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css" />
<style type="text/css">
*{margin: 0;padding: 0;}
a{text-decoration: none;color: #999999;}
ul{list-style: none;}
.top{height: 35px;background: #F2F2F2;}
.topbar{height:35px;margin: 0 auto;line-height: 35px;width: 1200px;font-size: 12px;color: #999;}
.topbar .left{float: left;}
.left a{margin-right: 18px;}
.left a:hover{color: red;}
.topbar .right{float: right;}
.right li{float: left;position: relative;padding: 0 10px;}
.right li:hover{color: red;}
.right li:hover .taobao{display:block;}
.right li i{margin: 0 5px;color:red;}
.right .taobao{border: 1px solid #ccc;border-top: none;position: absolute;left: 0;display:none;width: 95px;}
.taobao a{display:block;line-height:25px;margin: 0 10px;}
.container{height: 500px;width: 100%;background: url(2.png);margin-top: 100px;background-repeat: no-repeat;background-size: cover;}
.content{height: 500px;width: 1200px;margin: 0 auto;}
.content .menu{height: 500px;width: 200px;background: rgba(0,0,0,0.4);font-size: 15px;position: relative;}
.menu li{height: 31.2px;line-height: 30px;color: #FFFFFF;}
.menu li:hover{color: red;background: #FFFFFF;}
.menu li i{margin: 0 10px;}
.menu li:hover .menu-content{display: block;}
.menu-content{height: 500px;width:900px;background: #FFFFFF;position: absolute;top: 0;left: 200px;color: #000000;font-size: 13px;display: none;}
.menu-content div{float: left;}
.menu-left{float:left;padding:5px 20px;}
.menu-right{float:left;padding:10px;border-bottom: 1px dashed #CCCCCC;line-height: 19px;}
.menu-right a{margin-right: 20px;}
.content-right{height:484px;width:180px;background: #CCCCCC;text-align: center;line-height: 18px;padding: 8px 10px;}
.content-right a img{height: 50px;width: 88px;}
</style>
<body>
<!--頂部導航-->
<div class="top">
<div class="topbar">
<div class="left">
<a href="">喵，歡迎來天貓</a>
<a href="">請登錄</a>
<a href="">免費注冊</a>
</div>
<div class="right">
<ul>
<li>我的淘寶 <i class="fa fa-angle-down"></i>
<div class="taobao">
<a href="">已買到的寶貝</a>
<a href="">已賣出的寶貝</a>
</div>
</li>
<li><i class="fa fa-shopping-cart"></i>購物車0件</li>
<li>收藏夾<i class="fa fa-angle-down"></i>
<div class="taobao" style="width: 80px;">
<a href="">收藏的寶貝</a>
<a href="">收藏的店鋪</a>
</div>
</li>
<li>|</li>
<li><i class="fa fa-phone"></i>手機版</li>
<li>淘寶網(wǎng)</li>
<li>商家支持 <i class="fa fa-angle-down"></i></li>
<li><i class="fa fa-wechat"></i>網(wǎng)站導航</li>
</ul>
</div>
</div>
</div>
<!--輪播菜單-->
<div class="container">
<div class="content">
<ul class="menu">
<li><i class="fa fa-heart-o"></i>女裝/內(nèi)衣
<div class="menu-content">
<div style="width:700px;" class="content-left">
<div>
<p class="menu-left">當季流行 <i class="fa fa-angle-right"></i></p>
<p class="menu-right">
<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="">運動文胸</a>
<a href="">潮流家居服</a>
<a href="">百搭船襪</a>
</p>
</div>
<div>
<p class="menu-left">當季流行 <i class="fa fa-angle-right"></i></p>
<p class="menu-right">
<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="">運動文胸</a>
<a href="">潮流家居服</a>
<a href="">百搭船襪</a>
</p>
</div>
<div>
<p class="menu-left">當季流行 <i class="fa fa-angle-right"></i></p>
<p class="menu-right">
<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="">運動文胸</a>
<a href="">潮流家居服</a>
<a href="">百搭船襪</a>
</p>
</div>
<div>
<p class="menu-left">當季流行 <i class="fa fa-angle-right"></i></p>
<p class="menu-right">
<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="">運動文胸</a>
<a href="">潮流家居服</a>
<a href="">百搭船襪</a>
</p>
</div>
<div>
<p class="menu-left">當季流行 <i class="fa fa-angle-right"></i></p>
<p class="menu-right">
<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="">運動文胸</a>
<a href="">潮流家居服</a>
<a href="">百搭船襪</a>
</p>
</div>
<div>
<p class="menu-left">當季流行 <i class="fa fa-angle-right"></i></p>
<p class="menu-right">
<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="">運動文胸</a>
<a href="">潮流家居服</a>
<a href="">百搭船襪</a>
</p>
</div>
<div>
<p class="menu-left">當季流行 <i class="fa fa-angle-right"></i></p>
<p class="menu-right">
<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="">運動文胸</a>
<a href="">潮流家居服</a>
<a href="">百搭船襪</a>
</p>
</div>
<div>
<p class="menu-left">當季流行 <i class="fa fa-angle-right"></i></p>
<p class="menu-right">
<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="">運動文胸</a>
<a href="">潮流家居服</a>
<a href="">百搭船襪</a>
</p>
</div>
<div>
<p class="menu-left">當季流行 <i class="fa fa-angle-right"></i></p>
<p class="menu-right" style="border: none;">
<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 />
</p>
</div>
</div>
<div class="content-right">
<a href=""><img src="img/3.jpg"/></a>
<a href=""><img src="img/4.jpg"/></a>
<a href=""><img src="img/5.jpg"/></a>
<a href=""><img src="img/6.jpg"/></a>
<a href=""><img src="img/3.jpg"/></a>
<a href=""><img src="img/4.jpg"/></a>
<a href=""><img src="img/5.jpg"/></a>
<a href=""><img src="img/6.jpg"/></a>
<a href=""><img src="img/3.jpg"/></a>
<a href=""><img src="img/4.jpg"/></a>
<a href=""><img src="img/5.jpg"/></a>
<a href=""><img src="img/6.jpg"/></a>
<a href=""><img src="img/3.jpg"/></a>
<a href=""><img src="img/4.jpg"/></a>
<a href=""><img src="img/5.jpg"/></a>
<a href=""><img src="img/6.jpg"/></a>
<a href=""><img src="img/3.jpg"/></a>
<a href=""><img src="img/4.jpg"/></a>
</div>
</div>
</li>
<li><i class="fa fa-heart-o"></i>女裝/內(nèi)衣</li>
<li><i class="fa fa-heart-o"></i>女裝/內(nèi)衣</li>
<li><i class="fa fa-heart-o"></i>女裝/內(nèi)衣</li>
<li><i class="fa fa-heart-o"></i>女裝/內(nèi)衣</li>
<li><i class="fa fa-heart-o"></i>女裝/內(nèi)衣</li>
<li><i class="fa fa-heart-o"></i>女裝/內(nèi)衣</li>
<li><i class="fa fa-heart-o"></i>女裝/內(nèi)衣</li>
<li><i class="fa fa-heart-o"></i>女裝/內(nèi)衣</li>
<li><i class="fa fa-heart-o"></i>女裝/內(nèi)衣</li>
<li><i class="fa fa-heart-o"></i>女裝/內(nèi)衣</li>
<li><i class="fa fa-heart-o"></i>女裝/內(nèi)衣</li>
<li><i class="fa fa-heart-o"></i>女裝/內(nèi)衣</li>
<li><i class="fa fa-heart-o"></i>女裝/內(nèi)衣</li>
<li><i class="fa fa-heart-o"></i>女裝/內(nèi)衣</li>
<li><i class="fa fa-heart-o"></i>女裝/內(nèi)衣</li>
</ul>
</div>
</div>
</body>
</html>
批改老師：查無此人批改時間：2019-02-27 15:59:23
老師總結(jié)：完成的不錯。代碼如果寫不下，可以截圖上傳。繼續(xù)加油。