上周四 周五这个样子差不多把淘宝页面大部分完工了。1.24号开始的，2.5-2.6这样结束的，应该是说差不多结束。我写页面一般是看的360浏览器，后来写完之后去看火狐和IE，还是蛮多问题的。
首先就是字体。font-size：10px；在360下看着蛮正常的，在火狐和IE下看着好小。
我在CSS文件的最开始设置了通用样式，后来写着写着我都忘了自己已经定义了字体了。
还有边框的问题，在360 火狐下看着蛮正常，结果在IE下都溢出了。我看了下在360，火狐下的行高35px，在IE8下变成了30px；之前看过文章，说IE下padding margin 会重叠。得去研究下。
然后火狐下有几张图片显示不出来，后来发现是图片格式问题，换了张图片，又能正常显示了。
还有就是便民服务那里的三角形在IE8下显示有黑色背景，360和火狐下是正常的。
整个首页虽然内容都添加完成了。但是写完之后感觉很混乱，可重复利用性比较差，也没怎么遵守语义化，想怎么写，样式怎么能显示怎么写，没有考虑其他的。有些已经设置固定的宽高会有一像素的左移动或者右移动也没有处理。还有很多 各种类之间通用的样式没有取出来。
写完这个页面，觉得有比较再去重新看下W3C上的CSS html教程，更深入的了解下怎么语义化标签。另外在写的过程中觉得给没个类取名字好困难啊。之前看到过一篇文章，一般的页面都有差不多约定俗成的取名规范。
总体感觉能用html+css把页面堆砌起来。
需要解决的问题：
1.IE下margin padding是否有重叠，为什么跟其他浏览器行高或者间距有区别
2.了解标签语义化
3.学习规范的类命名
4.以后写页面要在多个浏览器下查看，不要等问题堆在一起再来解决。
5.。。。。还有很多，一时不知道怎么表述，不断补充。
代码在 下面 欢迎吐槽
html代码
<!doctype html> <html> <head> <meta charset="utf-8"> <title>淘宝</title> <link rel="stylesheet" type="text/css" href="css/maincss.css"/> <link rel="stylesheet" type="text/css" href="css/common.css"/> <link href="images/taobao.jpg" > </head> <body> <!-- 顶部内容 --> <div class="topbg"> <div class="top"> <ul class="topleft"> <li><a href="#" style="color:red;">亲，请登录</a></li> <li><a href="#">免费注册</a></li> <li><a href="#">手机逛淘宝</a></li> <li><a href="#"><img src="images/top.gif"/></a></li> </ul> <ul class="topright"> <li><a href="#" >我的淘宝</a></li> <li><a href="#">购物车</a></li> <li><a href="#">收藏夹</a></li> <li><a href="#">商品分类</a></li> <li><a href="#">卖家中心</a></li> <li><a href="#">联系客服</a></li> <li class="weblist"><a href="#">网站导航</a> <div class="webnav"> <div class="zhuti"> <h3>主体市场</h3> <ul> <li>淘宝女人</li> <li>运动派</li> <li>情侣</li> <li>淘宝男人</li> <li>孕婴童</li> <li>家居</li> <li>美容护肤</li> <li>中老年</li> <li>汇吃</li> <li>保险理财</li> <li>有车族</li> <li>装修</li> <li>手机数码</li> <li>生活家</li> <li>游戏</li> <li>动漫</li> <li>爱好</li> </ul> </div> <div class="tese"> <h3>特色购物</h3> <ul> <li>淘宝女人</li> <li>运动派</li> <li>情侣</li> <li>淘宝男人</li> <li>孕婴童</li> <li>家居</li> <li>美容护肤</li> <li>中老年</li> <li>汇吃</li> <li>保险理财</li> <li>有车族</li> <li>装修</li> <li>手机数码</li> <li>生活家</li> <li>游戏</li> <li>动漫</li> <li>爱好</li> </ul> </div> <div class="currentHot"> <h3>当前热点</h3> <ul> <li>淘宝女人</li> <li>运动派</li> <li>情侣</li> <li>淘宝男人</li> <li>孕婴童</li> <li>家居</li> <li>美容护肤</li> <li>中老年</li> <li>汇吃</li> <li>保险理财</li> <li>有车族</li> <li>装修</li> <li>手机数码</li> <li>生活家</li> <li>游戏</li> <li>动漫</li> <li>爱好</li> </ul> </div> <div class="more"> <h3>更多精彩</h3> <ul> <li>淘宝女人</li> <li>运动派</li> <li>情侣</li> <li>淘宝男人</li> <li>孕婴童</li> <li>家居</li> <li>美容护肤</li> <li>中老年</li> <li>汇吃</li> <li>保险理财</li> <li>有车族</li> <li>装修</li> <li>手机数码</li> <li>生活家</li> <li>游戏</li> <li>动漫</li> <li>爱好</li> </ul> </div> </div> </li> </ul> </div> </div> <!-- 正文部分 --> <div class="main"> <!-- 导航栏部分 --> <div class="navbar"> <div class="search clearfix"> <div class="logo"> <a href="#"><img src="images/logo.gif"></a> </div> <div class="searchBox"> <div class="searchnav"> <ul> <li class="goods-search"><a href="#">宝贝</a></li> <li class="tmall-search"><a href="#">天猫</a></li> <li class="shop-search"><a href="#">店铺</a></li> </ul> </div> <div class="searchmain clearfix"> <input type="text" class="searchtext"> <input type="button" value="搜索" class="button"> <span>高级搜索</span> </div> <div class="searchhot"> <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 class="searchhot-more">更多 <i></i> </a> </div> </div> <div class="searchWeixin clearfix"> <a> <span>手机淘宝</span> <img src="images/weixin.png" alt="扫描二维码"> </a> </div> </div> <div class="mainnav"> <!-- 左边导航开始 --> <div class="nav"> <div class="navlist"> <!-- <div class="topnav">淘宝特色服务</div> --> <dl> <dt class="navlist-a">主题市场 <!-- <a href="#">更多</a> --> </dt> <dd><a href="#">淘宝女人</a></dd> <dd><a href="#">运动派</a></dd> <dd><a href="#">情侣</a></dd> <dd><a href="#">淘宝男人</a></dd> <dd><a href="#">孕婴童</a></dd> <dd><a href="#">家居</a></dd> <dd><a href="#">美容护肤</a></dd> <dd><a href="#">中老年</a></dd> <dd><a href="#">美食</a></dd> <dd><a href="#">保险理财</a></dd> <dd><a href="#">有车族</a></dd> <dd><a href="#">装修</a></dd> <dd><a href="#">手机数码</a></dd> <dd><a href="#">生活家</a></dd> <dd><a href="#">游戏</a></dd> </dl> <dl> <dt class="navlist-b">特色购物</dt> <dd><a href="#">淘宝二手</a></dd> <dd><a href="#">拍卖会</a></dd> <dd><a href="#">爱逛街</a></dd> <dd><a href="#">淘宝奇葩</a></dd> <dd><a href="#">全球购</a></dd> <dd><a href="#">挑食</a></dd> <dd><a href="#">淘宝同学</a></dd> <dd><a href="#">淘女郎</a></dd> <dd><a href="#">星店</a></dd> <dd><a href="#">淘宝众筹</a></dd> <dd><a href="#">B格</a></dd> <dd><a href="#">动漫</a></dd> <!-- <dd><a href="#">腔调</a></dd> --> <dd><a href="#">生活服务</a></dd> <dd><a href="#">淘宝达人</a></dd> <dd><a href="#">搭配</a></dd> </dl> <dl> <dt class="navlist-c">优惠促销</dt> <dd><a href="#">天天特价</a></dd> <dd><a href="#">免费试用</a></dd> <dd><a href="#">清仓</a></dd> <dd><a href="#">一元起拍</a></dd> <dd><a href="#">淘金币</a></dd> <dd><a href="#">夜抢购</a></dd> </dl> <dl> <dd><a href="#">阿里旺旺</a></dd> <dd><a href="#">支付宝</a></dd> <dd><a href="#">来往</a></dd> </dl> </div> <div class="navbottom"> <a href="#"><img src="images/navbottom.png"></a> </div> </div> <!-- 左边导航结束 --> <!-- 右边导航开始 --> <div class="navright"> <div class="taobaonav"> <ul class="nav-a"> <li>天猫</li> <li>聚划算</li> <li>超市</li> </ul> <ul class="nav-b"> <li>阿里旅行</li> <li>司法拍卖</li> <li>一淘</li> <li>电器城</li> <li>嗨淘妆品</li> <li>云智能</li> <li>特色中国</li> </ul> <ul class="nav-c"> <li class="nav-c-left"><img src="images/taobaogushi.gif" alt="淘宝故事"></li> <li class="nav-c-right">消费者保障</li> </ul> </div> <div class="navimg"> <div class="navimgLeft clearfix"> <div class="navimgLeftone"> <div class="navimgLeftonebox"> <img src="images/leftone.jpg"> <img src="images/leftone.jpg"> <img src="images/leftone.jpg"> <img src="images/leftone.jpg"> <img src="images/leftone.jpg"> </div> <div class="button1"> <a></a> <a></a> <a></a> <a></a> <a></a> </div> </div> <div class="navimgLefttwo"> <div class="navimgLefttwobox"> <div class="navimgLefttwobox-a"> <img class="a-1-1" src="images/navimgLefttwo1.png"> <img class="b-1" src="images/navimgLefttwo2.png"> <img class="b-1" src="images/navimgLefttwo3.png"> <img class="b-1" src="images/navimgLefttwo4.png"> </div> <div class="navimgLefttwobox-a"> <img src="images/navimgLefttwo5.png"> <img src="images/navimgLefttwo6.png"> <img src="images/navimgLefttwo7.png"> <img src="images/navimgLefttwo8.png"> </div> <div class="navimgLefttwobox-a"> <img src="images/navimgLefttwo9.png"> <img src="images/navimgLefttwo10.png"> <img src="images/navimgLefttwo11.png"> <img src="images/navimgLefttwo12.png"> </div> <div class="navimgLefttwobox-a"> <img src="images/navimgLefttwo13.jpg"> <img src="images/navimgLefttwo14.jpg"> <img src="images/navimgLefttwo15.jpg"> <img src="images/navimgLefttwo16.jpg"> </div> <div class="navimgLefttwobox-b"> <img src="images/navimgLefttwo17.jpg"> <img src="images/navimgLefttwo18.jpg"> <img src="images/navimgLefttwo19.jpg"> <img src="images/navimgLefttwo20.jpg"> <img src="images/navimgLefttwo21.png"> <img src="images/navimgLefttwo22.jpg"> <img src="images/navimgLefttwo23.jpg"> <img src="images/navimgLefttwo24.jpg"> <img src="images/navimgLefttwo25.jpg"> <img src="images/navimgLefttwo26.jpg"> <img src="images/navimgLefttwo27.png"> <img src="images/navimgLefttwo28.jpg"> </div> <div class="navimgLefttwobox-c"> <img src="images/navimgLefttwo29.jpg"> <img src="images/navimgLefttwo30.jpg"> </div> </div> </div> </div> <div class="navimgRight clearfix"> <div class="navimgRightone"> <img src="images/navimgRightone.jpg"> </div> <div class="navimgRighttwo"> <img src="images/navimgRighttwo.jpg"> </div> </div> </div> <div class="notice"> <div class="noticeone"> <ul class="noticeoneNav"> <li class="gonggao"><a href="#">公告</a></li> <li ><a href="#">规则</a></li> <li><a href="#">论坛</a></li> <li><a href="#">安全</a></li> <li><a href="#">公益</a></li> </ul> <ul class="noticeoneNews"> <li><a href="#">工商张茅局长会见马云</a></li> <li><a href="#">工商白皮书无法律效应</a></li> <li><a href="#">千万奖金唤起千万善行</a></li> <li><a href="#">淘宝助你回家过年系列</a></li> </ul> </div> <div class="noticetwo"> <div class="noticetwoHi"> <img src="images/s.gif"> <div class="noticetwo-a"> <p>Hi!你好</p> <a class="noticetwo-b"><i></i>领淘金币递签</a> <a class="noticetwo-c">会员俱乐部</a> </div> </div> <div class="noticetwoLogin"> <a href="#" class="noticetwoLogin-a"><i></i>登陆</a> <a href="#" class="noticetwoLogin-b">免费注册</a> <a href="#" class="noticetwoLogin-c">免费开店</a> </div> </div> <div class="noticethree"> <h3>便民服务</h3> <a> <img class="huafei" src="images/huafei.png"> <p>话费</p> <span></span> </a> <a> <img class="huafei" src="images/wangyou.png"> <p>游戏</p> <span></span> </a> <a> <img class="huafei" src="images/lvxing.png"> <p>旅行</p> <span></span> </a> <a> <img class="huafei" src="images/baoxian.png"> <p>保险</p> <span></span> </a> <a> <img class="huafei" src="images/huafei.png"> <p>彩票</p> </a> <a> <img class="huafei" src="images/wangyou.png"> <p>电影票</p> </a> <a> <img class="huafei" src="images/lvxing.png"> <p>点外卖</p> </a> <a> <img class="huafei" src="images/baoxian.png"> <p>理财</p> </a> <a> <img class="huafei" src="images/huafei.png"> <p>电子书</p> </a> <a> <img class="huafei" src="images/wangyou.png"> <p>音乐</p> </a> <a> <img class="huafei" src="images/lvxing.png"> <p>水电煤</p> </a> <a> <img class="huafei" src="images/baoxian.png"> <p>火车票</p> </a> </div> </div> </div> <!-- 右边导航结束 --> </div> </div> <!-- 中部导航栏 --> <div class="middlenav"> <div class="presentHot"> <div class="presentHot-a"> <h3>当前热点</h3> <i></i> </div> <ul class="presentHot-b"> <li> <a>正品包邮</a> <a>女装年货</a> <a>早教学习</a> </li> <li> <a>抢ipad</a> <a>男装年货</a> <a>新奇玩具</a> </li> </ul> </div> <div class="presentHot"> <div class="presentHot-a"> <h3>精彩推荐</h3> <i></i> </div> <ul class="presentHot-b"> <li> <a>正品包邮</a> <a>女装年货</a> <a>早教学习</a> </li> <li> <a>抢ipad</a> <a>男装年货</a> <a>新奇玩具</a> </li> </ul> </div> <div class="presentHot-c"> <div class="presentHot-a"> <h3>拍卖专区</h3> <i></i> </div> <ul class="presentHot-d"> <li> <a>正品包邮</a> <a>女装年货</a> </li> <li> <a>抢ipad</a> <a>男装年货</a> </li> </ul> </div> <div class="middlenavImgone"> <img src="images/middlenav.png"> </div> <div class="middlenavImgtwo"> <img src="images/changxue.png"> </div> </div> <!-- 主要内容部分 --> <div class="maincontent"> <!-- 主要内容部分左侧 --> <div class="maincontentLeft"> <!-- 女装男装-鞋靴箱包-运动户外-珠宝配饰--> <div class="cloth"> <div class="clothhead"> <h4>女装·男装</h4> <span>春节旅行装扮</span> <ul> <li><a class="clothhead-a">大肠清仓</a><a>男装年货</a></li> </ul> </div> <div class="clothlist"> <div class="clothlistLeft fl"> <div class="clothlistLeft-a"> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> </div> <div class="clothlistLeft-b"> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> </div> <div class="clothlistLeft-c"> <dl> <dt>女装精品</dt> <dd><a>打底连</a><a>针织衫</a><a>毛呢裙</a><a>冬装</a><a>皮裤</a></dd> </dl> </div> </div> <div class="clothlistRight fl"> <img src="images/clothlistRight.jpg"> </div> </div> </div> <div class="shoes"> <div class="clothhead"> <h4>鞋靴·箱包</h4> <span>春节旅行装扮</span> <ul> <li><a class="clothhead-a">大肠清仓</a><a>男装年货</a></li> </ul> </div> <div class="clothlist"> <div class="clothlistLeft fl"> <div class="clothlistLeft-a"> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> </div> <div class="clothlistLeft-b"> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> </div> <div class="clothlistLeft-c"> <dl> <dt>女装精品</dt> <dd><a>打底连</a><a>针织衫</a><a>毛呢裙</a><a>冬装</a><a>皮裤</a></dd> </dl> </div> </div> <div class="clothlistRight fl"> <img src="images/clothlistRight.jpg"> </div> </div> </div> <div class="sports"> <div class="clothhead"> <h4>运动户外</h4> <span>春节旅行装扮</span> <ul> <li><a class="clothhead-a">大肠清仓</a><a>男装年货</a></li> </ul> </div> <div class="clothlist"> <div class="clothlistLeft fl"> <div class="clothlistLeft-a sportslistleft-a"> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> </div> <div class="clothlistLeft-c "> <dl> <dt>女装精品</dt> <dd><a>打底连</a><a>针织衫</a><a>毛呢裙</a><a>冬装</a><a>皮裤</a></dd> </dl> </div> </div> <div class="sportslistRight fl"> <a class="sportsone"><span>洋气新年潮鞋</span></a> <a class="sportstwo"><span>淘特莱斯首发</span></a> </div> </div> </div> <div class="jewel"> <div class="clothhead"> <h4>珠宝配饰</h4> <span>春节旅行装扮</span> <ul> <li><a class="clothhead-a">大肠清仓</a><a>男装年货</a></li> </ul> </div> <div class="clothlist"> <div class="clothlistLeft fl"> <div class="clothlistLeft-a sportslistleft-a"> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> </div> <div class="clothlistLeft-c"> <dl> <dt>女装精品</dt> <dd><a>打底连</a><a>针织衫</a><a>毛呢裙</a><a>冬装</a><a>皮裤</a></dd> </dl> </div> </div> <div class="sportslistRight fl"> <a class="sportsone"><span>洋气新年潮鞋</span></a> <a class="sportstwo"><span>淘特莱斯首发</span></a> </div> </div> </div> <div class="maincontentImgone"> <img src="images/maincontentone.jpg"> </div> <!-- 手机数码-家电办公-护肤彩妆-母婴用品 --> <div class="sports"> <div class="clothhead"> <h4>手机数码</h4> <span>春节旅行装扮</span> <ul> <li><a class="clothhead-a">大肠清仓</a><a>男装年货</a></li> </ul> </div> <div class="clothlist"> <div class="clothlistLeft fl"> <div class="clothlistLeft-a sportslistleft-a"> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> </div> <div class="clothlistLeft-c"> <dl> <dt>女装精品</dt> <dd><a>打底连</a><a>针织衫</a><a>毛呢裙</a><a>冬装</a><a>皮裤</a></dd> </dl> </div> </div> <div class="sportslistRight fl"> <a class="sportsone"><span>洋气新年潮鞋</span></a> <a class="sportstwo"><span>淘特莱斯首发</span></a> </div> </div> </div> <div class="jewel"> <div class="clothhead"> <h4>家电办公</h4> <span>春节旅行装扮</span> <ul> <li><a class="clothhead-a">大肠清仓</a><a>男装年货</a></li> </ul> </div> <div class="clothlist"> <div class="clothlistLeft fl"> <div class="clothlistLeft-a sportslistleft-a"> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> </div> <div class="clothlistLeft-c"> <dl> <dt>女装精品</dt> <dd><a>打底连</a><a>针织衫</a><a>毛呢裙</a><a>冬装</a><a>皮裤</a></dd> </dl> </div> </div> <div class="sportslistRight fl"> <a class="sportsone"><span>洋气新年潮鞋</span></a> <a class="sportstwo"><span>淘特莱斯首发</span></a> </div> </div> </div> <div class="sports"> <div class="clothhead"> <h4>护肤彩妆</h4> <span>春节旅行装扮</span> <ul> <li><a class="clothhead-a">大肠清仓</a><a>男装年货</a></li> </ul> </div> <div class="clothlist"> <div class="clothlistLeft fl"> <div class="clothlistLeft-a sportslistleft-a"> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> </div> <div class="clothlistLeft-c"> <dl> <dt>女装精品</dt> <dd><a>打底连</a><a>针织衫</a><a>毛呢裙</a><a>冬装</a><a>皮裤</a></dd> </dl> </div> </div> <div class="sportslistRight fl"> <a class="sportsone"><span>洋气新年潮鞋</span></a> <a class="sportstwo"><span>淘特莱斯首发</span></a> </div> </div> </div> <!-- 母婴用品 --> <div class="jewel"> <div class="clothhead"> <h4>母婴用品</h4> <span>春节旅行装扮</span> <ul> <li><a class="clothhead-a">大肠清仓</a><a>男装年货</a></li> </ul> </div> <div class="clothlist"> <div class="clothlistLeft fl"> <div class="clothlistLeft-a sportslistleft-a"> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> </div> <div class="clothlistLeft-c"> <dl> <dt>女装精品</dt> <dd><a>打底连</a><a>针织衫</a><a>毛呢裙</a><a>冬装</a><a>皮裤</a></dd> </dl> </div> </div> <div class="sportslistRight fl"> <a class="sportsone"><span>洋气新年潮鞋</span></a> <a class="sportstwo"><span>淘特莱斯首发</span></a> </div> </div> </div> <div class="maincontentImgone"> <img src="images/maincontentone.jpg"> </div> <!-- 家居家纺-家装建材-汇吃美食-百货市场 --> <div class="sports"> <div class="clothhead"> <h4>家居家纺</h4> <span>春节旅行装扮</span> <ul> <li><a class="clothhead-a">大肠清仓</a><a>男装年货</a></li> </ul> </div> <div class="clothlist"> <div class="clothlistLeft fl"> <div class="clothlistLeft-a sportslistleft-a"> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> </div> <div class="clothlistLeft-c"> <dl> <dt>女装精品</dt> <dd><a>打底连</a><a>针织衫</a><a>毛呢裙</a><a>冬装</a><a>皮裤</a></dd> </dl> </div> </div> <div class="sportslistRight fl"> <a class="sportsone"><span>洋气新年潮鞋</span></a> <a class="sportstwo"><span>淘特莱斯首发</span></a> </div> </div> </div> <div class="jewel"> <div class="clothhead"> <h4>家装建材</h4> <span>春节旅行装扮</span> <ul> <li><a class="clothhead-a">大肠清仓</a><a>男装年货</a></li> </ul> </div> <div class="clothlist"> <div class="clothlistLeft fl"> <div class="clothlistLeft-a sportslistleft-a"> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> </div> <div class="clothlistLeft-c"> <dl> <dt>女装精品</dt> <dd><a>打底连</a><a>针织衫</a><a>毛呢裙</a><a>冬装</a><a>皮裤</a></dd> </dl> </div> </div> <div class="sportslistRight fl"> <a class="sportsone"><span>洋气新年潮鞋</span></a> <a class="sportstwo"><span>淘特莱斯首发</span></a> </div> </div> </div> <div class="food"> <div class="clothhead"> <h4>汇吃美食</h4> <span>春节旅行装扮</span> <ul> <li><a class="clothhead-a">大肠清仓</a><a>男装年货</a></li> </ul> </div> <div class="foodimg"> <a href="#"><img src="images/footone.jpg"></a> <a href="#"><img src="images/foodtwo.png"></a> <a href="#"><img src="images/foodthree.jpeg"></a> <a href="#"><img src="images/foodfour.png"></a> </div> <div class="foodlist"> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a></dd> </dl> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a></dd> </dl> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a></dd> </dl> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a></dd> </dl> </div> </div> <div class="shoppingmall"> <div class="clothhead"> <h4>百货美食</h4> <span>春节旅行装扮</span> <ul> <li><a class="clothhead-a">大肠清仓</a><a>男装年货</a></li> </ul> </div> <div class="shoppingmall-list"> <div class="shoppingmall-listleft fl"> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a></dd> </dl> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a></dd> </dl> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a></dd> </dl> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a></dd> </dl> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a></dd> </dl> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a></dd> </dl> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a></dd> </dl> </div> <div class="shoppingmall-listright fl"> <a class="shoppingmall-listrightone"><span>保温杯</span></a> <a class="shoppingmall-listrighttwo"><span>情侣拖</span></a> <a class="shoppingmall-listrightthree"><span>清洁神器</span></a> <a class="shoppingmall-listrightfour"><span>落地架</span></a> </div> </div> <div class="shoppingmall-img"> <a href="#"><img src="images/shoppingmallimgone.png"></a> <a href="#"><img src="images/shoppingmallimgtwo.jpg"></a> </div> </div> <div class="maincontentImgone"> <img src="images/maincontentone.jpg"> </div> <!-- 汽车摩托-花鸟文娱-生活服务-更多服务 --> <div class="sports"> <div class="clothhead"> <h4>家装建材</h4> <span>春节旅行装扮</span> <ul> <li><a class="clothhead-a">大肠清仓</a><a>男装年货</a></li> </ul> </div> <div class="clothlist"> <div class="clothlistLeft fl"> <div class="clothlistLeft-a sportslistleft-a"> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> </div> <div class="clothlistLeft-c"> <dl> <dt>女装精品</dt> <dd><a>打底连</a><a>针织衫</a><a>毛呢裙</a><a>冬装</a><a>皮裤</a></dd> </dl> </div> </div> <div class="sportslistRight fl"> <a class="sportsone"><span>洋气新年潮鞋</span></a> <a class="sportstwo"><span>淘特莱斯首发</span></a> </div> </div> </div> <div class="jewel"> <div class="clothhead"> <h4>家装建材</h4> <span>春节旅行装扮</span> <ul> <li><a class="clothhead-a">大肠清仓</a><a>男装年货</a></li> </ul> </div> <div class="clothlist"> <div class="clothlistLeft fl"> <div class="clothlistLeft-a sportslistleft-a"> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> </div> <div class="clothlistLeft-c"> <dl> <dt>女装精品</dt> <dd><a>打底连</a><a>针织衫</a><a>毛呢裙</a><a>冬装</a><a>皮裤</a></dd> </dl> </div> </div> <div class="sportslistRight fl"> <a class="sportsone"><span>洋气新年潮鞋</span></a> <a class="sportstwo"><span>淘特莱斯首发</span></a> </div> </div> </div> <div class="sports"> <div class="clothhead"> <h4>家装建材</h4> <span>春节旅行装扮</span> <ul> <li><a class="clothhead-a">大肠清仓</a><a>男装年货</a></li> </ul> </div> <div class="clothlist"> <div class="clothlistLeft fl"> <div class="clothlistLeft-a sportslistleft-a"> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> </div> <div class="clothlistLeft-c"> <dl> <dt>女装精品</dt> <dd><a>打底连</a><a>针织衫</a><a>毛呢裙</a><a>冬装</a><a>皮裤</a></dd> </dl> </div> </div> <div class="sportslistRight fl"> <a class="sportsone"><span>洋气新年潮鞋</span></a> <a class="sportstwo"><span>淘特莱斯首发</span></a> </div> </div> </div> <div class="jewel"> <div class="clothhead"> <h4>家装建材</h4> <span>春节旅行装扮</span> <ul> <li><a class="clothhead-a">大肠清仓</a><a>男装年货</a></li> </ul> </div> <div class="clothlist"> <div class="clothlistLeft fl"> <div class="clothlistLeft-a sportslistleft-a"> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> <dl> <dt>潮流女装</dt> <dd><a>冬上新</a><a>韩版</a><a>连衣裙</a><a>毛呢裙</a><a>半身裙</a></dd> </dl> </div> <div class="clothlistLeft-c"> <dl> <dt>女装精品</dt> <dd><a>打底连</a><a>针织衫</a><a>毛呢裙</a><a>冬装</a><a>皮裤</a></dd> </dl> </div> </div> <div class="sportslistRight fl"> <a class="sportsone"><span>洋气新年潮鞋</span></a> <a class="sportstwo"><span>淘特莱斯首发</span></a> </div> </div> </div> <div class="maincontentImgone"> <img src="images/maincontentone.jpg"> </div> </div> <!-- 主要内容右侧 --> <div class="maincontentRight"> <div class="sidelist"> <dl class="side-goods"> <dt> <i></i> <span>定制我的偏好</span> </dt> <dd> <a> <img src="images/side-goods1.jpg"> <div class="sideitem fl"> <h3>特价 丹诗戈品牌</h3> <div class="item-comment">近7天同城热销</div> <div class="item-sell-count">已售329件</div> </div> </a> </dd> <dd> <a> <img src="images/side-goods2.jpg"> <div class="sideitem fl"> <h3>特价 丹诗戈品牌</h3> <div class="item-comment">近7天同城热销</div> <div class="item-sell-count">已售329件</div> </div> </a> </dd> <dd> <a> <img src="images/side-goods3.jpg"> <div class="sideitem fl"> <h3>特价 丹诗戈品牌</h3> <div class="item-comment">近7天同城热销</div> <div class="item-sell-count">已售329件</div> </div> </a> </dd> <dd> <a> <img src="images/side-goods4.jpg"> <div class="sideitem fl"> <h3>特价 丹诗戈品牌</h3> <div class="item-comment">近7天同城热销</div> <div class="item-sell-count">已售329件</div> </div> </a> </dd> <dd> <a> <img src="images/side-goods5.jpg"> <div class="sideitem fl"> <h3>特价 丹诗戈品牌</h3> <div class="item-comment">近7天同城热销</div> <div class="item-sell-count">已售329件</div> </div> </a> </dd> <dd> <a> <img src="images/side-goods6.jpg"> <div class="sideitem fl"> <h3>特价 丹诗戈品牌</h3> <div class="item-comment">近7天同城热销</div> <div class="item-sell-count">已售329件</div> </div> </a> </dd> <dd> <a> <img src="images/side-goods7.jpg"> <div class="sideitem fl"> <h3>特价 丹诗戈品牌</h3> <div class="item-comment">近7天同城热销</div> <div class="item-sell-count">已售329件</div> </div> </a> </dd> <dd> <a> <img src="images/side-goods1.jpg"> <div class="sideitem fl"> <h3>特价 丹诗戈品牌</h3> <div class="item-comment">近7天同城热销</div> <div class="item-sell-count">已售329件</div> </div> </a> </dd> <dd> <a> <img src="images/side-goods1.jpg"> <div class="sideitem fl"> <h3>特价 丹诗戈品牌</h3> <div class="item-comment">近7天同城热销</div> <div class="item-sell-count">已售329件</div> </div> </a> </dd> <div class="sidewall"> <a><img src="images/sidewall1.jpg"></a> <a><img src="images/sidewall2.jpg"></a> <a><img src="images/sidewall3.jpg"></a> <a><img src="images/sidewall4.jpg"></a> <a><img src="images/sidewall5.jpg"></a> <a><img src="images/sidewall6.jpg"></a> <a><img src="images/sidewall7.jpg"></a> <a><img src="images/sidewall8.jpg"></a> <a><img src="images/sidewall9.jpg"></a> <a class="side-change"><i></i>换一批试试</a> </div> </dl> <dl class="side-shop"> <dt> <i></i> </dt> <dd class="side-shop-a"> <a> <img class="shoplogo" src="images/side-goods1.jpg"> <div class="shopname"> ANNA IT IS AMAZING</div> <div class="shopcontent">主营：服饰鞋包</div> </a> <div class="shopvalue"> <a href="#">阿拉蕾</a> <a href="#">皮卡丘</a> <a href="#">evelyn</a> </div> <div class="shopimg"> <a href="#"><img src ="images/shopimg1.jpg"></a> <a href="#"><img src ="images/shopimg2.jpg"></a> <a href="#"><img src ="images/shopimg3.jpg"></a> </div> </dd> <dd class="side-shop-a"> <a> <img class="shoplogo" src="images/side-goods1.jpg"> <div class="shopname"> ANNA IT IS AMAZING</div> <div class="shopcontent">主营：服饰鞋包</div> </a> <div class="shopvalue"> <a href="#">阿拉蕾</a> <a href="#">皮卡丘</a> <a href="#">evelyn</a> </div> <div class="shopimg"> <a href="#"><img src ="images/shopimg1.jpg"></a> <a href="#"><img src ="images/shopimg2.jpg"></a> <a href="#"><img src ="images/shopimg3.jpg"></a> </div> </dd> <dd class="side-shop-b"> <a> <img class="shoplogo" src="images/side-goods1.jpg"> <div class="shopname"> ANNA IT IS AMAZING</div> <div class="shopcontent">主营：服饰鞋包</div> </a> <div class="shopvalue"> <a href="#">阿拉蕾</a> <a href="#">皮卡丘</a> <a href="#">evelyn</a> </div> </dd> <dd class="side-shop-b"> <a> <img class="shoplogo" src="images/side-goods1.jpg"> <div class="shopname"> ANNA IT IS AMAZING</div> <div class="shopcontent">主营：服饰鞋包</div> </a> <div class="shopvalue"> <a href="#">阿拉蕾</a> <a href="#">皮卡丘</a> <a href="#">evelyn</a> </div> </dd> </dl> </div> <div class="sideimg"> <a href="#"><img src="images/sideimg.jpg"></a> </div> </div> </div> <!-- 星店全球购拍卖会天天特价淘女郎阿里旅行 --> <div class="channel"> <div class="channel-item"> <div class="channel-head"> <h3>星店</h3> <span>明星开店在这里</span> </div> <a class="channel-content"> <img src="images/channel-item1.jpg"> <div class="channel-word"> <h4>过年换新装 明星款促销</h4> <span>粉丝专享</span> </div> </a> <div class="channel-img"> <a><img src="images/channelitem2.jpg"><span>减肥酵素</span></a> <a><img src="images/channelitem3.jpg"><span>超人就要酷</span></a> </div> <ul class="channel-list"> <li><a>星护肤</a><a>明星年货</a><a>星同款</a></li> <li><a>0元星福利</a><a>人气明星店</a></li> </ul> </div> <div class="channel-item"> <div class="channel-head"> <h3>星店</h3> <span>明星开店在这里</span> </div> <a class="channel-content"> <img src="images/channel-item1.jpg"> <div class="channel-word"> <h4>过年换新装 明星款促销</h4> <span>粉丝专享</span> </div> </a> <div class="channel-img"> <a><img src="images/channelitem2.jpg"><span>减肥酵素</span></a> <a><img src="images/channelitem3.jpg"><span>超人就要酷</span></a> </div> <ul class="channel-list"> <li><a>星护肤</a><a>明星年货</a><a>星同款</a></li> <li><a>0元星福利</a><a>人气明星店</a></li> </ul> </div> <div class="channel-item"> <div class="channel-head"> <h3>星店</h3> <span>明星开店在这里</span> </div> <a class="channel-content"> <img src="images/channel-item1.jpg"> <div class="channel-word"> <h4>过年换新装 明星款促销</h4> <span>粉丝专享</span> </div> </a> <div class="channel-img"> <a><img src="images/channelitem2.jpg"><span>减肥酵素</span></a> <a><img src="images/channelitem3.jpg"><span>超人就要酷</span></a> </div> <ul class="channel-list"> <li><a>星护肤</a><a>明星年货</a><a>星同款</a></li> <li><a>0元星福利</a><a>人气明星店</a></li> </ul> </div> <div class="channel-item"> <div class="channel-head"> <h3>星店</h3> <span>明星开店在这里</span> </div> <a class="channel-content"> <img src="images/channel-item1.jpg"> <div class="channel-word"> <h4>过年换新装 明星款促销</h4> <span>粉丝专享</span> </div> </a> <div class="channel-img"> <a><img src="images/channelitem2.jpg"><span>减肥酵素</span></a> <a><img src="images/channelitem3.jpg"><span>超人就要酷</span></a> </div> <ul class="channel-list"> <li><a>星护肤</a><a>明星年货</a><a>星同款</a></li> <li><a>0元星福利</a><a>人气明星店</a></li> </ul> </div> <div class="channel-item"> <div class="channel-head"> <h3>星店</h3> <span>明星开店在这里</span> </div> <a class="channel-content"> <img src="images/channel-item1.jpg"> <div class="channel-word"> <h4>过年换新装 明星款促销</h4> <span>粉丝专享</span> </div> </a> <div class="channel-img"> <a><img src="images/channelitem2.jpg"><span>减肥酵素</span></a> <a><img src="images/channelitem3.jpg"><span>超人就要酷</span></a> </div> <ul class="channel-list"> <li><a>星护肤</a><a>明星年货</a><a>星同款</a></li> <li><a>0元星福利</a><a>人气明星店</a></li> </ul> </div> <div class="channel-item"> <div class="channel-head "> <h3>星店</h3> <span>明星开店在这里</span> </div> <a class="channel-content"> <img src="images/channel-item1.jpg"> <div class="channel-word"> <h4>过年换新装 明星款促销</h4> <span>粉丝专享</span> </div> </a> <div class="channel-img"> <a><img src="images/channelitem2.jpg"><span>减肥酵素</span></a> <a><img src="images/channelitem3.jpg"><span>超人就要酷</span></a> </div> <ul class="channel-list"> <li><a>星护肤</a><a>明星年货</a><a>星同款</a></li> <li><a>0元星福利</a><a>人气明星店</a></li> </ul> </div> </div> <!-- 爱逛街 --> <div class="channel-shop"> <h3>爱逛街</h3> <div class="shop-images fl"> <a><img src="images/shopimg.jpg"><span>复古清新衬衫领毛衣</span></a> <a><img src="images/shopimages2.jpg"><span>楚楚可怜！约会妆容</span></a> <a><img src="images/shopimages3.jpg"><span>高富帅的洗澡秘密！</span></a> <a><img src="images/shopimages4.jpg"><span>超有质感的毛毛短靴</span></a> <a><img src="images/shopimages5.jpg"><span>情人节甜蜜美搭</span></a> <a><img src="images/shopimages6.jpg"><span>创意礼物！超神奇</span></a> </div> <div class="channel-shopright fl"> <div class="shopright-head"> <h3>潮范儿十足！英伦风马丁靴</h3> <a class="shopright-more">更多 <i></i> </a> </div> <div class="shopright-content"> <div class="shopright-contentimg"> <img src="images/shopright-content.jpg"> <span>气质修身小西装</span> </div> <ul> <li>[宅家]超萌!软绵绵家居服</li> <li>[画眉]几秒搞定繁琐画眉</li> <li>[家品]Kitty猫可爱单品</li> <li>[妆容]日常约会闺蜜妆</li> <li>[配饰]森女系围巾帽子</li> </ul> </div> </div> </div> <!-- 汇吃 B格 二手 众筹 --> <div class="channel-B"> <div class="huichi"> <div class="channel-head"> <h3>星店</h3> <span>明星开店在这里</span> </div> <div class="chiimg"> <a><img src="images/chiimg1.jpg"><span>限量</span></a> <a><img src="images/chiimg2.jpg"><span>特价</span></a> </div> </div> <div class="huichi"> <div class="channel-head"> <h3>B格</h3> <span>明星开店在这里</span> </div> <div class="chiimg"> <a><img src="images/chiimg1.jpg"><span>限量</span></a> <a><img src="images/chiimg2.jpg"><span>特价</span></a> </div> </div> <div class="secondhand"> <div class="channel-head"> <h3>二手</h3> <span>明星开店在这里</span> </div> <div class="secondwall"> <a><img src="images/sidewall1.jpg"></a> <a><img src="images/sidewall2.jpg"></a> <a><img src="images/sidewall3.jpg"></a> <a><img src="images/sidewall4.jpg"></a> <a><img src="images/sidewall5.jpg"></a> <a><img src="images/sidewall6.jpg"></a> </div> <div class="seconditem"> <img src="images/seconditem.jpg"> <div class="seconditem-word"> <p><a>#最舍不得卖的东西#牛仔！边</a></p> <p><a>￥5201314</a></p> </div> </div> </div> <div class="zhongchou"> <div class="channel-head"> <h3>众筹</h3> <span>明星开店在这里</span> </div> <div class="zhongchou-wall"> <a><img src="images/zhongchou1.png"><p>便携干衣机！首发特优200个</p></a> <a class="zhongchou-wallone"><img src="images/zhongchou2.png"><p>77度智能水杯</p></a> <a><img src="images/zhongchou3.png"><p>1元起抢钻戒</p></a> </div> </div> </div> <!-- 热卖单品 --> <div class="hotgoods"> <div class="channel-head"> <h3>热卖单品</h3> <span><a>羊皮包</a><a>高压锅</a><a>油壶</a><a>贝壳包</a><a>蜂蜜瓶</a><a>密封罐</a><a>酵素桶</a><a>玻璃罐</a><a>置物架</a><a>切菜器</a><a>瓶子</a><a>油瓶</a><a>更多</a></span> </div> <ul class="hotgoods-wall"> <li class="hotgoods-walla"> <img src="images/hotgoods-wall1.jpg"> <div class="hotgoods-content"> <p class="hotgoods-a">￥298.80</p> <p class="hotgoods-b">月销84笔</p> <p class="hotgoods-c">多彩汇独家发售，高清数码印花设计！品质保证、大牌时尚！</p> </div> <div class="hotgoods-pingjia"> <span class="pingjia-a">评价 483</span> <span class="pingjia-b">收藏 11514</span> </div> </li> <div class="wall-hover"> <p>年终最后一波大促火爆抢购中错过后悔一年<p> <span>去购买</span> </div> <li class="hotgoods-wallb"> <div class="hotgoods-wallone"> <img src="images/hotgoods-wall2.jpg"> <div class="hotgoods-content"> <p class="hotgoods-a">￥298.80</p> <p class="hotgoods-b">月销84笔</p> </div> </div> <div class="hotgoods-wallone"> <img src="images/hotgoods-wall2.jpg"> <div class="hotgoods-content"> <p class="hotgoods-a">￥298.80</p> <p class="hotgoods-b">月销84笔</p> </div> </div> </li> <li class="hotgoods-wallb"> <div class="hotgoods-wallone"> <img src="images/hotgoods-wall2.jpg"> <div class="hotgoods-content"> <p class="hotgoods-a">￥298.80</p> <p class="hotgoods-b">月销84笔</p> </div> </div> <div class="hotgoods-wallone"> <img src="images/hotgoods-wall2.jpg"> <div class="hotgoods-content"> <p class="hotgoods-a">￥298.80</p> <p class="hotgoods-b">月销84笔</p> </div> </div> </li> <li class="hotgoods-walla"> <img src="images/hotgoods-wall1.jpg"> <div class="hotgoods-content"> <p class="hotgoods-a">￥298.80</p> <p class="hotgoods-b">月销84笔</p> <p class="hotgoods-c">多彩汇独家发售，高清数码印花设计！品质保证、大牌时尚！</p> </div> <div class="hotgoods-pingjia"> <span class="pingjia-a">评价 483</span> <span class="pingjia-b">收藏 11514</span> </div> </li> <li class="hotgoods-wallb"> <div class="hotgoods-wallone"> <img src="images/hotgoods-wall2.jpg"> <div class="hotgoods-content"> <p class="hotgoods-a">￥298.80</p> <p class="hotgoods-b">月销84笔</p> </div> </div> <div class="hotgoods-wallone"> <img src="images/hotgoods-wall2.jpg"> <div class="hotgoods-content"> <p class="hotgoods-a">￥298.80</p> <p class="hotgoods-b">月销84笔</p> </div> </div> </li> <li class="hotgoods-wallb"> <div class="hotgoods-wallone"> <img src="images/hotgoods-wall2.jpg"> <div class="hotgoods-content"> <p class="hotgoods-a">￥298.80</p> <p class="hotgoods-b">月销84笔</p> </div> </div> <div class="hotgoods-wallone"> <img src="images/hotgoods-wall2.jpg"> <div class="hotgoods-content"> <p class="hotgoods-a">￥298.80</p> <p class="hotgoods-b">月销84笔</p> </div> </div> </li> </ul> </div> <div class="nianhuo"> <a><img src="images/nianhuo1.jpg"></a> <a><img src="images/nianhuo2.jpg"></a> <a><img src="images/nianhuo3.jpg"></a> </div> <div class="help"> <div class="customer"> <h3><img src="images/customer.png">消费者保障</h3> <ul><li><a>保障范围</a></li><li><a>退货退款流程</a></li><li><a>服务中心</a></li><li><a>更多特色服务</a></li></ul> </div> <div class="customer"> <h3><img src="images/xinshou.png">新手上路</h3> <ul><li><a>保障范围</a></li><li><a>退货退款流程</a></li><li><a>服务中心</a></li><li><a>更多特色服务</a></li></ul> </div> <div class="customer"> <h3><img src="images/pay.png">付款方式</h3> <ul><li><a>保障范围</a></li><li><a>退货退款流程</a></li><li><a>服务中心</a></li><li><a>更多特色服务</a></li></ul> </div> <div class="customer"> <h3><img src="images/taobaotese.png">淘宝特色</h3> <ul><li><a>保障范围</a></li><li><a>退货退款流程</a></li><li><a>服务中心</a></li><li><a>更多特色服务</a></li></ul> </div> </div> </div> <!-- 底部内容 --> <div class="bottom"> <div class="bottomnav"> <p><a>阿里巴巴集团</a><a>淘宝网</a><a>天猫</a><a>聚划算</a><a>全球速卖通</a><a>阿里巴巴国际交易市场</a><a>1688</a><a>阿里妈妈</a><a>阿里旅行.去啊</a><a>阿里云计算</a><a>YunOS</a><a>阿里通信</a><a>高德</a><a>万网</a><a>优视</a><a>友盟</a></p> <p><a>酷盘</a><a>虾米</a><a>天天动听</a><a>来往</a><a>钉钉</a><a>11 Main</a><a>支付宝</a></p> </div> <div class="link"> <p class="guanyu"><a>关于淘宝</a><a>合作伙伴</a><a>营销中心</a><a>廉政举报</a><a>联系客服</a><a>开放平台</a><a>诚征英才</a><a>联系我们</a><a>网站地图</a><a>法律声明</a><span>© 2003-2015 Taobao.com 版权所有</span></p> <p class="xuke"> <span>网络文化经营许可证：<a>文网文[2010]040号</a></span> <span>增值电信业务经营许可证：<a>浙B2-20080224-1</a></span> <span>增值电信业务经营许可证：1109364号</span> <span>互联网违法和不良信息举报电话：0571-81683755 blxx@list.alibaba-inc.com</span> </p> <p class="linkimg"> <a class="linkimg-a"><img src="images/bottom1.gif"></a> <a class="linkimg-b"></a> <a class="linkimg-c"></a> <a class="linkimg-d"></a> <a class="linkimg-e"></a> <a class="linkimg-f"></a> <a class="linkimg-g"></a> </p> </div> </div> </body> </html>
css 代码
/* html {overflow:-moz-scrollbars-vertical;} */ html{overflow:scroll;} *{ margin:0; padding:0; } ul ,li ,a,input,img,p,h3{ margin:0; padding:0; } body{ color:#000; overflow:hidden; font-size:12px/1.5; } input,img{ border:none; margin:0; } a{ text-decoration:none; font-size:10px; color:#333; } li{ list-style:none; } a:hover{ color:#ff4400; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .fl{ float:left; } .fr{ flaot:right; } /* 顶部样式 */ .topbg{ background:#eee; width:100%; height:35px; line-height:35px; } .top{ position:relative; width:1190px; margin:0 auto; } .topleft{ float:left; } .topleft li,.topright li{ float:left; height:35px; line-height:35px; padding-right:10px; } .topleft li a{ color:#6c6c6c; } .topleft li a:hover,.topright li a:hover{ color:#ff5011; } .topright{ float:right; } /* 鼠标移开隐藏 */ .webnav{ display:none; } .weblist{ } /* 鼠标出现显示 */ .topright li:hover .webnav{ display:block; position:absolute; top:35px; right:0; } .webnav{ background:#fff; width:1188px; height:275px; border:1px solid #eee; } .zhuti{ float:left; } .zhuti,.tese,.currentHot,.more{ width:256px; font-size:12px; height:235px; border-right:1px solid #eee; margin:20px; } .zhuti h3,.tese h3{ color:#ff5011; font-weight:bold; } .zhuti ul li,.tese ul li,.currentHot ul li,.more ul li{ width:65px; color:#3c3c3c; } .tese{ float:left; } .currentHot{ float:left; } .more{ float:left; border-right:none; } /* 正文部分 */ /* 搜索部分 */ .main{ margin:0 auto; width:1190px; /* height:3906px; */ height:4906px; } .navbar{ height:657px; } .search{ margin-top:30px; } .logo{ float:left; } /* 搜索部分 */ .searchBox{ float:left; width:768px; height:65px; /* margin-top:30px; */ margin-left:45px; } .searchnav ul li{ float:left; height:25px; line-height:25px; width:50px; text-align:center; } .goods-search{ background:#ff4400; } .searchnav ul li a{ font-size:14px; color:#fff; } .searchtext{ float:left; border:2px solid #ff5011; height:36px; width:616px; } .button{ float:left; font-size:20px; color:#fff; font-weight:bold; height:40px; width:100px; line-height:40px; text-align:center; background:#ff4400; } /* 高级搜索 */ .searchmain span{ float:left; display:inline-block; font-size:12px; height:40px; width:25px; padding-top:5px; margin-left:15px; /* line-height:40px; */ /* overflow:hidden; */ } /* 搜索框下面的热点文字 */ .searchhot{ height:18px; width:768px; } .searchhot a{ height:18px; display:inline-block; padding-top:5px; } .searchhot-more{ border:1px solid #ddd; background:#fff; font-size:12px; margin-top:5px; height:20px; width:40px; position:relative; text-align:center; } .searchhot-more:hover{ background:#ff4400; color:#fff; border:none; } .searchhot-more i{ position:absolute; top:9px; right:4px; width: 0; height: 0; border-bottom: 3px solid transparent; /* 下边框的高 */ border-top: 3px solid transparent; /* 上方边框的高 */ border-left: 3px solid #000; /* 左边框的长度|宽度，以及背景色 */ font-size: 0; line-height: 0; } /* 二维码 */ .searchWeixin{ float:right; height:112px; width:96px; border:1px solid #ddd; text-align:center; } .searchWeixin span{ color:#ff4400; } .searchWeixin img{ height:80px; width:80px; } /*左边导航开始*/ .mainnav{ /* margin-top:34px; */ } .nav{ margin-top:34px; /* border:1px solid #FF4400; */ width:190px; height:510px; float:left; background:url(../images/navbg.png) no-repeat; /* 确保图片路径是对的，否则加载失败 */ } .navlist{ margin-top:40px; } .topnav{ height:35px; line-height:35px; /* background:#FF4400; */ color:white; padding-left:15px; font-weight:bold; } .nav-theme{ background:url(images/weixin.png); } .nav dl { margin:0; margin-bottom:10px; /* border-bottom:1px solid #F0F0F0; */ padding:0; } .nav dl dt{ display:block; font-weight:bold; padding-left:45px; font-size:14px; } .navlist-a{ padding-top:35px; height:25px; line-height:25px; } .navlist-b{ height:25px; line-height:25px; padding-top:10px; } .navlist-c{ height:25px; line-height:25px; padding-top:10px; } .nav dl dt a{ display:inline-block; background:#fff; width:38px; height:18px; line-height:18px; text-align:center; font-size:12px; margin-left:35px; /* border:1px solid #F0F0F0; */ text-decoration:none; color:#000; } .nav dl dt a:hover{ background:#FF4401; width:38px; height:18px; line-height:18px; text-align:center; font-size:12px; margin-left:35px; border:1px solid #F0F0F0; } .nav dl dd{ height:20px; line-height:20px; display:inline-block; /* margin:0; */ /* padding-top:5px; */ /* padding-bottom:5px; */ padding-left:15px; overflow:hidden: } .nav dl dd a{ font-size:12px; color:#000; text-decoration:none; } .nav dl dd a:hover{ font-size:12px; color:#FF4401; text-decoration:none; } .navbottom{ text-align:center; } /* 左边导航结束 */ /* 右边导航开始 */ .navright{ float:left; /* margin-top:20px; */ margin-left:10px; margin-top:20px; } .taobaonav{ border-bottom:2px solid #FF4400; width:990px; height:33px; } .taobaonav ul li{ float:left; } .nav-a{ display:inline; font-size:16px; color:#ff4400; font-weight:bold; height:33px; width:234px; } .nav-a li{ width:52px; line-height:33px; padding:0 10px; } .nav-b{ display:inline; font-size:14px; color:#333; font-weight:bold; height:23px; line-height:33px; width:600px; } .nav-b li{ width:65px; line-height:33px; padding:0 10px; } .nav-c{ display:inline; width:170px; height:33px; line-height:33px; } .nav-c li{ font-size:12px; color:#333; font-weight:bold; } .nav-c-right{ padding-left:30px; } /* 导航栏下面图片部分 */ .navimg{ margin-top:10px; } .navimgLeft{ height:480px; width:520px; float:left; } /* 左上图片 */ .navimgLeftone{ height:280px; width:520px; overflow:hidden; position:relative; } .button1{ position:absolute; height:5px; width:100%; left:50%; bottom:20px; } .button1 a{ display:inline-block; height:5px; width:20px; background:#fff; } /* 左下图片 */ .navimgLefttwo{ height:200px; width:520px; overflow:hidden; } .navimgLefttwobox img{ float:left; } .navimgLefttwobox-b img{ margin:10px 20px; } /* 右上图片 */ .navimgRight{ height:480px; width:170px; float:left; } .navimgRightone{ height:280px; width:170px; } /* 右下图片 */ .navimgRighttwo{ height:200px; width:170px; } /* notice部分 */ .notice{ margin-left:10px; height:478px; width:288px; border:1px solid #d6d6d6; float:left; } .noticeoneNav{ background:#F7F7F7; height:25px; border-bottom:1px solid #d6d6d6; } .noticeoneNav li{ float:left; height:25px; line-height:25px; width:40px; padding-left:15px; } .noticeoneNews{ height:69px; border-bottom:1px solid #d6d6d6; } .noticeoneNews li{ float:left; width:128px; height:24px; line-height:24px; padding:5px ; } .noticetwo{ background:url(../images/meber.png) no-repeat; background-position:right top; height:120px; width:288px; border-bottom:1px solid #d6d6d6; } .noticetwoHi{ padding-top:5px; padding-left:10px; width:288px; height:70px; } .noticetwoHi img{ float:left; width:60px; height:60px; background:url(../images/sprite.png) no-repeat; background-position: -150px -80px; } .noticetwo-a{ float:left; padding-top:10px; padding-left:10px; } .noticetwo-b{ display:inline-block; border:1px solid #ff4400; width:98px; height:30px; line-height:30px; text-align:center; position:relative; padding-left:10px; margin-top:5px; background:#FFF0E8; } .noticetwo-b i{ display:block; background:url(../images/sprite.png) no-repeat; background-position: -150px -290px; height:18px; width:18px; position:absolute; left:5px; top:5px; } .noticetwo-c{ display:inline-block; border:1px solid #ff4400; width:76px; text-align:center; height:30px; line-height:30px; margin-top:5px; background:#FFF0E8; } .noticetwoLogin{ margin-left:10px; margin-top:5px; } .noticetwoLogin a:hover{ color:#fff; background:#f22d00; } .noticetwoLogin-a{ float:left; height:35px; line-height:35px; width:100px; text-align:center; background:#ff4400; border-radius:2px; margin-right:5px; color:#fff; } .noticetwoLogin-a i{ font-family: tb-fp-iconfont; } .noticetwoLogin-b{ float:left; height:35px; line-height:35px; width:78px; text-align:center; background:#ff4400; border-radius:2px; margin-right:5px; color:#fff; } .noticetwoLogin-c{ float:left; height:35px; line-height:35px; width:75px; text-align:center; background:#ff4400; border-radius:2px; color:#fff; } /* 便民服务 */ .noticethree{ background:#F4F4F4; height:250px; width:278px; padding-top:10px; padding-left:10px; } .noticethree h3{ font-size:14px; font-weight:bold; color:#2B2B2B; } .noticethree a{ display:inline; float:left; width:56px; height:63px; text-align:center; border:1px solid #d6d6d6; position:relative; margin-right:10px; background:#fff; margin-top:10px; } .noticethree img{ padding-top:10px; } .huafei{ height:22px; width:16px; } .noticethree p{ } .noticethree span{ position:absolute; bottom:5px; right:26px; width: 0; height:0; border-color:rgba(255,255,255,0); border-style:solid; border-bottom-color: #9c9c9c; } /* 中部导航栏 */ .middlenav{ background:#FFE294; height:65px; /* width:1190px; */ margin-top:15px; } .presentHot{ padding-left:15px; padding-top:15px; width:250px; float:left; } .presentHot-a{ border-right:1px solid #ebba35; width:40px; height:40px; float:left; position:relative; } .presentHot h3{ width:30px; font-size:14px; height:20px; line-height:20px; } .presentHot-a i{ position:absolute; top:14px; left:41px; width: 0; height: 0; border-color:rgba(255,255,255,0); border-style:solid; border-width:6px 0 6px 6px; border-left-color:#ebba35; } .presentHot ul{ float:left; margin-left:15px; } .presentHot-c{ padding-left:15px; padding-top:15px; width:165px; float:left; } .presentHot-c h3{ width:30px; font-size:14px; height:20px; line-height:20px; } .presentHot-d{ float:left; margin-left:15px; } .middlenavImgone{ float:left; } .middlenavImgtwo{ float:left; position:relative; width:300px; height:42px; margin-bottom:23px; } ..middlenavImgtwo img{ display:inlie-block; vertical-align: bottom; position:absolute; top:-16px; left:0; } /* 主要内容部分 */ .maincontent{ width:100%; height:2504px; margin-top:10px; } /* 主要内容部分-左侧开始 */ .maincontentLeft{ width:890px; height:2504px; float:left; margin-right:10px; } /* 女装男装-鞋靴箱包-运动户外-珠宝配饰 */ .cloth,.shoes{ width:435px; height:270px; border:1px solid #d6d6d6; float:left; margin-bottom:20px; } .cloth,.sports{ margin-right:10px; } .clothhead{ background:#f5619c; height:25px; padding-left:15px; } .clothhead h4{ float:left; line-height:25px; padding-right:20px; } .clothhead span{ float:left; height:18px; line-height:18px; width:115px; display:inline-block; background:#fddfeb; margin:3px 0; font-size:12px; padding-left:5px; } .clothhead ul{ float:right; margin-right:15px; color:#fff; } .clothhead ul a{ margin:0 5px; } .clothhead-a{ border-right:1px solid #ededed; padding-right:5px; } .clothlist{ } .clothlistLeft{ width:310px; margin-top:3px; } .clothlistLeft-a,.clothlistLeft-b{ border-bottom:1px solid #ededed; padding-left:15px; } .clothlistLeft dt,.clothlistLeft dd{ display:inline-block; height:30px; line-height:30px; font-size:14px; } .clothlistLeft dt{ font-weight:bold; } .clothlistLeft dd a{ padding:0 5px; } .clothlistLeft-c{ padding-left:15px; } .clothlistRight{ width:100px; height:245px; margin-left:25px; } .sports,.jewel{ width:435px; height:233px; border:1px solid #d6d6d6; float:left; margin-bottom:20px; } .sportslistleft-a{ padding-bottom:10px; padding-top:10px; } /* .sportslistleft-c dt,.sportslistleft-c dd{ height:48px; line-height:48px; } */ .sportslistRight { margin-top:10px; width:100px; height:245px; margin-left:25px; } .sportslistRight a{ display:inline-block; height:90px; width:90px; position:relative; margin-bottom:5px; } .sportslistRight a span{ position:absolute; background-color: #f5f5f5; width: 100%; height: 18px; line-height: 18px; text-align: center; bottom: 0; left: 0; } .sportsone{ background:url(../images/sportsone.jpg) center center no-repeat; } .sportstwo{ background:url(../images/sportstwo.png) center center no-repeat; } .maincontentImgone{ margin-bottom:20px; } /* 汇吃美食 百货市场 */ .food ,.shoppingmall{ height:310px; width:433px; border:1px solid #d6d6d6; float:left; margin-bottom:20px; } .food{ margin-right:10px; } .foodimg img{ float:left; } .foodlist dl{ /* float:left; */ width:200px; font-size:12px; } .foodlist dl ,.foodlist dt ,.foodlist dd,.shoppingmall-listleft dt,.shoppingmall-listleft dd{ display:inline-block; } .shoppingmall-listleft{ margin-top:10px; } .shoppingmall-listleft dt,.shoppingmall-listleft dd{ height:25px; line-height:25px; } .foodlist dt,.shoppingmall-listleft dt{ font-weight:bold; padding-left:15px; font-size:12px; } .foodlist dd a,.shoppingmall-listleft dd a{ padding:0 5px; } .shoppingmall-list{ height:219px; border-bottom:1px solid #d6d6d6; } .shoppingmall-img img{ padding-top:7px; padding-left:7px; } .shoppingmall-listright { margin-top:10px; width:200px; height:209x; margin-left:25px; } .shoppingmall-listright a{ display:block; float:left; height:90px; width:90px; position:relative; margin-bottom:5px; margin:5px; } .shoppingmall-listright a span{ position:absolute; background-color: #f5f5f5; height: 18px; line-height: 18px; text-align: center; bottom: 0; left: 0; } .shoppingmall-listrightone{ background:url(../images/shoppingmall-listrightone.jpg) no-repeat; } .shoppingmall-listrighttwo{ background:url(../images/shoppingmall-listrighttwo.jpg) no-repeat; } .shoppingmall-listrightthree{ background:url(../images/shoppingmall-listrightthree.jpeg) no-repeat; } .shoppingmall-listrightfour{ background:url(../images/shoppingmall-listrightfour.jpg) no-repeat; } /* 主要内容部分-左侧结束 */ /* 主要内容部分-右侧开始 */ .maincontentRight{ border:1px solid #ededed; width:286px; height:2502px; float:left; } .sidelist{ height:2242px; background:#f5f5f5; border:1px solid #ededed; } .side-goods{ margin:20px 15px 0; } .side-goods dt{ display:inline-block; width:100%; } .side-goods dt i{ width:120px; height:18px; float:left; background:url(../images/sprite.png) no-repeat; background-position: -250px -125px; margin-bottom:10px; } .side-goods dt span{ float:right; font-size:12px; border:1px solid #ff4400; background:#fff; padding:3px; } .side-goods dd{ background:#fff; height:100px; display:block; padding:20px; border-bottom:1px solid #ededed; } .side-goods dd img{ float:left; width:100px; height:100px; } .sideitem{ margin-left:10px; } .item-comment{ color:#737373; margin-bottom:10px; } .sideimg{ margin-top:10px; margin-left:-14px; } .sidewall{ background:#fff; padding:20px; height:247px; } .sidewall a{ float:left; } .sidewall img{ padding-bottom:2px; width:70px; height:70px; } .side-change{ width:100%; padding-right:25px; margin-top:10px; padding:8px 0; } .side-change i{ display:inlie-block; background:url(../images/sprite.png) no-repeat; background-position: -100px -380px; margin-left:70px; padding-left:15px; width:15px; height:17px; padding-bottom:5px; vertical-align:middle; } .side-shop{ margin:20px 15px 0; } .side-shop dt{ display:inline-block; width:100%; } .side-shop dt i{ display:block; width:120px; height:18px; background:url(../images/sprite.png) no-repeat; background-position: -250px -100px; margin-bottom:10px; } .side-shop-a{ height:139px; } .side-shop-b{ height:59px; } .side-shop dd{ background:#fff; display:block; padding:20px; border-bottom:1px solid #ededed; } .shoplogo{ float:left; height:40px; width:40px; border-radius:40px; } .shopname,.shopcontent{ height:20px; line-height:20px; margin-left:55px; } .shopimg{ margin-top:10px; } .shopimg img{ float:left; width:70px; height:70px; margin-right:1px; } /* 星店全球购拍卖会天天特价淘女郎阿里旅行 */ .channel{ margin-top:20px; height:365px; width:100%; } .channel-item{ float:left; border:1px solid #e8e8e8; height:333px; width:167px; padding:15px; margin-left:-1px; } .channel-head{ height:20px; line-height:20px; padding-bottom:10px; } .channel-head h3{ float:left; } .channel-head span{ float:right; color:#999999; font-size:12px; } .channel-content{ display:block; height:148px; width:169px; background:#f5f5f5; text-align:center; } .channel-word h4,.channel-word h4{ height:24px; line-height:24px; } .channel-img{ margin-top:10px; width:165px; text-align:center; } .channel-img a{ display:inline-block; width:70px; height:90px; } .channel-img a img{ width:70px; height:70px; } .channel-list{ margin-top:10px; } .channel-list li{ height:30px; line-height:30px; text-align:center; } .channel-list li a{ border-right:1px solid #ededed; padding:0 5px; } .channel-list li a:nth-child(n+3){ border-right:none; } /* 爱逛街 */ .channel-shop{ height:235px; width:100%; margin-top:20px; } .shop-images { margin-top:15px; } .shop-images h3 { margin-top:15px; } .shop-images a{ position:relative; } .shop-images a img{ height:165px; width:135px; display:inline-block; /* background:url(../images/shopimg.jpg) no-repeat; */ } .shop-images a span{ position:absolute; bottom:10px; left:10px; display:inline-block; height:25px; line-height:25px; text-align:center; width:115px; background:#fff; } .channel-shopright{ width:318px; margin-left:10px; margin-top:15px; } .shopright-head{ height:20px; width:318px; line-height:20px; padding-bottom:10px; border-bottom:1px solid #ededed; } .shopright-head h3{ float:left; font-size:14px; } .shopright-head a{ /* float:left; */ display:inline-block; height:20px; line-height:20px; font-size:12px; } .shopright-more{ float:right; display:inline-block; border:1px solid #ddd; background:#fff; font-size:12px; /* margin-top:5px; */ /* height:18px; */ /* line-height:18px; */ width:38px; position:relative; text-align:center; } .shopright-more:hover{ background:#ff4400; color:#fff; border:none; } .shopright-more i{ position:absolute; top:8px; right:3px; width: 0; height: 0; border-bottom: 3px solid transparent; /* 下边框的高 */ border-top: 3px solid transparent; /* 上方边框的高 */ border-left: 3px solid #000; /* 左边框的长度|宽度，以及背景色 */ font-size: 0; line-height: 0; } .shopright-content{ margin-top:10px; } .shopright-contentimg{ float:left; text-align:center; } .shopright-contentimg img{ display:block; } .shopright-contentimg span{ font-size:12px; font-weight:bold; } .shopright-content ul{ float:left; margin-left:20px; font-size:12px; } .shopright-content ul li{ height:25px; line-height:25px; } /* 汇吃 */ .channel-B{ height:265px; } .huichi{ width:373px; height:233px; border:1px solid #e8e8e8; margin-left:-1px; padding:20px 10px 10px; float:left; } .chiimg a{ position:relative; float:left; height:195px; width:185px; } .chiimg img{ display: inline-block; /* float:left; */ height:195px; width:185px; } .chiimg a span{ position:absolute; top:0; right:0; width:30px; height:24px; line-height:24px; color:#fff; text-align:center; background:#FF4400; } /* 二手 */ .secondhand,.zhongchou{ width:177px; height:233px; border:1px solid #e8e8e8; margin-left:-1px; padding:20px 10px 10px; float:left; } .secondhand:hover{ border:1px solid #ff4400; } .secondwall{ height:114px; } .secondwall a{ float:left; padding-right:2px; } .secondwall img{ height:55px; width:55px; } .seconditem { margin-top:10px; } .seconditem img{ float:left; height:66px; width:66px; padding-right:10px; } .seconditem-word{ margin-left:10px; } /* 众筹 */ .zhongchou-wall a{ float:left; text-align:center; } .zhongchou-wallone{ margin-right:10px; } .zhongchou-wall p{ height:30px; line-height:30px; } /* 热卖单品 */ .hotgoods{ margin-top:20px; height:450px; } .channel-head span a{ padding:0 10px; border-right:1px solid #e8e8e8; } .channel-head span a:last-child{ border:none; } .hotgoods-wall{ } .hotgoods-walla{ height:403px; width:218px; padding:15px 15px 0 15px; border:1px solid #e8e8e8; margin-left:-1px; position:relative; } .hotgoods-walla img{ height:220px; width:220px; } .hotgoods-wallb img{ height:150px; width:150px; } .hotgoods-wall a { height:220px; width:220px; } .hotgoods-content{ margin-top:10px; } .hotgoods-a{ height:20px; line-height:20px; color:#ff4400; font-weight:bold; font-size:16px; } .hotgoods-b{ height:15px; line-height:15px; color:#999999; font-size:12px; } .hotgoods-c{ height:105px; margin-top:10px; font-size:12px; } .hotgoods-pingjia{ height:15px; width:226px; line-height:15px; color:#999999; } .hotgoods-pingjia span{ display:inline-block; font-size:12px; } .pingjia-a{ float:left; } .pingjia-b{ float:right; } .hotgoods-wall li{ float:left; } .hotgoods-wallb{ width:172px; height:420px; } .hotgoods-wallone{ border:1px solid #e8e8e8; height:198px; /* margin-bottom:-1px; */ margin-left:-1px; padding:10px 10px 0 10px; } .hotgoods-wallone img{ } .hotgoods-wallone .hotgoods-content{ margin-top:5px; } .hotgoods-wallone .hotgoods-content p{ font-size:12px; } /* 热卖单品鼠标滑过 */ .wall-hover{ display:none; } .hotgoods-walla:hover .wall-hover{ display:blcok; background:#ff4400; height:420px; width:220px; position:absolute; top:0; left:0; } /* 年货图片 */ .nianhuo{ margin-top:15px; } .nianhuo a{ padding:0 10px; } /* 帮助 */ .help{ margin-top:15px; padding:30px 0; border-top:1px solid #e8e8e8; border-bottom:2px solid #ff4400; height:90px; } .customer{ border-right:1px solid #e8e8e8; width:246px; height:90px; padding:0 25px; float:left; } .customer:last-child{ border-right:none; } .customer h3{ height:48px; line-height:48px } .customer h3 img{ height:32px; width:32px; vertical-align:middle; margin-right:10px; } .customer ul li{ height:21px; line-height:21px; padding-right:10px; float:left; } .customer ul li a{ color:#9c9c9c; } /* 底部 */ .bottom{ margin:0 auto; width:1190px; } .bottomnav{ border-bottom:1px solid #e8e8e8; padding-bottom:15px; } .bottomnav p{ height:25px; line-height:25px; } .bottomnav a{ border-right:1px solid #e8e8e8; padding:0 10px; } .bottomnav a:last-child{ border:none; } .guanyu, .linkimg{ margin-left:10px; } .guanyu,.xuke{ height:25px; line-height:25px; font-size:12px; } .guanyu a{ padding-right:10px; } .guanyu span{ margin-left:25px; color:#999999; } .xuke span{ border-right:1px solid #e8e8e8; padding:0 10px; color:#999999; } .xuke span:last-child{ border-right:none; } .linkimg a{ height:40px; float:left; margin-right:15px; } .linkimg-b{ width:30px; background:url(../images/bottom.png) no-repeat; background-position:0 -140px; } .linkimg-c{ width:33px; background:url(../images/bottom.png) no-repeat; background-position:-40px -140px; } .linkimg-d{ width:50px; background:url(../images/bottom.png) no-repeat; background-position:-80px -140px; } .linkimg-e{ width:80px; background:url(../images/bottom.png) no-repeat; background-position:-140px -140px; } .linkimg-f{ width:95px; background:url(../images/bottom.png) no-repeat; background-position:-240px -140px; } .linkimg-g{ width:90px; background:url(../images/bottom.png) no-repeat; background-position:-345px -140px; }
