1号店

主页

主页面

.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;

}








<!–
1号店

        -->
		   <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"/>&nbsp;&nbsp;&nbsp;&nbsp;购物车 </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">&nbsp;&nbsp;&nbsp;<a href="#"><img src="img/nav1.png"/>&nbsp;&nbsp;&nbsp;进口食品丶生鲜<img src="img/n_arrow.gif" style="position: relative;left: 100px;"/></a></li>
					<li class="id">&nbsp;&nbsp;&nbsp;<a href="#"><img src="img/nav2.png"/>&nbsp;&nbsp;&nbsp;食品丶饮料丶酒<img src="img/n_arrow.gif" style="position: relative;left: 105px;"/></a></li>
					<li class="id">&nbsp;&nbsp;&nbsp;<a href="#"><img src="img/nav3.png"/>&nbsp;&nbsp;&nbsp;母婴丶文具丶童装<img src="img/n_arrow.gif" style="position: relative;left: 83px;"/></a></li>
					<li class="id">&nbsp;&nbsp;&nbsp;<a href="#"><img src="img/nav4.png"/>&nbsp;&nbsp;&nbsp;家居丶家洁清品丶纸品<img src="img/n_arrow.gif" style="position: relative;left: 50px;"/></a></li>
					<li class="id">&nbsp;&nbsp;&nbsp;<a href="#"><img src="img/nav5.png"/>&nbsp;&nbsp;&nbsp;美妆丶个人护理丶洗护<img src="img/n_arrow.gif" style="position: relative;left: 60px;"/></a></li>
					<li class="id">&nbsp;&nbsp;&nbsp;<a href="#"><img src="img/nav6.png"/>&nbsp;&nbsp;&nbsp;女装丶内衣丶中老年人<img src="img/n_arrow.gif" style="position: relative;left: 52px;"/></a></li>
					<li class="id">&nbsp;&nbsp;&nbsp;<a href="#"><img src="img/nav7.png"/>&nbsp;&nbsp;&nbsp;鞋子丶箱包丶腕表配饰<img src="img/n_arrow.gif" style="position: relative;left: 50px;"/></a></li>
					<li class="id">&nbsp;&nbsp;&nbsp;<a href="#"><img src="img/nav8.png"/>&nbsp;&nbsp;&nbsp;男装丶运动<img src="img/n_arrow.gif" style="position: relative;left: 130px;"/></a></li>
					<li class="id">&nbsp;&nbsp;&nbsp;<a href="#"><img src="img/nav9.png"/>&nbsp;&nbsp;&nbsp;手机丶小家电丶电脑<img src="img/n_arrow.gif" style="position: relative;left: 70px;"/></a></li>
					<li class="id">&nbsp;&nbsp;&nbsp;<a href="#"><img src="img/nav10.png"/>&nbsp;&nbsp;&nbsp;礼品丶充值<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"/>&nbsp;&nbsp;&nbsp;手机下单惊喜多!</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>掬一笼明月&nbsp;表无尽惦念</li>
		        			<li><span>【公告】</span><a href="#">好奇金装成长裤新品上市</a></li>
		        			<li><span>【特惠】</span><a href="#">大牌闪购抢!</a></li>
		        			<li><span>【公告】</span><a href="#">发福利&nbsp;买车就抢千元油卡</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&nbsp;&nbsp;&nbsp;&nbsp;<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&nbsp;&nbsp;&nbsp;&nbsp;<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&nbsp;Plus公开版</a></span></p>
		        	<p class="cc">¥5288&nbsp;&nbsp;&nbsp;&nbsp;<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&nbsp;&nbsp;&nbsp;&nbsp;<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&nbsp;&nbsp;&nbsp;&nbsp;<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="#">新鲜美味&nbsp;&nbsp;进口美食</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="#">新鲜美味&nbsp;&nbsp;进口美食</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="#">新鲜美味&nbsp;&nbsp;纯牛奶</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="#">男式设计&nbsp;&nbsp;洗面奶</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="#">儿童玩具&nbsp;&nbsp;挖掘机</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;">正品行货&nbsp;&nbsp;放心购买</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包邮&nbsp;&nbsp;免运费</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;">天天低价&nbsp;&nbsp;畅选无忧</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;">收货时间&nbsp;&nbsp;由你做主</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" />&nbsp;&nbsp;新浪微博</a>
          	<a href="#" style="position: relative;left: 20px;top: -100px;margin: 10px;"><img src="img/b_sh_2.png" />&nbsp;&nbsp;腾讯微博</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;

}







<!–
1号店

        -->
		   <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"/>&nbsp;&nbsp;&nbsp;&nbsp;购物车 </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"/>&nbsp;&nbsp;&nbsp;手机下单惊喜多!</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;">尺码:&nbsp;&nbsp;</strong><span class="fp"><a href="#">43cm</span></a>&nbsp;&nbsp;
	    		<span class="wd"><a href="#">45cm</span></a>&nbsp;&nbsp;<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;">颜色选择&nbsp;&nbsp;</strong><span class="wd"><a href="#">粉色&nbsp;&nbsp;</a></span>&nbsp;&nbsp;<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>&nbsp;&nbsp;<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="#">&nbsp;&nbsp;&nbsp;&nbsp;珠韵首饰 姝丽大珍珠项链</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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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;">正品行货&nbsp;&nbsp;放心购买</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包邮&nbsp;&nbsp;免运费</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;">天天低价&nbsp;&nbsp;畅选无忧</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;">收货时间&nbsp;&nbsp;由你做主</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" />&nbsp;&nbsp;新浪微博</a>
          	<a href="#" style="position: relative;left: 20px;top: -100px;margin: 10px;"><img src="img/b_sh_2.png" />&nbsp;&nbsp;腾讯微博</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>

登录

登录

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值