header div:nth-of-type(1){
background: linear-gradient(to top,lightgray,whitesmoke);
height: 35px;
width: 100%;
font-size: 13px;
font-weight: lighter;
}
#nj{
position: absolute;
left: 50px;
padding-top: 10px;
font-size: 12px;
font-weight: lighter;
vertical-align: middle;
}
ul{
list-style: none;
float: right;
padding-right: 50px;
}
li{
display: inline-block;
}
a{
text-decoration: none;
color: black;
}
a:hover{
color: red;
}
.jj{
color: red;
}
header div img:nth-of-type(1){
padding-left: 5px;
}
.dian{
margin-left: 40px;
margin-top: 40px;
}
section input:nth-child(1) {
width: 450px;
height: 50px;
border: red 3px solid;
font-size: 18px;
text-indent: 1em;
}
section input:nth-child(2) {
background-color: red;
width: 100px;
height: 50px;
border: red;
font-size: 18px;
font-weight: bolder;
color: white;
float: right;
overflow: hidden;
}
.ccu{
width: 550px;
margin-top: -70px;
margin-right: auto;
margin-bottom: 0px;
margin-left: 400px;
}
.js{
position: relative;
left: -135px;
top: -20px;
font-size:13px;
}
.js li{
margin: 10px;
}
.a {
border: 1px solid lightgray;
float: right;
width: 120px;
text-align: center;
padding: 10px;
background-color: whitesmoke;
position: absolute;
top: 90px;
margin-left: 990px;
}
.ik{
padding: 0px 0px 0px 0px;
width: 1100px;
border-bottom:2px red solid;
position:absolute;
top: 230px;
left: 80px;
}
section div:nth-of-type(2) ul{
position: absolute;
left: -40px;
top: -50px;
}
section div:nth-of-type(2) ul li{
margin-right: 25px;
font-weight: bold;
margin-bottom: 0px;
}
.hn{
background-color: red;
color: white;
height: 35px;
width: 180px;
margin-bottom: 0px;
margin-left: 0px;
text-align: center;
}
.um{
position: absolute;
right: 20px;
top: -35px;
}
.vb{
position: absolute;
left: 60px;
top: 250px;
font-size: 13px;
}
.one{
width: 390px;
height: 800px;
position:absolute;
left: 100px;
top: 300px;
}
.two{
width: 575px;
height: 800px;
position:absolute;
left: 520px;
top: 280px;
}
#vc{
font-weight: bold;
color: black;
}
#cv{
font-weight: lighter;
color: gray;
font-size: 13px;
}
.jiage{
font-size: 16px;
}
.jia{
font-size: 22px;
font-weight: bold;
color: red;
}
.jm{
width: 18px;
height: 18px;
overflow: hidden;
background: url(ch.png) no-repeat center top;
position: absolute;
right: 452px;
bottom: 642px;
}
.jmc{
width: 18px;
height: 18px;
overflow: hidden;
background: url(ch.png) no-repeat center top;
position: absolute;
right: 342px;
bottom: 600px;
}
.lo{
position: absolute;
right: 450px;
top:130px;
}
#bn{
border: 2px red solid;
width: 65px;
height: 26px;
text-align: center;
color: gray;
}
.bn{
border: 2px lightgray solid;
width: 65px;
height: 26px;
text-align: center;
color: gray;
position: absolute;
right: 368px;
top: 130px;
}
.nn{
border: 2px lightgray solid;
width: 65px;
height: 26px;
text-align: center;
color: gray;
position: absolute;
right: 285px;
top: 130px;
}
.on{
border: 2px lightgray solid;
width: 65px;
height: 26px;
text-align: center;
color: gray;
position: absolute;
right: 425px;
top: 170px;
}
.cbn{
border: 2px red solid;
width: 65px;
height: 26px;
text-align: center;
color: gray;
position: absolute;
right: 340px;
top: 170px;
}
.two ul:nth-of-type(3){
position: absolute;
right: 210px;
top: 240px;
width: 300px;
height: 200px;
}
.two ul:nth-of-type(3) li:nth-of-type(2){
margin-left: 100px;
}
.mnc{
width: 150px;
margin-top: -15px;
margin-left: 40px;
padding-top: 5px;
display: none;
position: absolute;
right: 200px;
top: 40px;
}
.aaza:hover .mnc{
display: block;
}
.zxc{
width: 56px;
height: 40px;
line-height: 43px \9;
background: none;
color: #555555;
font-size: 18px;
text-align: center;
padding: 0;
border: 1px lightgray solid;
position: absolute;
right: 510px;
top: 330px;
}
.zxv{
width: 21px;
height: 21px;
overflow: hidden;
background: url(../珠宝项目/jia.gif) no-repeat center top;
float: right;
border: 0;
border-left: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
cursor: pointer;
position: absolute;
right: 490px;
top: 330px;
}
.zxv1{
width: 21px;
height: 21px;
overflow: hidden;
background: url(../珠宝项目/jian.gif) no-repeat center top;
float: right;
border: 0;
border-left: 1px solid #cccccc;
cursor: pointer;
position: absolute;
right: 490px;
top: 352px;
}
.npc{
position: absolute;
right: 290px;
top: 328px;
}
#zuo{
width: 15px;
height: 90px;
background: url(../珠宝项目/r_left.png) no-repeat left center;
position: absolute;
top: 720px;
left: 390px;
cursor: pointer;
}
#you{
width: 15px;
height: 90px;
background: url(../珠宝项目/r_right.png) no-repeat right center;
position: absolute;
top: 720px;
right: 1120px;
cursor: pointer;
}
#fen{
position: absolute;
top: 600px;
left: 80px;
height: 90px;
overflow: hidden;
}
#fen ul li{
padding-right: 10px;
padding-left: 10px;
padding-top: 20px;
}
.lm{
width: 188px;
height: 188px;
overflow: hidden;
float: right;
border: 1px solid #eaeaea;
position: absolute;
right: 50px;
top: 320px;
}
.lm1{
width: 188px;
height: 132px;
overflow: hidden;
border-bottom: 1px solid #eaeaea;
}
.lm2{
height: 55px;
line-height: 55px;
overflow: hidden;
background-color: #f6f6f6;
font-size: 16px;
text-align: center;
}
#l1 {
border-width: 1px 2px 2px;
border-style: solid dashed dotted;
border-color: #F5F5F5;
margin-top: 600px;
}
#l1 p{
margin-left: 260px;
}
#l1 h2{
font-size: 15px;
color: red;
margin-left: 280px;
}
</style>
</head>
<body>
<header>
<div>
<span id="nj">送货至：四川</span>
<ul>
<li>你好!请<a href="#"> 登录</a></li>
<li><a href="#" class="jj">免费注册</a> </li>
<li> | <a href="#">我的订单</a> | <a href="#"> 收藏夹</li>
<li><a href="#"> 客户服务</a>|</li>
<li><a href="#"> 网站导航</a>| 关注我们： </li>
<li>| <a href="#"> 手机版</a>|</li>
</ul>
</div>
</header>
<section>
<img class="dian" src="logo.png">
<div class="ccu">
<form>
<input type="search" value="请输入关键词">
<input type="submit" value="搜索">
</form>
<ul class="js">
<li><a href="#"> 咖啡</a></li>
<li><a href="#"> iphone 6S</a></li>
<li><a href="#">新鲜美食</a></li>
<li> <a href="#">蛋糕</a></li>
<li> <a href="#">日用品</a></li>
<li><a href="#">连衣裙</a> </li>
</ul>
</div>
<span class="a">
<img src="car.png"><a href="#" style="color: black">购物车</a>
</span>
<div class="ik">
<ul>
<li> <div class="hn">全部商品分类</div></li>
<li class="jj">首页</li>
<li class="jj">自营超市</li>
<li><a href="#" > 1号团</a></li>
<li><a href="#">1号超市</a></li>
<li><a href="#">女装</a></li>
<li><a href="#">美妆</a></li>
<li><a href="#">1号海购</a></li>
<li><a href="#">团购</a></li>
</ul>
<img class="um" src="phone.png" >
</div>
<ul class="vb">
<li>所有团购 > 包饰 > 珠韵首饰</li> <li class="jj">冰韵 天然白色正圆S925银扣珍珠项链</li>
</ul>
<div class="one">
<img src="p_big.jpg" width="390" height="390">
</div>
<div class="two">
<span id="vc">珠韵首饰 冰韵 天然白色正圆S925银扣珍珠项链</span><br/>
<span id="cv">全国包邮 送妈妈，正圆级淡水珍珠，白色S925银链扣，使用方便，尊贵礼物。</span>
<p></p>
<p><span class="jiage">本店价格：</span><span class="jia">¥1786</span></p>
<p><span class="jiage">参考价：¥3886</span></p>
<p class="jiage">尺码：</p>
<ul>
<li class="lo">
<div id="bn">
43cm
</div>
</li>
<div class="jm"></div>
<li><div class="bn">
45cm
</div></li>
<li><div class="nn">
50cm
</div></li>
</ul>
<p class="jiage">颜色选择：</p>
<ul>
<li><div class="on">
粉色
</div></li>
<li >
<div class="cbn">白色</div>
</li>
<div class="jmc"></div>
</ul>
<ul>
<li class="aaza">
<img src="sh.png" > 分享
<a href="#">
<div class="mnc">
<img src="../珠宝项目/sh_1.gif">
<img src="../珠宝项目/sh_2.gif">
<img src="../珠宝项目/sh_3.gif">
<img src="../珠宝项目/sh_4.gif">
<img src="../珠宝项目/sh_5.gif">
</div>
</a>
</li>
<li><img src="heart_h.png" > 关注商品</li>
</ul>
<input type="text" class="zxc">
<input type="button" value="1"class="zxv">
<input type="button" value=""class="zxv1">
<span class="npc"><img src="car.png"></span>
</div>
<div id="zuo"></div>
<div id="fen">
<ul>
<li><img src="p_big.jpg" width="65" height="65"></li>
<li><img src="de5.jpg" width="65" height="65"></li>
<li><img src="mat_2.jpg" width="65" height="65"></li>
<li><img src="mat_3.jpg" width="65" height="65"></li>
</ul>
</div>
<div id="you"></div>
<div class="lm">
<div class="lm1">
<img src="sbrand.jpg" width="188" height="132">
</div>
<div class="lm2">
<a href="#">进入品牌专区</a><img src="sbrand.jpg" >
</div>
</section>
<div id="l1">
<h2>商品详情</h2>
<p><img src="de2.jpg" ></p>
<p><img src="de3.jpg" ></p>
<p><img src="de4.jpg" ></p>
<p><img src="de5.jpg" ></p>
<p><img src="de6.jpg" ></p>
<p><img src="de7.jpg" ></p>
<p><img src="de8.jpg" ></p>
</div>
<div id="nb8">
<ul>
<li><img src="images/b1.png"></li>
<li>正品保障</li>
<li>正品行货 放心购买</li>
</ul>
<ul>
<li><img src="images/b2.png"></li>
<li>满38包邮</li>
<li>满38包邮 免运费</li>
</ul>
<ul>
<li><img src="images/b3.png"></li>
<li>天天低价</li>
<li>天天低价 畅选无忧</li>
</ul>
<ul>
<li><img src="images/b4.png"></li>
<li>准时送达</li>
<li>收货时间由你做主</li>
</ul>
</div>
<div id="nb9">
<dl>
<dt><a href="#">新手上路</a> </dt>
<dd><a href="#">售后流程</a></dd>
<dd><a href="#">购物流程</a></dd>
<dd><a href="#">订购方式</a></dd>
<dd><a href="#">隐私声明</a></dd>
<dd><a href="#">推荐分享说明</a></dd>
</dl>
<dl>
<dt><a href="#">配送与支付</a> </dt>
<dd><a href="#">货到付款区域</a></dd>
<dd><a href="#">配送支付查询</a></dd>
<dd><a href="#">支付方式说明</a></dd>
</dl>
<dl>
<dt><a href="#">会员中心</a> </dt>
<dd><a href="#">资金管理</a></dd>
<dd><a href="#">我的收藏</a></dd>
<dd><a href="#">我的订单</a></dd>
</dl>
<dl>
<dt><a href="#">服务保证</a> </dt>
<dd><a href="#">退换货原则</a></dd>
<dd><a href="#">售后服务保证</a></dd>
<dd><a href="#">产品质量保证</a></dd>
</dl>
<dl>
<dt><a href="#">联系我们</a> </dt>
<dd><a href="#">网站故障报告</a></dd>
<dd><a href="#">购物咨询</a></dd>
<dd><a href="#">投诉与建议</a></dd>
</dl>
<div class="las">
<img src="images/er.gif" >
<ul>
<li><img src="images/b_sh_1.png"><a href="#">新浪微博</a> </li>
<li><img src="images/b_sh_2.png"><a href="#">腾讯微博</a> </li>
<li><p>服务热线：</p></li>
<li><span>400-123-4567</span></li>
</ul>
<img src="images/ss.png">
</div>
</div>
</section>
<footer>
<div id="sb">
<p>备案/许可证编号：蜀ICP备12009302号-1-www.dingguagua.com Copyright© 1号店网
上超市 2007-2016，All Rights Reserved. 复制必究 , Technical Support: Dgg
Group</p>
<ul>
<li><img src="images/b_1.gif"></li>
<li><img src="images/b_2.gif"></li>
<li><img src="images/b_3.gif"></li>
<li><img src="images/b_4.gif"></li>
<li><img src="b_5.gif"></li>
<li><img src="b_6.gif"></li>
</ul>
</div>
</footer>
</body>
