摘要：*{margin: 0px;padding: 0px;} ul,li{list-style: none;} a{text-decoration: none;color: #6D6E6A;font-size: 12px;} a:hover{color:red;} .clear{clear:both;} span{text-decoratio
*{margin: 0px;padding: 0px;}
ul,li{list-style: none;}
a{text-decoration: none;color: #6D6E6A;font-size: 12px;}
a:hover{color:red;}
.clear{clear:both;}
span{text-decoration: none;color: #6D6E6A;font-size: 12px;margin-right:18px;}
.top{width:100%;height:35px;background: #F2F2F2;}
.content{width:1230px;margin:auto;}
.left{float:left;height:35px;line-height: 35px;width:300px;}
.left a{margin-right: 18px;}
.right{float:right;height:35px;line-height: 35px;}
.right li{float:left;margin-left:15px;position:relative;}
.right li div{background: #fff;text-align: center;box-shadow: 2px 1px 5px #ccc;width:120px;display:none;}
.right li:hover div{display:block;}
.right li i{color:red;}
.wo{ display:block;padding:0 10px; font-size:12px;}
.wo:hover{ display:block;background:#fff;padding:0 10px; font-size:12px;}
.taobao{width:120px;position:absolute;left:0px;top:35px;}
#website{width: 1230px;height: 250px;position: absolute;right: 0px;top: 35px;}
.middle{width:100%;height: 500px;background: url(../images/2.png);margin-top: 40px;}
.middle .content{width:1230px;height:500px;margin:0 auto;}
.content_left{background:rgba(0,0,0,0.3);width:200px;position: relative; }
.content_left li{height: 33px;line-height: 33px;}
.content_left li:hover{background: #fff;}
.content_left li a[href="#"]{color: #fff;font-weight: 400;}
.content_left li:hover a[href="#"]{color: red;}
.content_left li:hover i{color: red;}
.content_left li a i{margin: 0px 10px 0px 15px;}
.menu_content{width: 820px;height: 500px;position: absolute;left: 200px;top: 0px;background: #f3f3f3;display: none;}
.content_left 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;}<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>喵，我是天猫！</title> <link rel="shortcut icon" type="image/x-icon" href="static/images/logo1.png"> <link rel="stylesheet" type="text/css" href="static/css/style.css"> <link rel="stylesheet" type="text/css" href="static/font-awesome/css/font-awesome.min.css"> </head> <body> <div class="top"> <div class="content"> <div class="left"> <span>喵，欢迎来到天猫</span> <a href="">请登录</a> <a href="">免费注册</a> </div> <div class="right"> <li> <a href="#" class="wo">我的宝贝 <i class="fa fa-angle-down"></i></a> <div class="taobao"> <a href="" >买到的宝贝</a><br> <a href="" >卖出的宝贝</a> </div> </li> <li> <a href=""><i class="fa fa-heart"></i> 我关注的品牌</a> </li> <li> <a href=""><i class="fa fa-shopping-cart"></i> 购物车0件</a> </li> <li> <a href=""> 收藏夹</a> </li> <li> <span>|</span> </li> <li> <a href=""><i class="fa fa-shopping-cart"></i> 手机版</a> </li> <li> <a href="">淘宝网</a> </li> <li> <a href=""><i class="fa fa-shopping-cart"></i> 网站导航</a> <div id="website"></div> </li> </div> </div> <div class="clear"></div> </div> <div class="middle"> <div class="content"> <div class="content_left"> <li><a href="#"><i class="fa fa-location-arrow"></i> 女装/内衣</a> <div class="menu_content"> <div class="menu_left"> <p><b>当季流行</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="">运动文胸</a> <a href="">潮流家居服</a> <a href="">百搭船袜</a> </p> <p><b>当季流行</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="">运动文胸</a> <a href="">潮流家居服</a> <a href="">百搭船袜</a> </p> <p><b>当季流行</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="">运动文胸</a> <a href="">潮流家居服</a> <a href="">百搭船袜</a> </p> <p><b>当季流行</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="">运动文胸</a> <a href="">潮流家居服</a> <a href="">百搭船袜</a> </p> <p><b>当季流行</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="">运动文胸</a> <a href="">潮流家居服</a> <a href="">百搭船袜</a> </p> <p><b>当季流行</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="">运动文胸</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-location-arrow"></i> 男装/运动户外</a></li> <li><a href="#"><i class="fa fa-location-arrow"></i> 女鞋/男鞋/箱包</a></li> <li><a href="#"><i class="fa fa-location-arrow"></i> 美妆/个人护理</a></li> <li><a href="#"><i class="fa fa-location-arrow"></i> 腕表/眼镜/珠宝饰品</a></li> <li><a href="#"><i class="fa fa-location-arrow"></i> 手机/数码/电脑办公</a></li> <li><a href="#"><i class="fa fa-location-arrow"></i> 母婴玩具</a></li> <li><a href="#"><i class="fa fa-location-arrow"></i> 零食/茶酒/进口食品</a></li> <li><a href="#"><i class="fa fa-location-arrow"></i> 生鲜水果</a></li> <li><a href="#"><i class="fa fa-location-arrow"></i> 女鞋/男鞋/箱包</a></li> <li><a href="#"><i class="fa fa-location-arrow"></i> 美妆/个人护理</a></li> <li><a href="#"><i class="fa fa-location-arrow"></i> 腕表/眼镜/珠宝饰品</a></li> <li><a href="#"><i class="fa fa-location-arrow"></i> 手机/数码/电脑办公</a></li> <li><a href="#"><i class="fa fa-location-arrow"></i> 母婴玩具</a></li> <li><a href="#"><i class="fa fa-location-arrow"></i> 图书音像</a> </div> </div> </div> </body> </html>
批改老师：天蓬老师批改时间：2019-02-01 16:07:23
老师总结：你的css看着真累, 你不觉得吗? 下次能不能一个样式一行的写
