摘要：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>淘宝页面操作</title> <link rel="stylesheet" type="text/css" href="css/inde
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>淘宝页面操作</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="content">
<div class="contenta">
<div class="contental">
<a style="color:#000" href="#">中国大陆
<div class="diqu">
<p>河南</p>
<p>山东</p>
<p>新疆</p>
<p>江苏</p>
<p>浙江</p>
<p>四川</p>
<p>西藏</p>
<p>青海</p>
</div> <i class="fa fa-angle-down"></i>
</a>
<a href="#">亲，请登录</a>
<a href="#">免费注册</a>
<a href="#">手机逛淘宝</a>
</div>
<div class="contentar">
<ul class="contentarf">
<li><a href="#">我的淘宝</a>
<ul class="neiyed">
<li><a href="#">已买到的宝贝</a></li>
<li><a href="#">我的足迹</a></li>
</ul>
</li>
<li><a href="#">购物车</a></li>
<li><a href="#">收藏夹</a>
<ul >
<li><a href="#">收藏的宝贝</a></li>
<li><a href="#">收藏的店铺</a></li>
</ul>
</li>
<li><a href="#">商品分类</a></li>
<li><a href="#">卖家中心</a></li>
<li><a href="#">联系客服</a></li>
<li class="content_La"><a href="#"><span style="color:red" class="fa fa-navicon"></span> 网站导航</a>
<div class="tanchu">
<div class="neiyedh">
<h3>主题市场</h3>
<a href="#">女装</a>
<a href="#">男装</a>
<a href="#">童装</a>
<a href="#">箱包</a>
<a href="#">鞋靴</a>
<a href="#">内衣</a>
<a href="#">家电</a>
<a href="#">数码</a>
<a href="#">家具</a>
<a href="#">书籍</a>
<a href="#">百货</a>
<a href="#">办公</a>
<a href="#">教育</a>
<a href="#">业务</a>
<a href="#">写字</a>
<a href="#">画画</a>
<!-- <ul class="zhuti">
<li>男装</li>
<li>女装</li>
<li>童装</li>
<li>电子</li>
</ul> -->
</div>
<div class="neiyedh">
<h3>特色市场</h3>
<a href="#">新浪网</a>
<a href="#">搜狐网</a>
<a href="#">淘宝网</a>
<a href="#">支付宝</a>
<a href="#">微信</a>
<a href="#">金领之家</a>
<a href="#">机电之家</a>
<a href="#">农业科技</a>
<a href="#">电子产品</a>
<a href="#">历史故事</a>
<a href="#">百科全书</a>
<a href="#">小说名典</a>
<a href="#">拍卖会</a>
<a href="#">庙会街</a>
<a href="#">阿里巴巴</a>
<a href="#">众筹之路</a>
</div>
<div class="neiyedh">
<h3>App市场</h3>
<a href="#">三国志</a>
<a href="#">群英传</a>
<a href="#">群侠传</a>
<a href="#">三国策</a>
<a href="#">西游记</a>
<a href="#">聚划算</a>
<a href="#">王者农药</a>
<a href="#">大吉大利</a>
<a href="#">冰封王座</a>
<a href="#">亚洲王朝</a>
<a href="#">经典名吃</a>
<a href="#">手机银行</a>
<a href="#">聚合之家</a>
<a href="#">手机工具</a>
<a href="#">影音之道</a>
<a href="#">学习工具</a>
</div>
<div class="neiyedh1">
<h3>精彩推荐</h3>
<p><span><a href="#">话费快充</a></span><span><a href="#">特价商品</a></span></p>
<p><span><a href="#">打折商品</a></span><span><a href="#">东南亚外贸</a></span></p>
<p><span><a href="#">免费试用</a></span><span><a href="#">技术文章</a></span></p>
<p><span><a href="#">双12活动页</a></span><span><a href="#">常用软件</a></span></p>
</div>
</div>
</li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
</body>
</html>
/cssss/
*{margin:0 auto;padding:0;}
.content{width:100%;height:40px;background-color:#F5F5F5;border-bottom:1px solid #d8d8d8;}
.contenta{width:1200px;height:40px;line-height:40px;text-align:center;}
.contental{float:left;}
.contentar{float:right;}
a{color:#000;text-decoration: none;font-size:13px;display: inline-block;width:90px;position: relative;}
a:hover{color:#FF4400;background-color: #fff;width:90px;}
li{list-style:none;float:left;}
p{list-style: none}
.clear{clear: both}
.diqu{display:none;width:90px;height: 160px;}
.contental a:hover .diqu{display:block;width:90px;position: absolute;overflow-y:scroll;}
.neiyed{width:90px;}
.neiyed li{float: none;text-align:left;margin-top:5px;background-color: #fff;width:90px;}
.contentarf li ul{display: none;width:88px;border:1px solid #F5F5F5;}
.contentarf li:hover ul{display:block;width:88px;}
.neiyed li a{padding-left:5px;}
.neiyed li:hover a{background-color: blue;width:85px;padding-left:5px;}
.tanchu{width:1200px;height:200px;background-color:#F5F5F5;display: none;position: absolute;border:1px solid #F5F5F5;border-top: none }
/*.content_La{}*/
.content_La:hover .tanchu{display: block;position: absolute;left:21.4%;top:42px;width:1200px;background-color:#fff}
.tanchu div{float: left;width:296px;color:red;}
.neiyedh{width:296px;height:200px;border-right: 1px solid #F5F5F5}
.neiyedh a{width:70px;color:#000;}
.neiyedh a:hover{color:pink;}
.neiyedh p span a{margin:0 20px}
.neiyedh p span a:hover{color:pink;}
批改老师：灭绝师太批改时间：2018-11-27 10:47:03
老师总结：回头看看之前的代码，你现在已经进步非常大了！继续加油！
