主页
.lg {
width: 100%;
border: 1px solid;
}
.le {
background: linear-gradient(to top, #d1d1d1, #f4f4f4, #f5f5f5);
float: right;
width: 1850px;
height: 40px;
line-height: 40px;
border: 1px solid white;
}
.lh {
list-style: none;
float: right;
margin: 5px;
}
a:hover {
color: coral;
}
a {
text-decoration: none;
color: black;
}
.lol {
margin-bottom: 100px;
width: 1500px;
height: 150px;
border: 1px solid;
position: relative;
left: 80px;
top: 60px;
}
.skk {
border: 1px solid wheat;
width: 150px;
height: 50px;
float: right;
background: #f6f6f6;
line-height: 60px;
font-size: 20px;
text-align: center;
position: relative;
left: -60px;
top: -120px;
}
.we {
position: relative;
left: 400px;
top: -60px;
line-height: 20px;
}
.we a:hover {
color: coral;
}
.rng {
width: 1500px;
height: 2650px;
margin: 0 auto;
}
.ob {
border: 1px solid orangered;
width: 270px;
height: 350px;
line-height: 35px;
background: #b01d1d;
color: white;
}
.id:hover {
transform: translate(20px, 0);
}
.ob li {
list-style: none;
}
.ob a {
color: white;
}
.fa span {
color: red;
}
.fa {
color: black;
font-size: 25px;
position: relative;
left: 280px;
top: -390px;
border-style: none none solid none;
width: 1220px;
height: 40px;
border-bottom-color: red;
display: block;
}
.lo {
margin-right: 30px;
font-family: “微软雅黑”;
}
a:hover {
color: red;
}
.tt {
position: relative;
left: 280px;
top: -390px;
}
.lck {
width: 25px;
height: 25px;
border-radius: 50%;
background: darkgray;
text-align: center;
line-height: 25px;
position: relative;
left: 590px;
top: -420px;
}
.lck a {
color: white;
}
.ui {
width: 25px;
height: 25px;
border-radius: 50%;
background: darkgray;
text-align: center;
line-height: 25px;
position: relative;
left: 630px;
top: -445px;
}
.ui a {
color: white;
}
.pp {
width: 25px;
height: 25px;
border-radius: 50%;
background: darkgray;
text-align: center;
line-height: 25px;
position: relative;
left: 670px;
top: -470px;
}
.pp a {
color: white;
}
.fw {
border: 1px solid;
width: 300px;
height: 350px;
float: right;
margin-top: -820px;
}
.ogg {
border: 1px dashed darkgray;
border-style: none none dashed none;
width: 300px;
height: 50px;
}
.qw {
line-height: 25px;
margin: 15px;
}
.qw li {
list-style: none;
}
.qw span {
font-family: “微软雅黑”;
font-size: 14px;
}
.er {
border: 1px dashed darkgray;
border-style: solid none dashed none;
width: 300px;
height: 30px;
margin-top: -10px;
}
.ad{
text-align: center;
}
.am{
border: 1px solid #D8EEFC;
width: 270px;
height: 310px;
position: relative;
left: 0;
top: -460px;
background: #d8eefc;
text-align: center;
}
.am img:hover{
transform: scale(1.1);
transition: all 0.8s;
}
.uzi img:hover{
transform: scale(1.1);
transition: all 0.8s;
}
.og img:hover{
transform: scale(1.1);
transition: all 0.8s;
}
.ll img:hover{
transform: scale(1.1);
transition: all 0.8s;
}
.ul img:hover{
transform: scale(1.1);
transition: all 0.8s;
}
.ak{
border: 1px solid red;
width: 52px;
height: 20px;
background: red;
color: white;
position: relative;
left: 80px;
top: 30px;
}
.ak span{
color: red;
}
.uzi{
border: 1px solid #eaeaea;
width: 300px;
height: 310px;
position: relative;
left: 290px;
top: -770px;
}
.og{
border: 1px solid #eaeaea;
width: 300px;
height: 310px;
position: relative;
left: 590px;
top: -1082px;
}
.ll{
border: 1px solid #eaeaea;
width: 300px;
height: 310px;
position: relative;
left: 890px;
top: -1394px;
}
.ul{
border: 1px solid #eaeaea;
width: 310px;
height: 310px;
position: relative;
left: 1190px;
top: -1705px;
}
.oii span{
font-family: “微软雅黑”;
font-size: 20px;
}
.ie a{
color: darkgray;
}
.oq a:hover{
color: black;
text-decoration: underline;
}
.ie a:hover{
color: darkgray;
text-decoration: underline;
}
.cc{
color: red;
font-size:24px ;
position: relative;
left: 50px;
top: 40px;
}
.cc span{
color: darkgray;
}
.oq{
position: relative;
left: 100px;
top: 30px;
}
.ie{
position: relative;
left: 20px;
top: 30px;
font-size: 10px;
}
.io li{
list-style: none;
float: right;
display: inline-block;
margin: 10px;
}
.io {
position:relative;
left: 0px;
top: -30px;
}
.lu{
height: 460px;
position: relative;
left: 0px;
top: 5px;
}
.op{
border: 1px solid #a6e5be;
width: 210px;
height: 150px;
margin-top: -5px;
background: mediumaquamarine;
}
.ig{
border: 2px dashed darkgray;
height: 30px;
border-style: none none dashed none;
text-align: center;
}
.ig li{
list-style: none;
display: inline-block;
margin: 5px;
}
.ao{
border: 2px dashed darkgray;
height: 30px;
border-style: none none dashed none;
text-align: center;
}
.ao li{
list-style: none;
display: inline-block;
margin: 5px;
}
.wer{
border: 2px dashed darkgray;
height: 30px;
border-style: none none dashed none;
text-align: center;
}
.wer li{
list-style: none;
display: inline-block;
margin: 5px;
}
.wy{
border: 2px dashed darkgray;
height: 30px;
border-style: none none dashed none;
text-align: center;
}
.wy li{
list-style: none;
display: inline-block;
margin: 5px;
}
.or{
border: 1px solid darkgray;
border-style: none solid solid none;
width: 290px;
height: 230px;
margin-left: -38px;
margin-top: -15px;
position: relative;
left: 250px;
top: -420px;
}
.lb{
border: 1px solid darkgray;
border-style: none solid solid none;
width: 290px;
height: 231px;
margin-left: -57px;
margin-top: -17px;
position: relative;
left: 560px;
top: -635px;
}
.lk{
border: 1px solid darkgray;
border-style: none none solid none;
width: 290px;
height: 231px;
margin-left: -66px;
margin-top: -17px;
position: relative;
left: 860px;
top: -850px;
}
.lj{
position: relative;
left: 1077px;
top: -1083px;
}
.lw{
border: 1px solid darkgray;
border-style: none solid none none;
width: 290px;
height: 230px;
margin-left: -38px;
margin-top: -15px;
position: relative;
left: 250px;
top: -1075px;
}
.ls{
border: 1px solid darkgray;
border-style: none solid none none;
width: 290px;
height: 230px;
margin-left: -38px;
margin-top: -15px;
position: relative;
left: 541px;
top: -1290px;
}
.jh{
border: 1px solid darkgray;
border-style: none none none none;
width: 290px;
height: 230px;
margin-left: -38px;
margin-top: -15px;
position: relative;
left: 825px;
top: -1500px;
}
.kj{
position: relative;
left: 1077px;
top: -1732px;
}
.or img:hover{
transform: scale(1.1);
transition: all 0.8s;
}
.lb img:hover{
transform: scale(1.1);
transition: all 0.8s;
}
.lk img:hover{
transform: scale(1.1);
transition: all 0.8s;
}
.lw img:hover{
transform: scale(1.1);
transition: all 0.8s;
}
.ls img:hover{
transform: scale(1.1);
transition: all 0.8s;
}
.jh img:hover{
transform: scale(1.1);
transition: all 0.8s;
}
.li{
border:2px solid red ;
border-style: none none solid none;
width: 1500px;
height: 40px;
position: absolute;
left: 155px;
top: 1700px;
}
.fl{
border: 2px solid red;
border-style: none none solid none;
width: 1500px;
height: 40px;
position: absolute;
left: 155px;
top: 1180px;
}
.lv{
border: 2px solid red;
border-style: none none solid none;
width: 1500px;
height: 40px;
position: absolute;
left: 155px;
top: 2360px;
}
.lop{
height: 440px;
position: relative;
left: 0px;
top: 5px;
}
.hg{
widows: 20px;
height: 200px;
margin-top: 30px;
}
.hg img:hover{
transform: rotate(360deg) scale(1.2);
transition: all 3s;
}
.jo{
border: 0.8px solid darkgray;
border-style: none none solid none;
width:1400px ;
height: 200px;
margin-top: -10px;
margin-left: 200px;
}
.ho span:hover{
text-decoration: underline;
color: black;
}
.ho li{
list-style: none;
}
.lm a:hover{
color: red;
}
.lm a{
color: darkgray;
line-height: 30px;
}
-->
<div class="lol">
<div><a href="#"><img src="img/loginlogo.jpg" /></a></div>
<div class="we"><input type="search" name="sousou" placeholder="请输入关键字" style="border: 3px solid red;width: 500px; height: 60px; font-size: 20px;"/>
<a href="#"><input type="submit" value="搜索" style="background: red; border: 1px solid red; width: 120px;
height: 65px;color: white; font-size: 20px;"/></a></div>
<div class="skk"><a href="#"><img src="img/car.png" width="30px"/> 购物车 </a></div>
<div class="we">
<a href="#">咖啡</a>
<a href="#">iphone 6s</a>
<a href="#">新鲜美食</a>
<a href="#">蛋糕</a>
<a href="#">日用品</a>
<a href="#">连衣裙</a>
</div>
</div>
<!--
主页
-->
<div class="rng">
<div style="border: 1px solid red; background: #ff3c3c; width: 270px; height: 50px;
text-align: center; line-height: 45px; font-size: 22px;color: white;">全部商品分类</div>
<div class="ob">
<ul>
<li class="id"> <a href="#"><img src="img/nav1.png"/> 进口食品丶生鲜<img src="img/n_arrow.gif" style="position: relative;left: 100px;"/></a></li>
<li class="id"> <a href="#"><img src="img/nav2.png"/> 食品丶饮料丶酒<img src="img/n_arrow.gif" style="position: relative;left: 105px;"/></a></li>
<li class="id"> <a href="#"><img src="img/nav3.png"/> 母婴丶文具丶童装<img src="img/n_arrow.gif" style="position: relative;left: 83px;"/></a></li>
<li class="id"> <a href="#"><img src="img/nav4.png"/> 家居丶家洁清品丶纸品<img src="img/n_arrow.gif" style="position: relative;left: 50px;"/></a></li>
<li class="id"> <a href="#"><img src="img/nav5.png"/> 美妆丶个人护理丶洗护<img src="img/n_arrow.gif" style="position: relative;left: 60px;"/></a></li>
<li class="id"> <a href="#"><img src="img/nav6.png"/> 女装丶内衣丶中老年人<img src="img/n_arrow.gif" style="position: relative;left: 52px;"/></a></li>
<li class="id"> <a href="#"><img src="img/nav7.png"/> 鞋子丶箱包丶腕表配饰<img src="img/n_arrow.gif" style="position: relative;left: 50px;"/></a></li>
<li class="id"> <a href="#"><img src="img/nav8.png"/> 男装丶运动<img src="img/n_arrow.gif" style="position: relative;left: 130px;"/></a></li>
<li class="id"> <a href="#"><img src="img/nav9.png"/> 手机丶小家电丶电脑<img src="img/n_arrow.gif" style="position: relative;left: 70px;"/></a></li>
<li class="id"> <a href="#"><img src="img/nav10.png"/> 礼品丶充值<img src="img/n_arrow.gif" style="position: relative;left: 128px;"/></a></li>
</ul>
</div>
<div class="fa">
<a class="lo" href="#"><span>首页</span></a>
<a class="lo" href="#"><span>自营超市</span></a>
<a class="lo" href="#">1号团</a>
<a class="lo" href="#">1号超市</a>
<a class="lo" href="#">女装</a>
<a class="lo" href="#">美妆</a>
<a class="lo" href="#">1号海购</a>
<a class="lo" href="#">团购</a>
<a style="font-size: 15px;vertical-align: middle;float: right;" href="#"><img src="img/nav9.png"/> 手机下单惊喜多!</a>
</div>
<div class="tt">
<img src="img/ban1.jpg" width="850px"height="350px" style="display: inline-block;"/>
<a style="position: relative;left: -855px;top: -170px;" href="#"><img src="img/b_left.png"/></a>
<a style="position: relative;left: -72px;top: -170px;" href="#"><img src="img/b_right.png"/></a>
</div>
<div class="lck">
<a href="#">1</a>
</div>
<div class="ui">
<a href="#">2</a>
</div>
<div class="pp">
<a href="#">3</a>
</div>
<div class="fw">
<div class="ogg">
<a style="font-family: '微软雅黑';font-size: 22px;margin: 20px;line-height: 50px;">快讯</a>
<a style="float: right;margin-top: 20px;">更多></a>
</div>
<div class="qw">
<ul>
<li><span>【特惠】</span>掬一笼明月 表无尽惦念</li>
<li><span>【公告】</span><a href="#">好奇金装成长裤新品上市</a></li>
<li><span>【特惠】</span><a href="#">大牌闪购抢!</a></li>
<li><span>【公告】</span><a href="#">发福利 买车就抢千元油卡</a></li>
<li><span>【公告】</span><a href="#">家电低至五折</a></li>
</ul>
</div>
<div class="er">
<h3 style="font-family: '微软雅黑';font-size: 14px;text-align: center;margin: 5px;">1号钱包</h3>
</div>
<div>
<span>收益日结,收益赚High!</span>
<p class="ad"><img src="img/oneAD.jpg" width="240px"height="100px" /></p>
</div>
</div>
<!--
中间页面!!!!
-->
<div class="am">
<img src="img/l_img.jpg"width="240px"/>
<p class="ak">¥53.00 <span>16R</span></p>
</div>
<div class="uzi">
<img src="img/hot1.jpg"style="position: relative; left: 40px;top: 30px;width: 200px;" />
<p class="oii"><span class="oq"><a href="#">德国进口</a></span><br />
<span class="ie"><a href="#">德亚全脂纯牛奶200ml*48盒</a></span></p>
<p class="cc">¥189 <span>26R</span></p>
<img style="position: absolute; left: 40px ;top: 45px;" src="img/hot.png" width="60px"/>
<img style="position: absolute; left: 0px; top: 120px;" src="img/b_left.png" />
</div>
<div class="og">
<img src="img/hot2.jpg" style="position: relative; left: 40px;top: 30px;width: 200px;"/>
<p class="oii"><span class="oq"><a href="#">iphone 6S</a></span><br />
<span class="ie"><a href="#">苹果iphone6S Plus公开版</a></span></p>
<p class="cc">¥5288 <span>25R</span></p>
<img style="position: absolute; left: 40px ;top: 45px;" src="img/hot.png" width="60px"/>
</div>
<div class="ll">
<img src="img/hot3.jpg" style="position: relative; left: 40px;top: 30px;width: 200px;"/>
<p class="oii"><span class="oq"><a href="#">倩碧特惠组合</a></span><br />
<span class="ie"><a href="#">倩碧补水组合套装8折促销</a></span></p>
<p class="cc">¥368 <span>18R</span></p>
<img style="position: absolute; left: 40px ;top: 45px;" src="img/hot.png" width="60px"/>
</div>
<div class="ul">
<img src="img/hot4.jpg" style="position: relative; left: 40px;top: 30px;width: 200px;"/>
<p class="oii"><span class="oq"><a href="#">特级憨揽油</a></span><br />
<span class="ie"><a href="#">750ml*4瓶装西班牙原装进口</a></span></p>
<p class="cc">¥280 <span>30R</span></p>
<img style="position: absolute; left: 40px ;top: 45px;" src="img/hot.png" width="60px"/>
<img style="position: absolute; left: 278px; top: 120px;" src="img/b_right.png" />
</div>
<div><img src="img/mban_2.jpg"width="1500px" style="position: relative;left: ;top: -1680px;"/>
</div>
<!--
中间
1F
-->
<div class="fl">
<p><img src="img/floor.png"style="margin-right: 10px;" /><span style="position:
absolute;left: 5px;top: 10px;color: white;">1F</span><strong style="font-size: 22px;
color: red;margin: 20px;position: absolute; top: -10px;">进口·生鲜</strong></p>
<ul class="io">
<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>
</ul>
<div class="lu">
<a href="#"><img src="img/fre_r.jpg"/></a>
<a href="#"><img src="img/b_left.png" style="position: relative; left: -215px; top: -100px;"/></a>
<a href="#"><img src="img/b_right.png"style="position: relative; left: -72px; top: -100px;"/></a>
<div class="op">
<div class="ig">
<ul>
<li><a href="#">进口水果</a></li>
<li><a href="#">奇异果</a></li>
<li><a href="#">西柚</a></li>
</ul>
</div>
<div class="ao">
<ul>
<li><a href="#">海鲜生产</a></li>
<li><a href="#">品质牛奶</a></li>
</ul>
</div>
<div class="wer">
<ul>
<li><a href="#">奶粉</a></li>
<li><a href="#">鲜活禽蛋</a></li>
<li><a href="#">进口酒</a></li>
</ul>
</div>
<div class="wy">
<ul>
<li><a href="#">进口奶茶</a></li>
<li><a href="#">进口车子</a></li>
</ul>
</div>
</div>
<div class="or">
<a href="#"><img style="position: relative; left: 40px; top: 60px;" src="img/fre_3.jpg"/></a>
<p><a style="position: relative;left: 100px;top: -130px;" href="#">美味汉堡</a><br /><span
style="color: red;font-size: 20px;position: relative;left: 110px ;top:-130px;">$98.00</span></p>
</div>
<div class=lb>
<a href="#"><img style="position: relative; left: 40px; top: 60px;" src="img/fre_6.jpg"/></a>
<p><a style="position: relative;left: 100px;top: -140px;" href="#">微笑果园</a><br /><span
style="color: red;font-size: 20px;position: relative;left: 110px ;top:-130px;">$84.00</span></p>
</div>
<div class="lk">
<a href="#"><img style="position: relative; left: 40px; top: 60px;" src="img/fre_3.jpg"/></a>
<p><a style="position: relative;left: 100px;top: -140px;" href="#">新鲜美味 进口美食</a><br /><span
style="color: red;font-size: 20px;position: relative;left: 110px ;top:-130px;">$98.00</span></p>
</div>
<div class="lj">
<a href="#"><img src="img/fre_b1.jpg"height="233px"width="420px"/></a>
</div>
<div class="lw">
<a href="#"><img style="position: relative; left: 40px; top: 60px;" src="img/fre_4.jpg"/></a>
<p><a style="position: relative;left: 100px;top: -140px;" href="#">新鲜美味 进口美食</a><br /><span
style="color: red;font-size: 20px;position: relative;left: 110px ;top:-130px;">$24.00</span></p>
</div>
<div class="ls">
<a href="#"><img style="position: relative; left: 40px; top: 60px;" src="img/fre_5.jpg"/></a>
<p><a style="position: relative;left: 100px;top: -140px;" href="#">新鲜美味 纯牛奶</a><br /><span
style="color: red;font-size: 20px;position: relative;left: 110px ;top:-130px;">$142.00</span></p>
</div>
<div class="jh">
<a href="#"><img style="position: relative; left: 40px; top: 60px;" src="img/fre_6.jpg"/></a>
<p><a style="position: relative;left: 100px;top: -140px;" href="#">莫斯利安</a><br /><span
style="color: red;font-size: 20px;position: relative;left: 110px ;top:-130px;">$62.00</span></p>
</div>
<div class="kj">
<a href="#"><img src="img/fre_b2.jpg"height="228px"width="420px"/></a>
</div>
</div>
</div>
<!--
中间
2F
-->
<div class="li">
<p><img src="img/floor.png"style="margin-right: 10px;" /><span style="position:
absolute;left: 5px;top: 10px;color: white;">2F</span><strong style="font-size: 22px;
color: red;margin: 20px;position: absolute; top: -10px;">个人美妆</strong></p>
<ul class="io">
<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>
</ul>
<div class="lop">
<a href="#"><img src="img/make_r.jpg" width="210px"height="290px"/></a>
<a href="#"><img src="img/b_left.png" style="position: relative; left: -215px; top: -100px;"/></a>
<a href="#"><img src="img/b_right.png"style="position: relative; left: -72px; top: -100px;"/></a>
<div class="op">
<div class="ig">
<ul>
<li><a href="#">洗发护发</a></li>
<li><a href="#">牙膏牙刷</a></li>
</ul>
</div>
<div class="ao">
<ul>
<li><a href="#">面膜</a></li>
<li><a href="#">补水面膜</a></li>
<li><a href="#">香水</a></li>
</ul>
</div>
<div class="wer">
<ul>
<li><a href="#">面霜</a></li>
<li><a href="#">洗面奶</a></li>
<li><a href="#">脱牙膏</a></li>
</ul>
</div>
<div class="wy">
<ul>
<li><a href="#">沐浴露</a></li>
</ul>
</div>
</div>
</div>
<div class="or">
<a href="#"><img style="position: relative; left: 40px; top: 60px;" src="img/make_1.jpg"/></a>
<p><a style="position: relative;left: 100px;top: -130px;" href="#">美宝莲粉饼</a><br /><span
style="color: red;font-size: 20px;position: relative;left: 110px ;top:-130px;">$260.00</span></p>
</div>
<div class=lb>
<a href="#"><img style="position: relative; left: 40px; top: 60px;" src="img/make_2.jpg"/></a>
<p><a style="position: relative;left: 100px;top: -140px;" href="#">洗衣液</a><br /><span
style="color: red;font-size: 20px;position: relative;left: 110px ;top:-130px;">$60.00</span></p>
</div>
<div class="lk">
<a href="#"><img style="position: relative; left: 40px; top: 60px;" src="img/make_3.jpg"/></a>
<p><a style="position: relative;left: 100px;top: -140px;" href="#">洗发水</a><br /><span
style="color: red;font-size: 20px;position: relative;left: 110px ;top:-130px;">$160.00</span></p>
</div>
<div class="lj">
<a href="#"><img src="img/make_b1.jpg"height="228px"width="425px"/></a>
</div>
<div class="lw">
<a href="#"><img style="position: relative; left: 40px; top: 60px;" src="img/make_4.jpg"/></a>
<p><a style="position: relative;left: 100px;top: -140px;" href="#">男士洗发水</a><br /><span
style="color: red;font-size: 20px;position: relative;left: 110px ;top:-130px;">$120.00</span></p>
</div>
<div class="ls">
<a href="#"><img style="position: relative; left: 40px; top: 60px;" src="img/make_5.jpg"/></a>
<p><a style="position: relative;left: 100px;top: -140px;" href="#">美宝莲粉饼</a><br /><span
style="color: red;font-size: 20px;position: relative;left: 110px ;top:-130px;">$260.00</span></p>
</div>
<div class="jh">
<a href="#"><img style="position: relative; left: 40px; top: 60px;" src="img/make_6.jpg"/></a>
<p><a style="position: relative;left: 100px;top: -140px;" href="#">男式设计 洗面奶</a><br /><span
style="color: red;font-size: 20px;position: relative;left: 110px ;top:-130px;">$90.00</span></p>
</div>
<div class="kj">
<a href="#"><img src="img/make_b2.jpg" height="228px"width="420px"/></a>
</div>
<div class="oi"></div>
</div>
<div><img src="img/mban_2.jpg"width="1500px" style="position: relative;left: ;top: -620px;"/> </div>
<!--
中间
3F
-->
<div class="lv">
<p><img src="img/floor.png"style="margin-right: 10px;" /><span style="position:
absolute;left: 5px;top: 10px;color: white;">3F</span><strong style="font-size: 22px;
color: red;margin: 20px;position: absolute; top: -10px;">母婴玩具</strong></p>
<ul class="io">
<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>
</ul>
<div class="lop">
<a href="#"><img src="img/baby_r.jpg" width="210px"height="290px"/></a>
<a href="#"><img src="img/b_left.png" style="position: relative; left: -215px; top: -100px;"/></a>
<a href="#"><img src="img/b_right.png"style="position: relative; left: -72px; top: -100px;"/></a>
<div class="op">
<div class="ig">
<ul>
<li><a href="#">孕妈必备</a></li>
<li><a href="#">儿童玩具</a></li>
</ul>
</div>
<div class="ao">
<ul>
<li><a href="#">重装童鞋</a></li>
<li><a href="#">辅助食品</a></li>
</ul>
</div>
<div class="wer">
<ul>
<li><a href="#">奶粉</a></li>
<li><a href="#">鲜活禽蛋</a></li>
<li><a href="#">维生素</a></li>
</ul>
</div>
<div class="wy">
<ul>
<li><a href="#">重装童鞋</a></li>
<li><a href="#">辅助食品</a></li>
</ul>
</div>
</div>
</div>
<div class="or">
<a href="#"><img style="position: relative; left: 40px; top: 60px;" src="js/baby_1.jpg"/></a>
<p><a style="position: relative;left: 100px;top: -130px;" href="#">儿童推车</a><br /><span
style="color: red;font-size: 20px;position: relative;left: 110px ;top:-130px;">$560.00</span></p>
</div>
<div class=lb>
<a href="#"><img style="position: relative; left: 40px; top: 60px;" src="js/baby_2.jpg"/></a>
<p><a style="position: relative;left: 100px;top: -140px;" href="#">妈咪纸尿裤</a><br /><span
style="color: red;font-size: 20px;position: relative;left: 110px ;top:-130px;">$260.00</span></p>
</div>
<div class="lk">
<a href="#"><img style="position: relative; left: 40px; top: 60px;" src="js/baby_3.jpg"/></a>
<p><a style="position: relative;left: 100px;top: -140px;" href="#">儿童玩具 挖掘机</a><br /><span
style="color: red;font-size: 20px;position: relative;left: 110px ;top:-130px;">$160.00</span></p>
</div>
<div class="lj">
<a href="#"><img src="js/baby_b1.jpg" height="233px"width="420px"/></a>
</div>
<div class="lw">
<a href="#"><img style="position: relative; left: 40px; top: 60px;" src="js/baby_4.jpg"/></a>
<p><a style="position: relative;left: 100px;top: -140px;" href="#">纸尿裤</a><br /><span
style="color: red;font-size: 20px;position: relative;left: 110px ;top:-130px;">$260.00</span></p>
</div>
<div class="ls">
<a href="#"><img style="position: relative; left: 40px; top: 60px;" src="js/baby_5.jpg"/></a>
<p><a style="position: relative;left: 100px;top: -140px;" href="#">儿童推车</a><br /><span
style="color: red;font-size: 20px;position: relative;left: 110px ;top:-130px;">$86</span></p>
</div>
<div class="jh">
<a href="#"><img style="position: relative; left: 40px; top: 60px;" src="js/baby_6.jpg"/></a>
<p><a style="position: relative;left: 100px;top: -140px;" href="#">奶粉</a><br /><span
style="color: red;font-size: 20px;position: relative;left: 110px ;top:-130px;">$660.00</span></p>
</div>
<div class="kj">
<a href="#"><img src="js/baby_b2.jpg"height="228px"width="420px"/></a>
</div>
</div>
</div>
<div class="hg">
<p style="position: relative;left: 330px;top: 20px;line-height: 25px;"><img src="img/b1.png" /><br /><strong>正品
保障<br /></strong><span style="color: darkgrey;position: relative;left: -24px;">正品行货 放心购买</span></p>
<p style="position: relative;left: 600px;top: -100px;line-height: 25px;"><img src="img/b2.png" /><br /><strong>满38
包邮<br /></strong><span style="color: darkgrey;position: relative;left: -24px;">满38包邮 免运费</span></p>
<p style="position: relative;left: 900px;top: -220px;line-height: 25px;"><img src="img/b3.png" /><br /><strong>天天
低价<br /></strong><span style="color: darkgrey;position: relative;left: -24px;">天天低价 畅选无忧</span></p>
<p style="position: relative;left: 1200px;top: -340px;line-height: 25px;"><img src="img/b4.png" /><br /><strong>准时
送达<br /></strong><span style="color: darkgrey;position: relative;left: -24px;">收货时间 由你做主</span></p>
</div>
<div class="jo">
<div class="ho">
<ul>
<li><a href="#"><span style="font-family: '微软雅黑';font-size: 20px;">新手上路</span></a></li>
<br />
<li class="lm"><a href="#">售后流程</a></li>
<li class="lm"><a href="#">购物流程</a></li>
<li class="lm"><a href="#">订购方式</a></li>
<li class="lm"><a href="#">隐私声明</a></li>
<li class="lm"><a href="#">推荐分享说明</a></li>
</ul>
</div>
<div class="ho" style="position: relative;left: 200px; top: -195px;">
<ul>
<li><a href="#"><span style="font-family: '微软雅黑';font-size: 20px;">配送与支付</span></a></li>
<br />
<li class="lm"><a href="#">货到付款区域</a></li>
<li class="lm"><a href="#">配送支付查询</a></li>
<li class="lm"><a href="#">支付方式说明</a></li>
</ul>
</div>
<div class="ho" style="position: relative;left: 400px; top: -332px;">
<ul>
<li><a href="#"><span style="font-family: '微软雅黑';font-size: 20px;">会员中心</span></a></li>
<br />
<li class="lm"><a href="#">资金管理</a></li>
<li class="lm"><a href="#">我的订单</a></li>
<li class="lm"><a href="#">我的收藏</a></li>
</ul>
</div>
</div>
<div class="ho" style="position: relative;left: 800px; top: -204px;">
<ul>
<li><a href="#"><span style="font-family: '微软雅黑';font-size: 20px;">服务保证</span></a></li>
<br />
<li class="lm"><a href="#">退货原则</a></li>
<li class="lm"><a href="#">退货服务保证</a></li>
<li class="lm"><a href="#">产品质量保证</a></li>
</ul>
</div>
<div class="ho" style="position: relative;left: 1000px; top: -339px;">
<ul>
<li><a href="#"><span style="font-family: '微软雅黑';font-size: 20px;">联系我们</span></a></li>
<br />
<li class="lm"><a href="#">网络故障报告</a></li>
<li class="lm"><a href="#">购物质询</a></li>
<li class="lm"><a href="#">投诉与建议</a></li>
</ul>
</div>
<div class="hoi" style="position: relative;left: 1230px;top: -470px;">
<p><img src="img/er.gif"/><br/><span style="color: darkgray;">扫一扫关注我们!</span></p>
<a href="#" style="position: relative;left: 140px;top: -150px;margin: 10px;"><img src="img/b_sh_1.png" /> 新浪微博</a>
<a href="#" style="position: relative;left: 20px;top: -100px;margin: 10px;"><img src="img/b_sh_2.png" /> 腾讯微博</a>
<p style="position: relative;left: 140px;top: -80px;"><strong style="color: darkgray;">服务热线:</strong><br/><span style="color: red; font-size: 22px;">400-123-4567</span></p>
<p style="position: relative;left: -800px;">备案/许可证编号:蜀ICP备12009302号-1-www
.dingguagua.com Copyright© 1号店网上超市 2007-2016,All Rights Reserved. 复制必究 , Technical Support: Dgg Group </p>
<p style="position: relative;left: -700px;top: 30px;"><img src="img/b_1.gif" />
<img src="img/b_2.gif" />
<img src="img/b_3.gif" />
<img src="img/b_4.gif" />
<img src="img/b_5.gif"width="100px" />
<img src="img/b_6.gif"width="100px" /></p>
</div>
</div>
</body>
详情页面
.le {
background: linear-gradient(to top, #d1d1d1, #f4f4f4, #f5f5f5);
float: right;
width: 1850px;
height: 40px;
line-height: 40px;
border: 1px solid white;
}
.lh {
list-style: none;
float: right;
margin: 5px;
}
a:hover {
color: coral;
}
a {
text-decoration: none;
color: black;
}
.lol {
margin-bottom: 100px;
width: 1500px;
height: 150px;
border: 1px solid;
position: relative;
left: 80px;
top: 60px;
}
.skk {
border: 1px solid wheat;
width: 150px;
height: 50px;
float: right;
background: #f6f6f6;
line-height: 60px;
font-size: 20px;
text-align: center;
position: relative;
left: -60px;
top: -120px;
}
.we {
position: relative;
left: 400px;
top: -60px;
line-height: 20px;
}
.we a:hover {
color: coral;
}
.re{
border: 2px solid red;
border-style: none none solid none;
width: 1500px;
height: 80px;
margin-left: 250px;
margin-top: -40px;
}
.lo{
position: relative;
left: 300px;
top: -10px;
margin: 25px;
font-size: 22px;
text-align: center;
font-family: "微软雅黑";
}
.lo span{
color: red;
}
.lp{
width: 1500px;
height: 650px;
margin-left: 250px;
margin-top: 35px;
}
.ld{
border: 1px solid darkgray;
width: 200px;
height: 50px;
background: #EAEAEA;
float: right;
text-align: center;
position: relative;
left: 202px;
top: 160px;
color: black;
font-size: 21px;
}
.dj{
position: relative;
left: -547px;
top: 50px;
line-height: 40px;
}
.df{
float: left;
position: relative;
left: 40px;
top: 80px;
}
.fp{
border: 2px solid;
padding: 10px 20px 10px 20px;
border-color: red;
}
.wd{
border: 2px solid;
padding: 10px 20px 10px 20px;
border-color:#EAEAEA;
}
.df a:hover{
color:black;
}
.fg a:hover{
color: black;
}
.fg{
float: left;
position: relative;
left: -290px;
top: 150px;
}
.lpl{
float: left;
position: relative;
left: -550px;
top: 210px;
}
.lkj{
float: left;
position: relative;
left: 20px;
top: 230px;
}
.fo{
border: 1px solid;
padding: 15px 30px 15px 30px;
border-color: darkgray;
font-size: 23px;
}
.lf{
border: 1px solid;
padding: 5px 10px 5px 10px;
font-size: 15px;
border-color: darkgray;
background: #EAEAEA;
position: relative;
top: -17px;
}
.dg{
border: 1px solid;
padding: 5px 14px 5px 11px;
font-size: 15px;
border-color: darkgray;
background: #EAEAEA;
position: relative;
left: -32px;
top: 12px;
}
.gk{
float: left;
position: relative;
left: -840px;
top: 330px;
}
.fn{
border: 1px solid;
padding:90px 0px 0px 0px;
border-color:#EAEAEA;
}
.zz{
border: 2px solid #EAEAEA;
width: 260px;
height: 1535px;
margin-left: 250px;
}
.zop{
border: 1px solid #EAEAEA;
width: 260px;
height: 40px;
border-style: none none solid none;
background:whitesmoke ;
text-align: center;
position: relative;
top: 10px;
margin-top: -10px;
}
.dj1{
border: 1px solid #EAEAEA;
width: 260px;
height: 300px;
border-style: none none solid none;
}
.zh{
border: 1px solid #EAEAEA;
width: 1200px;
height: 345px;
float: right;
margin-top: -1540px;
margin-right: 93px;
}
.zh1{
border: 2px solid red;
border-style: solid none none none;
width: 115px;
height: 40px;
margin-left: 1px;
}
.zh2{
border: 1px solid #EAEAEA;
width: 1082px;
height: 40px;
float: right;
margin-top: -43px;
background: whitesmoke;
}
.zh3{
width: 200px;
height: 300px;
float: left;
}
.zh4{
width: 220px;
height: 300px;
float: left;
position: relative;
left: 80px;
}
.zh5{
width: 200px;
height: 300px;
float: left;
position: relative;
left: 170px;
}
.zh6{
width: 200px;
height: 300px;
float: left;
position: relative;
left: 310px;
}
.cj{
border: 1px solid #EAEAEA;
width: 80px;
height: 25px;
line-height: 25px;
text-align: center;
font-size: 17px;
}
.de{
border: 1px solid #EAEAEA;
width: 1200px;
height: 245px;
float: right;
margin-top: -1180px;
margin-right: 93px;
}
.de1{
border: 2px solid red;
border-style: solid none none none;
width: 115px;
height: 40px;
margin-left: 1px;
}
.de2{
border: 1px solid #EAEAEA;
width: 1082px;
height: 42px;
float: right;
margin-top: -45px;
background: whitesmoke;
}
.de3{
width: 200px;
height: 120px;
float: left;
margin-left: 20px;
margin-top: 60px;
}
.de4{
width: 220px;
height: 120px;
float: left;
position: relative;
left: 80px;
margin-top: 60px;
}
.de5{
width: 200px;
height: 120px;
float: left;
position: relative;
left: 140px;
margin-top: 60px;
}
.de6{
width: 250px;
height: 120px;
float: left;
position: relative;
left: 210px;
margin-top: 60px;
}
.de p{
line-height: 30px;
}
.dw{
border: 1px solid #EAEAEA;
width: 1200px;
height: 3780px;
float: right;
margin-top: -920px;
margin-right: 93px;
}
.dw1{
border: 1px solid;
width: 1200px;
height: 40px;
border-top-color: red;
border-left-color: #EAEAEA;
border-right-color: #EAEAEA;
border-bottom-color:#EAEAEA;
background: whitesmoke;
}
.dw2{
text-align: center;
line-height: 30px;
}
.dw2 img{
margin-top:20px;
}
.dh{
border: 1px solid #EAEAEA;
width: 1200px;
height: 840px;
float: right;
margin-top: 20px;
margin-right: 93px;
}
.dh1{
border: 1px solid;
width: 1200px;
height: 40px;
border-top-color: red;
border-left-color: #EAEAEA;
border-right-color: #EAEAEA;
border-bottom-color:#EAEAEA;
background: whitesmoke;
}
.dh2{
border: 1px solid;
width: 1160px;
height: 130px;
border-top-color: whitesmoke;
border-left-color: #EAEAEA;
border-style: solid none solid solid;
border-bottom-color:#EAEAEA;
margin-top: 30px;
margin-left: 20px;
}
.dh3{
width: 110px;
height: 70px;
float:left ;
position: relative;
left: 20px;
top: 25px;
}
.dh4{
width: 300px;
height: 110px;
float: left;
position: relative;
left: 50px;
top:20px;
}
.dh4 img{
position: relative;
left: 100px;
top: -77px;
margin: 5px;
}
.dh5{
border: 1px solid #EAEAEA;
width: 300px;
height: 100px;
float: left;
position: relative;
border-style: none none none solid;
left: 60px;
top: 20px;
}
.dh6{
border: 1px solid #EAEAEA;
width: 300px;
height: 100px;
float: left;
margin-left: 100px;
margin-top: 20px;
border-style: none none none solid;
}
.rh{
border: 1px solid #EAEAEA;
width: 1200px;
height: 130px;
border-style: none none solid none;
}
.rh1{
text-align: right;
color: #888888;
padding: 20px 10px;
margin-top: 30px;
}
.rh1 a{
border: 1px solid darkgray;
border-radius: 2px;
padding: 10px 12px;
text-align: center;
}
.rh1 a:nth-of-type(1):hover{
background-color: #EAEAEA;
}
.rh1 a:nth-of-type(3):hover{
background-color: red;
color: white;
}
.rh1 a:nth-of-type(4):hover{
background-color:red;
color: white;
}
.rh1 a:nth-of-type(5):hover{
background-color:red;
color: white;
}
.rh1 a:nth-of-type(6):hover{
background-color: #EAEAEA;
}
.hg{
widows: 20px;
height: 200px;
margin-top: 30px;
position: relative;
top: 3800px;
}
.hg img:hover{
transform: rotate(360deg) scale(1.2);
transition: all 3s;
}
.jo{
border: 1px solid darkgray;
border-style: none none solid none;
width:1400px ;
height: 200px;
margin-top: 3800px;
margin-left: 200px;
}
.ho span:hover{
text-decoration: underline;
color: black;
}
.ho li{
list-style: none;
}
.lm a:hover{
color: red;
}
.lm a{
color: darkgray;
line-height: 30px;
}
-->
<div class="lol">
<div><a href="#"><img src="img/loginlogo.jpg" /></a></div>
<div class="we"><input type="search" name="sousou" placeholder="请输入关键字" style="border: 3px solid red;width: 500px; height: 60px; font-size: 20px;"/>
<a href="#"><input type="submit" value="搜索" style="background: red; border: 1px solid red; width: 120px;
height: 65px;color: white; font-size: 20px;"/></a></div>
<div class="skk"><a href="#"><img src="img/car.png" width="30px"/> 购物车 </a></div>
<div class="we">
<a href="#">咖啡</a>
<a href="#">iphone 6s</a>
<a href="#">新鲜美食</a>
<a href="#">蛋糕</a>
<a href="#">日用品</a>
<a href="#">连衣裙</a>
</div>
</div>
<!--
主页
-->
<div class="re">
<div style="border: 1px solid red; background: #ff3c3c; width: 270px; height: 50px;
text-align: center; line-height: 45px; font-size: 22px;color: white;position:relative;top: 30px;">全部商品分类</div>
<div class="fa">
<a class="lo" href="#"><span>首页</span></a>
<a class="lo" href="#"><span>自营超市</span></a>
<a class="lo" href="#">1号团</a>
<a class="lo" href="#">1号超市</a>
<a class="lo" href="#">女装</a>
<a class="lo" href="#">美妆</a>
<a class="lo" href="#">1号海购</a>
<a class="lo" href="#">团购</a>
<a style="font-size: 15px;vertical-align: middle;float: right;" href="#"><img src="img/nav9.png"/> 手机下单惊喜多!</a>
</div>
</div>
<!--
详情页面
-->
<div class="lp">
<p>所有团购 > 包饰 > 珠韵首饰 <span style="color: red;">冰韵 天然白色正圆S925银扣珍珠项链</span></p>
<img style="border: 0.8px solid #EAEAEA;width: 500px;height: 450px;margin-top: 10px;float: left;" src="img/p_big.jpg" />
<p style="float: left;margin-top: 10px;line-height: 30px;margin-left: 40px;"><strong style="font-size: 20px;font-family: '微软雅黑';">
珠韵首饰 冰韵 天然白色正圆S925银扣珍珠项链</strong><br /><span style="color: darkgray;">全国包邮 送妈妈,正圆级淡水珍珠,白色S925银链扣,使用方便,尊贵礼物。</span></p>
<img style="border: 1px solid #EAEAEA;width: 200px;height: 170px;float: right;"src="img/sbrand.jpg" />
<div class="ld">
<a style="position: relative;top: 5px;" href="#">进入品牌专区</a>
</div>
<div class="dj">
<p style="float: left;font-size: 15px;">本店价格:<span style="color: red;font-size: 21px;">¥1789<br /></span>参考价:¥3886</p>
</div>
<div class="df">
<p><strong style="color: darkgray;font-size: 19px;">尺码: </strong><span class="fp"><a href="#">43cm</span></a>
<span class="wd"><a href="#">45cm</span></a> <span class="wd"><a href="#">50cm</span></a><img style="position: relative;left: -197px; top: 16px;" src="img/ch.png"/></p>
</div>
<div class="fg">
<p><strong style="color: darkgray;font-size: 19px;">颜色选择 </strong><span class="wd"><a href="#">粉色 </a></span> <span class="fp">
<a href="#">白色</span><img style="position: relative;left: -20px;top: 15px;" src="img/ch.png"/></a></p>
</div>
<div class="lpl">
<p><a href="#"><img src="img/sh.png"/>分享</a><span style="position: relative;left: 100px;"><a href="#"><img src="img/heart_h.png"/>关注商品</a></span></p>
</div>
<div class="lkj">
<p><span class="fo">1</span><span class="lf">+</span><span class="dg">-</span> <img style="position: relative;left: -20px;top: 20px;" src="img/j_car.png"height="56px"/></p>
</div>
<div class="gk">
<p><span class="fn"><a href="#"><img src="img/p_big.jpg"width="100px"height="100px" /></a></span>
<span class="fn"><a href="#"><img src="img/fre_1.jpg"width="100px"height="100px"/></a></span>
<span class="fn"><a href="#"><img src="img/fre_1.jpg"width="100px"height="100px"/></span></a>
<span class="fn"><a href="#"><img src="img/fre_1.jpg"width="100px"height="100px"/></a></span><img
style="position: relative;left: -445px;top: -25px;" src="img/r_left.png"width="20px"/>
<img style="position: relative;left: -20px;top: -25px;" src="img/r_right.png"width="20px"></p>
</div>
</div>
<div class="zz">
<div class="zop">
<p>用户还喜欢</p>
</div>
<div class="dj1">
<a href="#"><img style="position: relative;left: 5px;top: 20px;" src="img/fre_1.jpg" /></a>
<p><a style="position: relative;left: 30;top: 200px; font-size: 17px;" href="#">科爱KEAL儿童日本书包减负护脊</a><br />
<span style="color: darkred;position: relative;left: 110px;top: 200px;font-size: 20px;">$599</span></p>
</div>
<div class="dj1">
<a href="#"><img style="position: relative;left: 5px;top: 20px;" src="img/fre_1.jpg" /></a>
<p><a style="position: relative;left: 30;top: 200px; font-size: 17px;" href="#">科爱KEAL小学生减负护脊书包超</a><br />
<span style="color: darkred;position: relative;left: 110px;top: 200px;font-size: 20px;">$79</span></p>
</div>
<div class="dj1">
<a href="#"><img style="position: relative;left: 5px;top: 20px;" src="img/fre_1.jpg" /></a>
<p><a style="position: relative;right: 20;top: 200px; font-size: 20px;" href="#">珠韵首饰 天然白色珍珠项链</a><br />
<span style="color: darkred;position: relative;left: 110px;top: 200px;font-size: 20px;">$339</span></p>
</div>
<div class="dj1">
<a href="#"><img style="position: relative;left: 5px;top: 20px;" src="img/fre_1.jpg" /></a>
<p><a style="position: relative;right: 20;top: 200px; font-size: 18px;" href="#">珠韵首饰 新品18K黄金珍珠耳钉</a><br />
<span style="color: darkred;position: relative;left: 110px;top: 200px;font-size: 20px;">$1860</span></p>
</div>
<div class="dj1">
<a href="#"><img style="position: relative;left: 5px;top: 20px;" src="img/fre_1.jpg" /></a>
<p><a style="position: relative;right: 20;top: 200px; font-size: 19px;" href="#"> 珠韵首饰 姝丽大珍珠项链</a><br />
<span style="color: darkred;position: relative;left: 110px;top: 200px;font-size: 20px;">$758</span></p>
</div>
</div>
<div class="zh">
<div class="zh1">
<p style="text-align: center;">推荐搭配</p>
</div>
<div class="zh2"></div>
<div class="zh3">
<img src="img/fre_2.jpg" style="position: relative; left: 50px; top: 30px;" />
<a style="position: relative;top: 180px;" href="#">粤通国际珠宝999足金</a>
<input style="position: relative;left: 35px;top: 200px;" type="checkbox" name="cb" value="sports"checked />
<span style="color: darkgray;position: relative;left: 80px;top: 200px;font-size: 17px;">¥76</span>
</div>
<div class="zh4">
<img src="img/fre_2.jpg"style="position: relative; left: 50px; top: 30px;" />
<a style="position: relative;top: 180px;" href="#">珠韵 9.5-10.5mm珍珠项链</a>
<input style="position: relative;left: 35px;top: 200px;" type="checkbox" name="cb" value="sports" />
<span style="color: darkgray;position: relative;left: 80px;top: 200px;font-size: 17px;">¥1890</span>
<img src="img/jia_b.gif" width="30px"style="position: relative;left: -80px;top: 75px;"/>
</div>
<div class="zh5">
<img src="img/fre_2.jpg"style="position: relative; left: 70px; top: 30px;" />
<a style="position: relative;top: 180px; left: 30px;" href="#">清新耳环</a>
<input style="position: relative;left: -35px;top: 220px;" type="checkbox" name="cb" value="sports"checked />
<span style="color: darkgray;position: relative;left: 0px;top: 220px;font-size: 17px;">¥232</span>
<img src="img/jia_b.gif" width="30px"style="position: relative;left: -150px;top: 110px;"/>
</div>
<div class="zh6">
<p><span style="color: red;position: relative;left: 10px;top: 70px;">套餐价:¥2000</span></p>
<input class="cj" type="text" value="1" style="position: relative;left: 10px;top: 80px;" />
<img src="img/z_buy.gif" style="position: relative;left: 10px;top: 100px;" />
<img src="img/equl.gif"width="30px" style="position: relative;left: -160px;top: 50px;"/>
</div>
</div>
<div class="de">
<div class="de1">
<span style="text-align: center;" >推荐搭配</span>
</div>
<div class="de2">
<span style="margin: 15px;"><a href="#">商品详情</a> <a href="#">商品评论</a></span>
</div>
<div class="de3">
<p>商品名称:天然淡水珍珠</p>
<p>商品毛重:160.00g</p>
<p>镶嵌材质:纯银</p>
</div>
<div class="de4">
<p>商品编号:1546211</p>
<p>商品产地:法国</p>
<p>款式:项链</p>
</div>
<div class="de5">
<p>品牌: 珠韵首饰</p>
<p>珍珠形状:正圆</p>
</div>
<div class="de6">
<p style="font-size: 15px;">上架时间:2015-09-06 09:19:09</p>
</div>
</div>
<div class="dw">
<div class="dw1">
<p style="color: red;margin: 8px;">商品详情</p>
</div>
<div class="dw2">
<img src="img/de2.jpg" />
<img src="img/de3.jpg" />
<img src="img/de4.jpg" />
<img src="img/de5.jpg" />
<img src="img/de6.jpg" />
<img src="img/de7.jpg" />
<img src="img/de8.jpg" />
</div>
</div>
<div class="dh">
<div class="dh1">
<p style="color: red;margin: 8px;">商品评论</p>
</div>
<div class="dh2">
<div class="dh3">
<p><span style="color: red;font-size: 32px;">80.0%</span><br/><span style="color: red;margin: 15px;">好评度</span></p>
</div>
<div class="dh4">
<p style="line-height: 25px;">好评(80%)<br />中评(20%)<br />差评(0%)</p>
<img src="img/pl.gif" />
<img src="img/pl.gif" />
<img src="img/pl.gif" />
</div>
<div class="dh5">
<p style="position: relative;left: 50px;top: 20px;">购买过珠韵首饰 天然银扣珍珠项链<br/>的顾客,在收到商品才可以对该商<br />品发表评论 </p>
</div>
<div class="dh6">
<p style="text-align: center;position: relative;top: 20px;">你可对已购买商品进行评价</p>
<a href="#"><img style="position: relative;left: 60px;top: 20px;" src="img/btn_jud.gif"/></a>
</div>
</div>
<div class="rh">
<p style="position: relative;left: 30px;top: 50px;"><img src="img/peo1.jpg"/>向死而生</p>
<p style="position: relative;left: 250px;top: 28px;line-height: 25px;">颜色分类:粉色 <br/>型号:43cm </p>
<p style="position: relative;left: 450px;top: -20px;line-height: 25px;">产品很好,香味很喜欢,必须给赞。<br/>2015-09-24 </p>
</div>
<div class="rh">
<p style="position: relative;left: 30px;top: 50px;"><img src="img/peo2.jpg"/>就是这么想的 </p>
<p style="position: relative;left: 250px;top: 28px;line-height: 25px;">颜色分类:粉色 <br/>型号:43cm </p>
<p style="position: relative;left: 450px;top: -20px;line-height: 25px;">送朋友,她很喜欢,大爱。<br/>2015-09-24 </p>
</div>
<div class="rh">
<p style="position: relative;left: 30px;top: 50px;"><img src="img/peo3.jpg"/>墨镜墨镜 </p>
<p style="position: relative;left: 250px;top: 28px;line-height: 25px;">颜色分类:粉色 <br/>型号:43cm </p>
<p style="position: relative;left: 450px;top: -20px;line-height: 25px;">大家都说不错<br/>2015-09-24 </p>
</div>
<div class="rh">
<p style="position: relative;left: 30px;top: 50px;"><img src="img/peo4.jpg"/>那*****洋 </p>
<p style="position: relative;left: 250px;top: 28px;line-height: 25px;">颜色分类:粉色 <br/>型号:43cm </p>
<p style="position: relative;left: 450px;top: -20px;line-height: 25px;">下次还会来买,推荐。<br/>2015-09-24 </p>
<p style="color: darkgray;position: relative;left: 20px;top: -50px;">(匿名用户)</p>
</div>
<div class="rh1">
<a href="#">上一页</a>
<a style="color: white;background: red;" href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
...
<a href="#">20</a>
<a href="#">下一页</a>
</div>
</div>
<div class="hg">
<p style="position: relative;left: 330px;top: 20px;line-height: 25px;"><img src="img/b1.png" /><br /><strong>正品
保障<br /></strong><span style="color: darkgrey;position: relative;left: -24px;">正品行货 放心购买</span></p>
<p style="position: relative;left: 600px;top: -100px;line-height: 25px;"><img src="img/b2.png" /><br /><strong>满38
包邮<br /></strong><span style="color: darkgrey;position: relative;left: -24px;">满38包邮 免运费</span></p>
<p style="position: relative;left: 900px;top: -220px;line-height: 25px;"><img src="img/b3.png" /><br /><strong>天天
低价<br /></strong><span style="color: darkgrey;position: relative;left: -24px;">天天低价 畅选无忧</span></p>
<p style="position: relative;left: 1200px;top: -340px;line-height: 25px;"><img src="img/b4.png" /><br /><strong>准时
送达<br /></strong><span style="color: darkgrey;position: relative;left: -24px;">收货时间 由你做主</span></p>
</div>
<div class="jo">
<div class="ho">
<ul>
<li><a href="#"><span style="font-family: '微软雅黑';font-size: 20px;">新手上路</span></a></li>
<br />
<li class="lm"><a href="#">售后流程</a></li>
<li class="lm"><a href="#">购物流程</a></li>
<li class="lm"><a href="#">订购方式</a></li>
<li class="lm"><a href="#">隐私声明</a></li>
<li class="lm"><a href="#">推荐分享说明</a></li>
</ul>
</div>
<div class="ho" style="position: relative;left: 200px; top: -195px;">
<ul>
<li><a href="#"><span style="font-family: '微软雅黑';font-size: 20px;">配送与支付</span></a></li>
<br />
<li class="lm"><a href="#">货到付款区域</a></li>
<li class="lm"><a href="#">配送支付查询</a></li>
<li class="lm"><a href="#">支付方式说明</a></li>
</ul>
</div>
<div class="ho" style="position: relative;left: 400px; top: -332px;">
<ul>
<li><a href="#"><span style="font-family: '微软雅黑';font-size: 20px;">会员中心</span></a></li>
<br />
<li class="lm"><a href="#">资金管理</a></li>
<li class="lm"><a href="#">我的订单</a></li>
<li class="lm"><a href="#">我的收藏</a></li>
</ul>
</div>
</div>
<div class="ho" style="position: relative;left: 800px; top: -204px;">
<ul>
<li><a href="#"><span style="font-family: '微软雅黑';font-size: 20px;">服务保证</span></a></li>
<br />
<li class="lm"><a href="#">退货原则</a></li>
<li class="lm"><a href="#">退货服务保证</a></li>
<li class="lm"><a href="#">产品质量保证</a></li>
</ul>
</div>
<div class="ho" style="position: relative;left: 1000px; top: -339px;">
<ul>
<li><a href="#"><span style="font-family: '微软雅黑';font-size: 20px;">联系我们</span></a></li>
<br />
<li class="lm"><a href="#">网络故障报告</a></li>
<li class="lm"><a href="#">购物质询</a></li>
<li class="lm"><a href="#">投诉与建议</a></li>
</ul>
</div>
<div class="hoi" style="position: relative;left: 1230px;top: -470px;">
<p><img src="img/er.gif"/><br/><span style="color: darkgray;">扫一扫关注我们!</span></p>
<a href="#" style="position: relative;left: 140px;top: -150px;margin: 10px;"><img src="img/b_sh_1.png" /> 新浪微博</a>
<a href="#" style="position: relative;left: 20px;top: -100px;margin: 10px;"><img src="img/b_sh_2.png" /> 腾讯微博</a>
<p style="position: relative;left: 140px;top: -80px;"><strong style="color: darkgray;">服务热线:</strong><br/><span style="color: red; font-size: 22px;">400-123-4567</span></p>
<p style="position: relative;left: -800px;">备案/许可证编号:蜀ICP备12009302号-1-www
.dingguagua.com Copyright© 1号店网上超市 2007-2016,All Rights Reserved. 复制必究 , Technical Support: Dgg Group </p>
<p style="position: relative;left: -700px;top: 30px;"><img src="img/b_1.gif" />
<img src="img/b_2.gif" />
<img src="img/b_3.gif" />
<img src="img/b_4.gif" />
<img src="img/b_5.gif"width="100px" />
<img src="img/b_6.gif"width="100px" /></p>
</div>
</div>
</body>
登录