<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
padding:0px;
margin:0px;
}
a{
text-decoration: none;
}
section{
width:1300px;
margin:0px auto;
}
#box1{
height:30px;
border:1px solid #A9A9A9;
background-color:#e5e5e5;
}
#box2 ul li,#box1 ul li{
display: inline-block;
padding:0px 5px;
}
#box1 ul{
float:right;
margin-top:-20px;
margin-right:20px;
}
#box1 div{
margin-left:20px;
}
#box1 ul,img{
vertical-align: middle;
}
.a1{
color: chocolate;
text-decoration: none;
}
.a1:hover{
color:red;
}
#box2{
height:80px;
}
#box3{
height:40px;
display: inline-block;
}
.b3,.b4{
display: inline-block;
}
.a2{
float: right;
margin-top:-50px;
margin-right:800px;
}
.a5 input{
width:300px;
height:35px;
padding-left:20px;
border:1px solid #FF0000;
}
.a6 input{
width:70px;
height:35px;
border:1px solid #FF0000;
background-color: #FF0000;
color: #FFFFFF;
}
.a3{
float:right;
margin-top:-60px;
margin-right:300px;
}
.a4{
margin-left:20px;
}
form span{
width:70px;
height:30px;
}
form .a5,.a6{
display: inline-block;
}
.a6{
margin-left:-5px;
}
.a2 ul li{
font-size:5px;
}
.a3{
width:80px;
height:30px;
border:1px solid #A9A9A9;
text-align: center;
background-color: #ececec;
}
.a3 span{
padding-left:10px;
}
#box4{
width:1300px;
height:350px;
margin-top:20px;
position: relative;
}
.b1 img{
width:700px;
height:300px;
border:1px solid #A9A9A9;
float: right;
margin-top:-300px;
margin-right:360px;
}
.b2{
height:0px;
border:1px #DC143C solid;
}
.b3{
width:200px;
height:30px;
border:1px solid #DC143C;
text-align: center;
padding-top:10px;
background-color:#ff3c3c;
color: #FFFFFF;
/* position: absolute;
top:10px; */
}
.b4{
margin-left:10px;
}
.b4 span{
margin:0px 20px;
}
.b4 span a:nth-of-type(1){
color: #DC143C;
}
.a7 ul li{
list-style:none;
padding:4px 0px;
}
.a7{
width:200px;
height:300px;
border:1px #DC143C solid;
background-color: #DC143C;
}
.b5{
float: right;
padding-right:5px;
}
.a7 ul li img{
width:13px;
height:13px;
padding-left: 5px;
}
.b6{
padding-left:10px;
font-size:10px;
color: #F0F8FF;
}
.a7 ul li:hover{
background-color: chartreuse;
}
.b8{
float:right;
padding-left:270px;
padding-top:10px;
}
.a8{
position: relative;
}
.a8 ul li:nth-of-type(1){
width:20px;
height:20px;
border:1px solid #A9A9A9;
border-radius:50px;
text-align:center;
background-color: #A9A9A9;
list-style:none;
position: absolute;
left:560px;
top:-30px;
}
.a8 ul li:nth-of-type(2){
width:20px;
height:20px;
border:1px solid #A9A9A9;
border-radius:50px;
text-align:center;
background-color: #A9A9A9;
list-style:none;
position: absolute;
left:590px;
top:-30px;
}
.a8 ul li:nth-of-type(3){
width:20px;
height:20px;
border:1px solid #A9A9A9;
border-radius:50px;
text-align:center;
background-color: #A9A9A9;
list-style:none;
position: absolute;
left:620px;
top:-30px;
}
.b9{
position: absolute;
left:240px;
top:-190px;
}
.b10{
position: absolute;
left:908px;
top:-190px;
}
.a9{
width:300px;
height:300px;
border:1px solid #A9A9A9;
float: right;
margin-top:-300px;
margin-right:20px;
}
.a9 ul li{
list-style:none;
}
.c1 img{
width:200px;
height:90px;
padding-left:10px;
}
.a9 ul p:nth-of-type(1){
border-bottom:1px #A9A9A9 solid;
line-height:30px;
font-size:20px;
padding-left:5px;
}
.a9 ul p span{
float: right;
font-size:10px;
padding-right:5px;
}
.a9 a{
color: #A9A9A9;
}
.a9 ul li span{
color: black;
font-weight:bold;
}
.a9 li:hover{
background-color: #7FFF00;
}
.a9 ul li{
margin:2px 0px;
}
.c2 p:nth-of-type(1){
border-top:1px #A9A9A9 solid;
padding-left:5px;
}
.c2 p:nth-of-type(2){
font-size:15px;
padding-left:10px;
}
#box5{
width:1300px;
height:260px;
margin-top:30px;
}
.c3{
width:1000px;
height:260px;
border:1px solid #A9A9A9;
float:left;
margin-top:-260px;
margin-left:300px;
position: relative;
}
.c3 div{
display: inline-block;
float: left;
margin-right:46px;
border-right: 1px solid #A9A9A9;
}
.c3 div p{
text-align: center;
}
.c3 div:last-child{
border-right:none;
}
.c4 img{
width:230px;
height:210px;
}
.c3 img{
width:200px;
height:200px;
}
.c4 p{
padding-left:40px;
padding-top:30px;
}
.c5{
font-weight:bold;
}
.c6{
font-size:10px;
color: #A9A9A9;
}
.c7{
color: #DC143C;
}
.c7 span{
color: #A9A9A9;
font-size:10px;
}
.c9{
position: absolute;
left:410px;
bottom:50px;
}
.c10{
position: absolute;
right:110px;
bottom:50px;
}
.d1{
position: absolute;
left:410px;
bottom:140px;
}
.d2{
position: absolute;
left:610px;
bottom:140px;
}
.d3{
position: absolute;
right:610px;
bottom:140px;
}
.d4{
position: absolute;
right:365px;
bottom:140px;
}
#box6 img{
width:1300px;
height:100px;
margin-top:20px;
}
#box7{
width:1300px;
height:40px;
margin-top:20px;
}
#box7 ul li{
list-style:none;
display: inline-block;
float:left;
margin-right:10px;
font-size:10px;
color: #A9A9A9;
}
.d5{
position:relative;
}
.d5 p{
z-index: 1;
position:absolute;
bottom:1px;
color:wheat;
}
.d6{
margin-left:1000px;
margin-top:-25px;
}
.d5 span{
color: #DC143C;
}
.d5 img,span{
vertical-align: middle;
}
.d7{
height: 0px;
border:1px solid #DC143C;
}
.box2 div{
display: inline-block;
}
.box2 div img{
width:150px;
height:150px;
margin-left:30px;
}
.box2{
width:800px;
height:400px;
float: right;
margin-top:-400px;
margin-right:250px;
}
.box3 div img{
width:290px;
height:200px;
}
.box3{
width:250px;
height:400px;
float: right;
margin-top:-400px;
margin-right:50px;
}
.d8{
width:250px;
height:200px;
border:1px solid #696969;
}
.d8 p:nth-of-type(1){
font-size:10px;
text-align: center;
}
.d8 p:nth-of-type(2){
text-align: center;
color: #DC143C;
}
.box1{
width:213px;
height:400px;
}
.box1 ul li{
border-bottom:1px dashed #696969;
list-style:none;
padding:1px 0px;
}
.box1{
background-color: aquamarine;
}
.box1 img{
position: relative;
width:213px;
height:286px;
}
.d10{
position: absolute;
left:300px;
bottom:-400px;
}
.d9{
position: absolute;
left:110px;
bottom:-400px;
}
.e1{
position: absolute;
left:110px;
top:1550px;
}
.e2{
position:absolute;
left:300px;
top:1550px;
}
.e3{
position: absolute;
left:110px;
top:2100px
}
.e4{
position: absolute;
left:300px;
top:2100px;
}
.e5 .box1{
background-color:darksalmon;
}
.e6 .box1{
background-color: pink;
}
#bnt div{
display: inline-block;
text-align: center;
margin:0px 70px;
}
#bnt div img{
transition:all 1s ease-in-out;
}
#bnt div img:hover{
transform:rotate(360deg) scale(1.2);
}
#bnt2 ul li{
list-style: none;
}
#bnt2 ul{
display: inline-block;
}
#bnt2{
width:1300px;
height:200px;
/* display:inline-block; */
}
#bnt{
width:1000px;
height:150px;
margin-top:50px;
margin-left:120px;
}
#bnt div p:nth-of-type(1){
font-size:14px;
}
#bnt div p:nth-of-type(2){
font-size:10px;
color: #A9A9A9;
}
#bnt2{
margin-top:50px;
position: relative;
}
.e10{
float:left;
}
.e8{
margin-left:130px;
width:1100px;
height:200px;
margin-top:-150px;
}
.e8 ul{
margin:0px 60px;
}
.e9{
width:290px;
height:150px;
/* display: inline-block; */
margin-left:1000px;
position: absolute;
top: 0px;
right: 0px;
}
.e8 ul li{
font-size:10px;
color: #A9A9A9;
}
.e8 h3{
font-size:15px;
color: #696969;
}
.e7 ul li{
font-size:10px;
color: #A9A9A9;
}
.e7 h3{
font-size:15px;
color: #696969;
}
.e11 p span{
margin-left:20px;
margin-bottom:5px;
}
.e11 div img{
margin-left:20px;
margin-bottom:5px;
}
.e11{
padding-top:10px ;
}
.f1{
font-size:10px;
}
.f2{
color: #DC143C;
}
.e8 ul li{
padding-top:10px;
}
.e7 ul li{
padding-top:10px;
}
.bnt6{
width: 1300px;
height:0px;
border:1px solid #696969;
margin:0px auto;
}
footer p{
text-align: center;
}
.bnt5{
width:700px;
height:30px;
margin: 0px auto;
}
.bnt5 div{
display: inline-block;
}
.bnt5 div img{
width:100px;
height:30px;
}
</style>
</head>
<body>
<header>
<div id="box1">
<div>送货至：四川</div>
<ul>
<li>你好!请登录 <a class="a1" href="registerpage.html" target="_blank">免费注册</a>|</li>
<li>我的订单 |</li>
<li>收藏夹<img src="../img/t_arrow.gif" >客户服务<img src="../img/t_arrow.gif" >网站导航<img src="../img/t_arrow.gif" >|</li>
<li>关注我们：新浪微信<img src="../img/sh1.png" > <img src="../img/sh2.png" >|</li>
<li>手机版<img src="../img/s_tel.png" ></li>
</ul>
</div>
<div id="box2">
<div class="a4"><img src="../img/logo.png" ></div>
<div class="a2">
<div>
<form action="" method="post">
<div class="a5"><input type="text" name="fname" id="" value=""placeholder="请输入关键字" /></div>
<div class="a6"><input type="submit" value="搜索"/></div>
</form>
</div>
<ul>
<li>咖啡</li>
<li>iphone 6S</li>
<li>新鲜美食</li>
<li>蛋糕</li>
<li>日用品</li>
<li>连衣裙</li>
</ul>
</div>
</div>
<div class="a3"><img src="../img/car.png" ><span>购物车</span></div>
</header>
<section>
<div id="box4">
<div id="box3">
<p><div class="b3">全部商品分类</div>
<div class="b4">
<span><a href="#">首页</a></span><span><a href="#">自营超市</a></span><span>1号团</span>
<span>1号超市</span><span>女装</span><span>美妆</span><span>1号海购</span><span>团购</span>
</div><div class="b8"><img src="../img/phone.png"></div></p>
</div>
<div class="b2"></div>
<div class="a7">
<ul>
<li><img src="../img/nav1.png" ><span class="b6">进口食品、生鲜</span><span class="b5"><img src="../img/n_arrow.gif" ></span></li>
<li><img src="../img/nav2.png" ><span class="b6">食品、饮料、酒</span><span class="b5"><img src="../img/n_arrow.gif" ></span></li>
<li><img src="../img/nav4.png" ><span class="b6">家居、家庭清洁、纸品</span><span class="b5"><img src="../img/n_arrow.gif" ></span></li>
<li><img src="../img/nav3.png" ><span class="b6">母婴、玩具、童装</span><span class="b5"><img src="../img/n_arrow.gif" ></span></li>
<li><img src="../img/nav5.png" ><span class="b6">美妆、个人护理、洗护</span><span class="b5"><img src="../img/n_arrow.gif" ></span></li>
<li><img src="../img/nav6.png" ><span class="b6">女装、内衣、中老年</span><span class="b5"><img src="../img/n_arrow.gif" ></span></li>
<li><img src="../img/nav7.png" ><span class="b6">鞋靴、箱包、腕表配饰</span><span class="b5"><img src="../img/n_arrow.gif" ></span></li>
<li><img src="../img/nav8.png" ><span class="b6">男装、运动</span><span class="b5"><img src="../img/n_arrow.gif" ></span></li>
<li><img src="../img/nav9.png" ><span class="b6">手机、小家电、电脑</span><span class="b5"><img src="../img/n_arrow.gif" ></span></li>
<li><img src="../img/nav10.png" ><span class="b6">礼品、充值</span><span class="b5"><img src="../img/n_arrow.gif" ></span></li>
</ul>
</div>
<div class="a8">
<div class="b1"><img src="../img/ban1.jpg" ></div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<div class="b9"><img src="../img/b_left.png" ></div>
<div class="b10"><img src="../img/b_right.png" ></div>
</div>
<div class="a9">
<ul>
<p>快讯 <span><a href="#">更多 ></a></span></p>
<li><a href="#">【<span>特惠</span>】掬一轮明月 表无尽惦念</a></li>
<li><a href="#">【<span>公告</span>】好奇金装成长裤新品上市</a></li>
<li><a href="#">【<span>特惠</span>】大牌闪购 · 抢！</a></li>
<li><a href="#">【<span>公告</span>】发福利 买车就抢千元油卡</a></li>
<li><a href="#">【<span>公告</span>】家电低至五折</a></li>
<div class="c2">
<p>1号钱包</p>
<p>收益日结，收益赚High！</p>
<p class="c1"><img src="../img/oneAD.jpg" ></p>
</div>
</ul>
</div>
</div>
<div id="box5">
<div class="c4"><img src="../img/l_img.jpg" ><p class="c7">￥53.00 <span>16R</span></p></div>
<div class="c3">
<div class="c8"><img src="../img/hot1.jpg" >
<p class="c5">德国进口</p>
<p class="c6">德亚全脂纯牛奶200ml*48盒</p>
<p class="c7">￥189 <span>26R</span></p></div>
<div><img src="../img/hot2.jpg" >
<p class="c5">iphone 6S</p>
<p class="c6">Apple/苹果 iPhone 6s Plus公开版</p>
<p class="c7">￥5288 <span>25R</span></p></div>
<div><img src="../img/hot3.jpg" >
<p class="c5">倩碧特惠组合套装</p>
<p class="c6">倩碧补水组合套装8折促销</p>
<p class="c7">￥368 <span>18R</span></p></div>
<div ><img src="../img/hot4.jpg" >
<p class="c5">品利特级橄榄油</p>
<p class="c6">750ml*4瓶装组合 西班牙原装进口</p>
<p class="c7">￥280 <span>30R</span></p>
</div>
</div>
<div class="c9"><img src="../img/s_left.png" ></div>
<div class="c10"><img src="../img/s_right.png" ></div>
<div class="d1"><img src="../img/hot.png" ></div>
<div class="d2"><img src="../img/hot.png" ></div>
<div class="d3"><img src="../img/hot.png" ></div>
<div class="d4"><img src="../img/hot.png" ></div>
</div>
<div id="box6"><img src="../img/mban_2.jpg" ></div>
<div id="box7">
<div class="d5"><img src="../img/floor.png" ><p>1F</p><span>进口 · 生鲜</span></div>
<div class="d6">
<ul>
<li>进口咖啡</li>
<li>进口酒</li>
<li>进口母婴</li>
<li>新鲜蔬菜</li>
<li>新鲜水果</li>
</ul>
</div>
</div>
<div class="d7"></div>
<div id="box8">
<div class="box1">
<img src="../img/fre_r.jpg" >
<ul>
<li> 进口水果 奇异果 西柚</li>
<li> 海鲜水产 品质牛肉</li>
<li> 奶粉 鲜活禽蛋 进口酒</li>
<li> 进口奶粉 鲜活禽蛋</li>
</ul>
</div>
<div class="d9"><img src="../img/s_left.png" ></div>
<div class="d10"><img src="../img/s_right.png" ></div>
<div class="box2">
<div class="d8">
<p>贝思客 草莓先生&蓝莓小姐</p>
<p>￥98.00</p>
<img src="../img/fre_1.jpg" >
</div><div class="d8">
<p>微笑果园SMILE 智利进口绿奇异果</p>
<p>￥84.00</p>
<img src="../img/fre_2.jpg" >
</div>&l
最低0.47元/天 解锁文章
4295
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
