<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
li{
list-style: none;
float: left;
}
.box{
width: 1500px;
height: 1800px;
margin-left: 40px;
background-color: #ececec;
}
.tou{
width: 1350px;
height: 30px;
padding-right:40px;
background-color: #dcdcdc;
font-size: 15px;
line-height: 30px;
}
.toq{
margin-left: 145px;
}
a{
cursor: pointer;
text-decoration: none;
}
.tow{
float: right;
text-indent: 10px;
color: #6c6c6c;
position: static;
}
.tt{
width: 15px;
height: 15px;
background: url("indexhead_sprite.png") #f1f1f1 317px 7px;
margin-top: 9px;
margin-left: 10px;
}
.sj{
width: 25px;
height: 25px;
background: url("indexhead_sprite.png") 326px -223px;
}
.tk{
width: 105px;
height: 155px;
border: 1px solid #d5d5d5;
position: relative;
}
sa{
width: 15px;
height: 15px;
background: url("indexhead_sprite.png") #f1f1f1 317px 7px;
margin-top: 9px;
margin-left: 10px;
position: absolute;
top: -1px;
right: 13px;
}
p{
float: left;
}
.p0{
color: #141414;
}
.y1{
margin-top: 40px ;
margin-left: 150px;
}
table.qwe{
margin: -65px 350px;
width: 458px;
}
.yu1{
width: 70px;
text-align: center;
background-color: #cecece;
border: 1px solid red;
}
.yu3{
width: 90px;
background-color: crimson;
color: #FEFCFC;
text-align: center;
}
.yu2 input {
width: 300px;
height: 30px;
border: 1px solid red;
}
.y4{
margin: -25px 350px;
color: #848484;
}
.tz{
margin-top: 150px;
margin-left: 340px;
position: static;
}
.zxz li{
margin: 10px;
}
.zs{
color: red;
}
.hk{
width: 1350px;
height:398px;
border: 1px solid #E82A1E;
background: red;
margin-left: 40px;
}
.hz{
width: 200px;
height: 398px;
border: 1px solid #91152a;
background: #91152a;
margin-left: 100px;
position: relative;
}
.hzt{
width: 200px;
height: 35px;
border: 1px solid red;
background-color: red;
position: absolute;
top: 186px;
left: 180px;
color: #FEFCFC;
text-align: center;
line-height: 35px;
}
.hzt img{
position: absolute;
top: 11px;
left: 175px;
}
.hz ul li{
color: #FEFCFC;
text-indent: 24px;
padding-top: 13px;
font-size: 14px;
position: relative;
}
.l1{
background: url("nav.png")no-repeat 2px 13px #91152a;
}
.l2{
background: url("nav.png")no-repeat 2px -33px #91152a;
}
.l3{
background: url("nav.png")no-repeat 0 -77px #91152a;
}
.l4{
background: url("nav.png")no-repeat 0 -121px #91152a;
}
.l5{
background: url("nav.png")no-repeat 0 -158px #91152a;
}
.l6{
background: url("nav.png")no-repeat 0 -198px #91152a;
}
.l7{
background: url("nav.png")no-repeat 0 -237px #91152a;
}
.l8{
background: url("nav.png")no-repeat 0 -276px #91152a;
}
.l9{
background: url("nav.png")no-repeat 0 -317px #91152a;
}
.l10{
background: url("nav.png")no-repeat 0 -357px #91152a;
}
.l11{
background: url("nav.png")no-repeat 0 -391px #91152a;
}
.l12{
background: url("nav.png")no-repeat 0 -432px #91152a;
}
.l1 img{
position: absolute;
top:15px;
left: 179px;
}
.l2 img{
position: absolute;
top:15px;
left: 179px;
}
.l3 img{
position: absolute;
top: 15px;
left: 179px;
}
.l4 img{
position: absolute;
top: 15px;
left: 179px;
}
.l5 img{
position: absolute;
top: 15px;
left: 179px;
}
.l6 img{
position: absolute;
top: 15px;
left: 179px;
}
.l7 img{
position: absolute;
top: 15px;
left: 179px;
}
.l8 img{
position: absolute;
top: 15px;
left: 179px;
}
.l9 img{
position: absolute;
top: 15px;
left: 179px;
}
.l10 img{
position: absolute;
top: 15px;
left: 179px;
}
.l11 img{
position: absolute;
top: 15px;
left: 179px;
}
.l12 img{
position: absolute;
top: 15px;
left: 179px;
}
.mnt{
width: 750px;
height: 398px;
background: url("banner.jpg");
margin-left: 200px;
position: relative;
}
div .mnt ul li.a1 {
width: 18px;
height: 5px;
background: red;
position: absolute;
right: 428px;
bottom: 14px;
}
div .mnt ul li.a3{
width: 18px;
height: 5px;
background: #c8c8c8;
position: absolute;
right: 396px;
bottom: 14px;
}
div .mnt ul li.a4{
width: 18px;
height: 5px;
background: #c8c8c8;
position: absolute;
right: 364px;
bottom: 14px;
}
div .mnt ul li.a2{
width: 18px;
height: 5px;
background: #c8c8c8;
position: absolute;
right: 332px;
bottom: 14px;
}
div .mnt ul li.a5{
width: 18px;
height: 5px;
background: #c8c8c8;
position: absolute;
right: 300px;
bottom: 14px;
}
div.xbk{
width: 250px;
height: 396px;
border:1px solid #FEFCFC;
background: #FEFCFC;
margin:-398px 950px ;
}
.xbk .xkt{
padding: 10px;
}
.xbk .xkt sd{
margin-right: 10px;
padding: 25px;
font-size: 12px;
}
.kem{
font-size: 13px;
padding-top: 15px;
color: #8e8e8e;
}
.poi{
width: 251px;
height: 40px;
border: 1px solid #c4c4c4;
background-color: #eaeaea;
position: absolute;
bottom: 141px;
right: -1003px;
text-align: center;
}
.cz{
color: #FF3B3C;
}
.oiu{
margin-top: 70px;
font-size: 11px;
}
.lo{
text-align: right;
}
.io{
color: red;
}
as{
width: 50px;
height: 20px;
border: 1px solid red;
background-color: red;
color: #FEFCFC;
text-align: center;
position: absolute;
top: 350px;
}
/*外边框*/
div.bxo{
margin: 0 90px;
width: 1300px;
height: 500px;
border: 1px solid #ececec;
background-color: #ececec;
padding: 50px;
box-sizing: border-box;
}
span{
color: red;
float: left;
font-size: 18px;
}
z{
font-size: 14px;
color: #919191;
text-align: right;
text-indent: 100px;
margin-left: 739px;
}
/*内中框*/
.frame{
margin: 30px 10px 10px 0;
width: 1100px;
height: 360px;
border-top: solid crimson;
background-color: #FFFFFF;
box-sizing: border-box;
}
/*第一小框*/
.xk{
float: left;
height: 360px;
width: 190px;
background-color: #FFFFFF;
box-sizing: border-box;
position: relative;
}
ul.bg li{
font-size: 14px;
width: 70px;
height: 20px;
/*边框加颜色*/
border:1px solid #F2F2F2 ;
color: #5c5c5c;
/*去掉前面小点*/
list-style: none;
line-height: 20px;
text-align: center;
/*外边距*/
margin: 5px;
display: inline-block;
float: left;
}
div ul.ban li{
/*list-style: none;*/
text-align: center;
padding-top: 30px;
}
ul.ban li.ba1{
color: #FF3B3C;
font-size: 18px;
margin-top: -19px;
margin-left: 50px;
}
ul.ban li.ba2{
color: #6f6f6f;
font-size: 14px;
margin-left: -54px;
margin-top: 20px;
}
tu img{
position: absolute;
top: 178px;
right: 1px;
}
/*第二小狂*/
div.tp{
float: left;
display: inline-block;
width: 330px;
height: 360px;
background: url("sec1-1.jpg");
position: relative;
box-sizing: border-box;
}
div.tp w{
float: left;
border: 1px solid crimson;
width: 30px;
height: 5px;
background-color: red;
position: absolute;
bottom:20px;
left:100px;
}
div.tp e{
border: 1px solid #FEFCFC;
width: 30px;
height: 5px;
background-color: #FEFCFC;
position: absolute;
bottom:20px;
left:140px;
}
div.tp r{
border: 1px solid #FEFCFC;
width: 30px;
height: 5px;
background-color: #FEFCFC;
position: absolute;
bottom:20px;
left:180px;
}
/*第三小框*/
div.dsk{
float: left;
width: 190px;
height: 360px;
background-color: #FEFCFC;
display: inline-block;
box-sizing: border-box;
text-align: center;
}
div.dsk ul li.d1{
margin-top: 30px;
list-style: none;
margin-left:60px;
}
div.dsk ul li.d2{
list-style: none;
font-size: 15px;
color: #636363;
margin-left: 60px;
}
div.dsk ul li.d3{
margin-top: 10px;
list-style: none;
margin-left: 60px;
}
div.dsk ul li.d4{
list-style: none;
font-size: 15px;
color: #636363;
margin-top: 10px;
margin-left: 35px;
}
/*第四小框*/
div .d4k{
float: left;
width: 190px;
height: 360px;
background-color: #FEFCFC;
display: inline-block;
box-sizing: border-box;
text-align: center;
}
.d5{
margin-top: 30px;
list-style: none;
margin-left: 40px;
}
.d6{
list-style: none;
margin-left: 20px;
color: #a8a8a8;
}
/*第五小框*/
div.dwk{
float: left;
width: 190px;
height: 360px;
background-color: #FEFCFC;
display: inline-block;
box-sizing: border-box;
text-align: center;
}
div.dwk ul li.d7{
margin-top: 30px;
list-style: none;
margin-left: 60px;
}
div.dwk ul li.d8{
list-style: none;
font-size: 15px;
color: #636363;
margin-top: 5px;
margin-left: 44px;
}
div.dwk ul li.d9{
margin-top: 10px;
list-style: none;
margin-left: 44px;
}
div.dwk ul li.d10{
list-style: none;
font-size: 15px;
color: #636363;
margin-left: 58px;
}
/*外边框*/
div.bco{
margin: -46px 90px;
width: 1300px;
height: 500px;
border: 1px solid #ececec;
background-color: #ececec;
padding: 50px;
box-sizing: border-box;
}
dpan{
color: chartreuse;
float: left;
font-size: 18px;
}
d{
font-size: 14px;
color: #919191;
text-align: right;
text-indent: 100px;
margin-left: 739px;
}
/*内中框*/
.drame{
margin: 30px 10px 10px 0;
width: 1100px;
height: 360px;
border-top: solid chartreuse;
background-color: #FFFFFF;
box-sizing: border-box;
}
/*第一小框*/
.dk{
float: left;
height: 550px;
width: 190px;
background-color: #FFFFFF;
box-sizing: border-box;
position: relative;
}
ul.dg li{
font-size: 14px;
width: 70px;
height: 20px;
/*边框加颜色*/
border:1px solid #F2F2F2 ;
color: #5c5c5c;
/*去掉前面小点*/
list-style: none;
line-height: 20px;
text-align: center;
/*外边距*/
margin: 5px;
display: inline-block;
float: left;
}
div ul.dan li{
text-align: center;
padding-top: 30px;
}
ul.dan li.da1{
color:chartreuse;
font-size: 18px;
margin-top: -19px;
margin-left: 30px;
}
ul.dan li.da2{
color: #6f6f6f;
font-size: 14px;
margin-left: 44px;
margin-top: -7px;
}
tu img{
position: absolute;
top: 178px;
right: 1px;
}
ul.van li.va1{
color:chartreuse;
font-size: 18px;
margin-top: 200px;
margin-left: 40px;
}
ul.van li.va2 {
color: #6f6f6f;
font-size: 14px;
margin-left: 45px;
margin-top: 14px;
}
.wu img{
position: absolute;
top: 178px;
right: 1px;
}
/*第二小狂*/
div.ww{
float: left;
display: inline-block;
width: 330px;
height: 550px;
border: 1px solid transparent;
background-color: #FEFCFC;
}
div.wp{
float: left;
display: inline-block;
width: 330px;
height: 360px;
background: url("sec1-8.jpg");
position: relative;
box-sizing: border-box;
}
.bgs{
margin-top: 20px;
margin-left: 10px;
}
.xps{
color: #bcbcbc;
margin-top: 49px;
margin-left: -129px;
}
.pzs{
width: 150px;
height: 30px;
background-color: red;
color: #FEFCFC;
text-align: center;
line-height: 30px;
margin-top: 99px;
margin-left: -129px;
}
wt{
margin-left: 25px;
}
div.wp w{
float: left;
border: 1px solid crimson;
width: 30px;
height: 5px;
background-color: red;
position: absolute;
bottom:20px;
left:100px;
}
div.wp e{
border: 1px solid #FEFCFC;
width: 30px;
height: 5px;
background-color: #FEFCFC;
position: absolute;
bottom:20px;
left:140px;
}
div.wp r{
border: 1px solid #FEFCFC;
width: 30px;
height: 5px;
background-color: #FEFCFC;
position: absolute;
bottom:20px;
left:180px;
}
/*第三小框*/
div.csk{
float: left;
width: 190px;
height: 550px;
background-color: #FEFCFC;
display: inline-block;
box-sizing: border-box;
text-align: center;
}
div.csk ul li.c1{
margin-top: 30px;
list-style: none;
margin-left:42px;
}
div.csk ul li.c2{
list-style: none;
font-size: 15px;
color: #636363;
margin-left: 60px;
}
div.csk ul li.c3{
margin-top: 10px;
list-style: none;
margin-left: 42px;
}
div.csk ul li.c4{
list-style: none;
font-size: 15px;
color: #636363;
margin-top: 10px;
margin-left: 60px;
}
.vb1{
font-size: 16px;
margin-top: 18px;
margin-left: 28px;
}
.vb2{
color: #6f6f6f;
font-size: 14px;
margin-left: 54px;
margin-top: 14px;
}
/*第四小框*/
div .c4k{
float: left;
width: 190px;
height: 550px;
background-color: #FEFCFC;
display: inline-block;
box-sizing: border-box;
text-align: center;
margin-top: -366px;
}
.c5{
margin-top: 30px;
list-style: none;
margin-left: 40px;
}
.c6{
list-style: none;
margin-left: 20px;
color: #636363;
}
.mb1{
font-size: 16px;
margin-top: 10px;
margin-left: 37px;
}
.mb2{
color: #6f6f6f;
font-size: 14px;
margin-left: 34px;
margin-top: 14px;
}
/*第五小框*/
div.cwk{
float: left;
width: 200px;
height: 550px;
background-color: #FEFCFC;
display: inline-block;
box-sizing: border-box;
text-align: center;
margin-top: -366px;
}
div.cwk ul li.c7{
margin-top: 30px;
list-style: none;
margin-left: 60px;
}
div.cwk ul li.c8{
list-style: none;
font-size: 15px;
color: #636363;
margin-top: 5px;
margin-left: 44px;
}
div.cwk ul li.c9{
margin-top: 10px;
list-style: none;
margin-left: 44px;
}
div.cwk ul li.c10{
list-style: none;
font-size: 15px;
color: #636363;
margin-left: 30px;
}
.ee{
margin-top: 206px;
margin-left: 67px;
padding: 10px;
color: #a6a6a6;
}
.ss{
margin-top: 4px;
margin-left: 157px;
padding: 10px;
color: #a6a6a6;
}
.aa{
margin-top: 4px;
margin-left: 374px;
padding: 10px;
color: #a6a6a6;
}
</style>
</head>
<body>
<div class="box">
<div class="tou">
<ul class="toq">
<li>Hi,请</li>
<li><a href="">登陆</a>/</li>
<li><a href="">注册</a></li>
</ul>
<ul class="tow">
<li>我的一号店</li>
<li class="tt"></li>
<li> | 收藏夹</li>
<li class="tt"></li>
<li class="sj"></li>
<li>掌上一号店 | </li>
<li class="tk"><p>客户服务</p><sa></sa>
<p class="p0">包裹跟踪<br> 常见问题<br> 在线投诉<br> 配送范围</p></li>
<li>网站导航</li>
<li class="tt"></li>
<li>| 关于我们 | </li>
</ul>
</div>
<div class="you">
<ul>
<li class="y1"><img src="logo.png" alt=""></li>
<li>
<table class="qwe">
<tr class="y2">
<td class="yu1">商品</td>
<td class="yu2">
<input type="text">
</td>
<td class="yu3">搜索</td>
</tr>
</table>
<p class="y4">毛巾 卫生纸 电池 洗发露 衣服 鞋子</p>
</li>
</ul>
</div>
<div>
<div class="tz">
<ul class="zxz">
<li class="zs">首页</li>
<li class="zs">自营</li>
<li class="zs">1号团</li>
<li>1号商城</li>
<li>闪购</li>
<li>活色生鲜</li>
<li>医药</li>
<li>1号钱包</li>
</ul>
</div>
</div>
<br><br>
<div class="hk">
<div class="hzt">
<h4>所以商品分类</h4>
<img src="arrow-down.gif" alt="">
</div>
<div class="hz">
<ul>
<li class="l1">进口是食品，生鲜 <img src="1.gif" alt=""></li>
<li class="l2">食品，饮料，酒<img src="1.gif" alt=""></li>
<li class="l3">母婴，玩具，童装<img src="1.gif" alt=""></li>
<li class="l4">家居，家庭清洁，纸品<img src="1.gif" alt=""></li>
<li class="l5">美妆，个人护理，洗护<img src="1.gif" alt=""></li>
<li class="l6">女装，内衣，中老年<img src="1.gif" alt=""></li>
<li class="l7">鞋靴，箱包，腕表配饰<img src="1.gif" alt=""></li>
<li class="l8">男装，户外，户外健身<img src="1.gif" alt=""></li>
<li class="l9">手机，数码，电脑办公<img src="1.gif" alt=""></li>
<li class="l10">小家电，大家电，汽车<img src="1.gif" alt=""></li>
<li class="l11">保健滋补，医药，成品<img src="1.gif" alt=""></li>
<li class="l12">礼品，卡，旅游，充值<img src="1.gif" alt=""></li>
</ul>
<div class="mnt">
<ul>
<li class="a1"></li>
<li class="a2"></li>
<li class="a3"></li>
<li class="a4"></li>
<li class="a5"></li>
</ul>
</div>
<div class="xbk">
<div class="xkt">
<sd><img src="1.jpg" alt="">
<img src="2.jpg" alt="">
<img src="3.jpg" alt="">
<sw><br> 0元试用 会员俱乐部 礼品卡</sw>
</sd>
_________________________________
<div class="kem">
【社区】当红明星教你送七夕情人礼！<br><br>
【社区】全球口碑姨妈巾都在这了！<br><br>
【促销】V3会员 甜蜜 免费领
</div>
<div>
<table class="poi">
<tr>
<td class="cz">话费充值</td>
<td>彩票</td>
<td>网游点卡</td>
</tr>
</table>
</div>
<div class="oiu">
<table>
<tr>
<td class="lo">手机号码：</td>
<td><input type="text"></td>
</tr>
<tr>
<td class="lo">面值：</td>
<td>
<select name="" id="">
<option value="">￥10
</option>
</select>
</td>
</tr>
<tr>
<td class="lo">售价：</td>
<td class="io">￥10.14</td>
</tr>
</table>
<as>立即充值</as>
</div>
</div>
</div>
</div>
</div>
<div class="bxo">
<p class="" ><span>食品饮料</span><z>咖啡 | 休闲食品 | 饼干糕点 | 啤酒 | 粮油米面 </z></p>
<div class="frame">
<!--第一小框-->
<div class="xk">
<ul class="bg">
<li>饼干糕点</li><li>休闲零食</li>
<li>饮料果汁</li><li>牛奶乳品</li>
<li>冲饮谷物</li><li>营养保健</li>
</ul>
<ul class="ban">
<li class="ba1">banner</li>
<li class="ba2">banner</li>
</ul>
<tu><img src="sec1.jpg" alt=""></tu>
</div>
<!--第二小框-->
<div class="tp">
<w></w>
<e></e>
<r></r>
</div>
<!--第三小框-->
<div class="dsk">
<ul class="di">
<li class="d1">吃货天堂</li>
<li class="d2">满49减10</li>
</ul>
<img src="sec1-2.jpg" alt="">
<ul class="do">
<li class="d3">一号酒窟</li>
<li class="d4">百威啤酒两件七折</li>
</ul>
<img src="sec1-3.jpg" alt="">
</div>
<!--第四小框-->
<div class="d4k">
<ul class="dp">
<li class="d5">夏季美食嘉年华</li>
<li class="d6">粮油1元抢；爆款5折起</li>
<img src="sec1-4.jpg" alt="">
</ul>
</div>
<!--第小五框-->
<div class="dwk">
<ul class="dw">
<li class="d7">饮料饮品</li>
<li class="d8">爆款满99减25</li>
</ul>
<img src="sec1-5.jpg" alt="">
<ul class="dq">
<li class="d9">甜蜜蜜七夕好礼</li>
<li class="d10">燕窝买一送一</li>
</ul>
<img src="sec1-6.jpg" alt="">
</div>
</div>
</div>
<div class="bco">
<p class="" ><dpan>个人护理</dpan><d>面部防晒 | 沐浴清洁 | 纸巾 | 洗衣液 | 驱蚊神器 </d></p>
<div class="drame">
<!--第一小框-->
<div class="dk">
<ul class="dg">
<li>洗发护理</li><li>脱毛膏/贴</li>
<li>牙膏牙刷</li><li>抽纸</li>
<li>消毒液</li><li>保鲜膜</li>
</ul>
<ul class="dan">
<li class="da1">蓝月亮洁净盛典</li>
<li class="da2">热销商品5折起</li>
</ul>
<tu><img src="sec1-7.jpg" alt=""></tu>
<ul class="van">
<li class="va1">妮飘满99减25</li>
<li class="va2">与你的浪漫七夕</li>
</ul>
<wu><img src="sec1-17.jpg" alt=""></wu>
</div>
<!--第二小框-->
<div class="ww">
<div class="wp">
<w></w>
<e></e>
<r></r>
</div>
<div class="wl">
<ul>
<li class="bgs">逼格生活由我打造</li>
<li class="xps">新品上市</li>
<li class="pzs">品质生活轻松家务</li>
</ul>
<wt><img src="sec1-16.jpg" alt=""></wt>
</div>
</div>
<!--第三小框-->
<div class="csk">
<ul class="di">
<li class="c1">自营纸制品品牌团</li>
<li class="c2">团购疯抢中</li>
</ul>
<img src="sec1-9.jpg" alt="">
<ul class="do">
<li class="c3">自营衣物洗护团</li>
<li class="c4">爆款5折起</li>
</ul>
<img src="sec1-10.jpg" alt="">
<ul class="vbn">
<li class="vb1">自营家庭清洁品牌团</li>
<li class="vb2">爆款团购2.3折起</li>
</ul>
<wm><img src="sec1-15.jpg" alt=""></wm>
</div>
</div>
<!--第四小框-->
<div class="c4k">
<ul class="dp">
<li class="c5">自营美容护理</li>
<li class="c6">8.18爆款—贵就陪</li>
<img src="sec1-11.jpg" alt="">
</ul>
<ul class="mbn">
<li class="mb1">自营女性护理</li>
<li class="mb2">更多商品二件2折</li>
</ul>
<mm><img src="sec1-14.jpg" alt=""></mm>
</div>
<!--第小五框-->
<div class="cwk">
<ul class="cw">
<li class="c7">自营口腔护理</li>
<li class="c8">更多商品第二件2折</li>
</ul>
<img src="sec1-12.jpg" alt="">
<ul class="dq">
<li class="c9">自营洗发护理</li>
<li class="c10">更多商品第二件2折</li>
</ul>
<img src="sec1-13.jpg" alt="">
</div>
</div>
<div class="ll" >
<p class="ee">关于1号店 | 我们的团队 | 网站联盟 | 热门搜索 | 友情链接 | 1号社区 | 诚征英才 | 商家登陆 | 供应商登陆 | 放心搜 | 1号新品 | 开放平台 <br></p>
<p class="ss">泸ICP备13044278号 | 台字B1.B2-20130004 | 营业执照 | 互联网药品信息服务资格证 | 互联网药品交易服务资格证 </p>
<p class="aa">Copyright@ 1号店网上超市 2007-2015，AII Rights Reserved</p>
</div>
</div>
</body>
</html>
转载于:https://www.cnblogs.com/mpenghao/p/11060881.html
1237
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
