gouwuche.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的购物车-京东商城</title>
<link rel="icon" type="image/png" href="img/image/1.png"/>
<link rel="stylesheet" type="text/css" href="css/gouwuche.css"/>
</head>
<body>
<!--第一块-->
<div class="first">
<img class="p21" src="img/image/21.jpg"/>
<a class="a1" href="">京东首页</a>
<button class="b1"><img src="img/image/20.jpg"/>
<a href="">北京</a></button>
<button><a href="">儒雅的张董</a>
<img src="img/image/19.png"/></button> |
<a class="a2" href="">我的订单</a> |
<button><a href="">我的京东</a></button> |
<a class="a2" href="">京东会员</a> |
<button class="a2"><a href="">企业采购</a></button> |
<button ><a class="a2" href="">客户服务</a></button> |
<button class="a2"><a href="">网站导航</a></button> |
<a class="a2" href="">手机京东</a>
</div>
<!--<div class="first-top"></div>-->
<!--第二块-->
<div class="second">
<a href=""><img class="dog1" src="img/image/dog1.png"/></a>
<input class="input1" type="txt" name="message" id="" value="" placeholder="自营" />
<a href=""><button>搜索</button></a>
<a class="a3" href="">全部商品1</a>
<a class="a4" href="">京东大药房</a>
<span>配送至：</span>
<select name="address">
<option value="beijing">北京朝阳区三环以内</option>
</select>
</div>
<!--第三块-->
<div class="third"></div>
<!--第四块-->
<div class="fourth">
<div class="d0" >
<a href=""><img src="img/image/18.jpg"/></a>
<a class="word2" href="">乐事（Lay’s）无限薯片 休闲零食 104g*3组合装（原味+烤肉+番茄）百</a>
<p>￥28.80</p>
<input class="input2" type="submit" name="" id="" value="加入购物车" />
<!--<button class="butt1"><!--<a href=""><img src="img/image/t1.png"/>--><!--</a></button>-->
</div>
<div class="d1">
<a href=""><img src="img/image/t3.jpg"/></a>
<a class="word2" href="">德国DMK进口牛奶 欧德堡（Oldenburger）超高温处理全脂纯牛奶1L*12盒</a>
<p>￥50.30</p>
<input type="submit" name="" id="" value="加入购物车" />
<!--<button class="butt2"><!--<img src="img/image/che.png"/><span>购物车</span>--><!--</button>-->
</div>
<div class="d1">
<a href=""><img src="img/image/17.jpg"/></a>
<a class="word2" href="">科尔沁 休闲肉脯零食 内蒙古特产 手撕风干牛肉干孜然味400g</a>
<p>￥18.56</p>
<input type="submit" name="" id="" value="加入购物车" />
<!--<button class="butt3"><!--<img src="img/image/che.png"/><span>购物车</span>--><!--</button>-->
</div>
<div class="d1">
<a href=""><img src="img/image/t4.jpg"/></a>
<a class="word2" href="">TP-LINK TL-WR886N 450M无线路由器（宝蓝） 智能路由 WIFI无线穿墙</a>
<p>￥78.80</p>
<input type="submit" name="" id="" value="加入购物车" />
<!--<button class="butt4"><!--<img src="img/image/che.png"/><span>购物车</span>--><!--</button>-->
</div>
</div>
<!--第五块-->
<div class="fifth">
<img src="img/image/14.png"/ class="p14" >
<p class="p1">品类齐全，轻松购物</p>
<img src="img/image/13.png"/>
<p>多仓直发，极速配送</p>
<img src="img/image/12.png"/>
<p>正品行货，精致服务</p>
<img src="img/image/11.png"/>
<p>天天低价，畅选无忧</p>
</div>
<hr />
<!--第六块-->
<div class="sixrh">
<div class="div1">
<p class="sp">购物指南</p>
<a href=""><span >购物流程</span></a><br />
<a href=""><span >会员介绍</span></a><br />
<a href=""><span >生活旅行/团购</span></a><br />
<a href=""><span >常见问题</span></a><br />
<a href=""><span >大家电</span></a><br />
<a href=""><span >联系客服</span></a>
</div>
<div>
<p class="sp">配送方式</p>
<a href=""><span >上门自提</span></a><br />
<a href=""><span >211限时达</span></a><br />
<a href=""><span >配送服务查询</span></a><br />
<a href=""><span >配送费收取标准</span></a><br />
<a href=""><span >海外配送</span></a>
<a href=""></div>
<div>
<p class="sp">支付方式</p>
<a href=""><span >货到付款</span></a><br />
<a href=""><span>在线支付</span></a><br />
<a href=""><span>分期付款</span></a><br />
<a href=""><span>邮局汇款</span></a><br />
<a href=""><span>公司转账</span></a>
</div>
<div>
<p class="sp">售后服务</p>
<a href=""><span>售后政策</span></a><br />
<a href=""><span>价格保护</span></a><br />
<a href=""><span>退款说明</span></a><br />
<a href=""><span>返修/退换货</span></a><br />
<a href=""><span>取消订单</span></a>
<a href=""></div>
<div>
<p class="sp">特色服务</p>
<a href=""><span >夺宝岛</span></a><br />
<a href=""><span >DIY装机</span></a><br />
<a href=""><span>延保服务</span></a><br />
<a href=""><span>京东E卡</span></a><br />
<a href=""><span>京东通信</span></a><br />
<a href=""><span >京东JD+</span></a>
</div>
</div>
<!--第七块-->
<div class="seventh">
<div class="div2">
<a class="guan" href=""><span>关于我们</span></a>|
<a href="">联系我们</a>|
<a href="">联系客服</a>|
<a href="">合作招商</a>|
<a href="">商家帮助</a>|
<a href="">营销中心</a>|
<a href="">手机京东</a>|
<a href="">友情链接</a>|
<a href="">销售联盟</a>|
<a href="">京东社区</a>|
<a href="">风险监测</a>|
<a href="">隐私政策</a>|
<a href="">京东公益</a>|
<a href="">English Site</a>|
<a href="">Media & IR</a>
</div>
<div class="div3">
<a href="">京公网安备 11000002000088号 |</a>
<p>京ICP证070359号 |</p>
<a href=""> 互联网药品信息服务资格证编号(京)-经营性-2014-0008 |</a>
<p>新出发京零 字第大120007号</p>
</div>
<div class="div4">
<p>互联网出版许可证编号新出网证(京)字150号 |</p>
<a href=""> 出版物经营许可证 |</a>
<a href=""> 网络文化经营许可证京网文[2014]2148-348号 |</a>
<p>违法和不良信息举报电话：4006561155</p>
</div>
<p class="space">Copyright © 2004 - 2018 京东JD.com 版权所有 | 消费者维权热线：4006067733 经营证照 | (京)网械平台备字(2018)第00003号</p>
<div class="div5">
<img class="p10" src="img/image/10.jpg"/> © <a href="">Global Site</a>
<img src="img/image/9.png"/><a href="">Сайт России</a>
<img src="img/image/8.png"/><a href="">Situs Indonesia</a>
<img src="img/image/7.jpg"/><a href="">Sitio de España</a>
</div>
<div class="div6">
<p>京东旗下网站： <a href="">京东钱包 |<a href="">京东云</a></a></p>
</div>
<div class="div7">
<a href=""><img class="p6" src="img/image/6.jpg"/></a>
<a href="" class="button">经营性网站备案信息</a>
<a href=""><img src="img/image/5.jpg"/></a>
<a href="" class="button">可信网站信用评价</a>
<a href=""><img src="img/image/4.jpg"/></a>
<a href="" class="button">网络警察提醒您</a>
<a href=""><img src="img/image/t2.jpg"/></a>
<a href="" class="button">诚信网站 </a>
<a href=""><img src="img/image/3.jpg"/></a>
<a href="" class="button">中国互联网举报中心</a>
<a href=""><img src="img/image/2.jpg"/></a>
<a href="" class="button">网络举报APP下载</a>
</div>
</div>
</body>
</html>
gouwuche.css
*{
padding: 0;
margin: 0;
}
a{
text-decoration: none;
}
.first{
position: relative;
/*text-align: center;*/
height: 32px;
background-color: rgb(227,228,229);
}
.first a{
display: inline-block;
font-size: 12px;
color: black;
}
.first a:hover{
color: red;
}
.first .p21{
position: absolute;
left:180px;
height: 32px;
line-height: 32px;
}
.first .a1{
margin-left: 220px;
margin-right: 15px;
}
/*.first .first-top{
float: left;
width: 600px;
background-color: burlywood;*/
.first .b1{
margin-right: 168px;
}
.first .a2{
margin-left: 5px;
margin-right: 5px;
}
.first button{
height: 32px;
line-height: 32px;
outline: none;
border: 0;
background-color: rgb(227,228,229);
/*border: 0;*/
/*background-color: rgba(0,0,0,0);*/
}
.first button:hover{
background-color: rgb(255,255,255);
}
.second{
position: relative;
height: 145px;
background-color: rgb(255,255,255);
/*background: url(../img/image/dog1.png) no-repeat 180px 24px ;*/
}
.second .dog1{
margin-left: 180px;
margin-top:24px;
}
.second .input1{
margin-left: 454px;
height: 25px;
width: 269px;
border: 2px solid;
border-color: rgb(201,22,35);
outline: none;
/*border: 0;*/
}
.second button{
position: absolute;
height: 30px;
width: 52px;
border: 0;
background-color: rgb(201,22,35);
margin-right: 150px;
top: 68px;
right: 18px;
}
.second .a3{
position: absolute;
left: 180px;
bottom: 10px;
color: red;
font-size: 20px;
}
.second .a4{
position: absolute;
bottom: 10px;
left: 288px;
color: black;
font-size: 20px;
}
.second .a3:hover{
color: red;
text-decoration: underline;
}
.second .a4:hover{
color: red;
}
.second span{
position: absolute;
left: 982px;
bottom: 10px;
font-size: 12px;
}
.second select{
position: absolute;
bottom: 10px;
left: 1040px;
font-size: ;
}
.third{
height:278px;
background-color: green;
}
.fourth{
position: relative;
height: 382px;
background-color: white;
}
.fourth .d0{
/*position: absolute;*/
text-align: center;
float: left;
width: 240px;
height: 300px;
background-color: white;
border: 1px dashed rgb(202,202,202);
margin-left: 180px;
}
.fourth .d0:hover{
border: 1px solid red;
}
.fourth .d1{
text-align: center;
float: left;
width: 248px;
height: 300px;
background-color: white;
border: 1px dashed rgb(202,202,202);
}
.fourth .d1:hover{
border: 1px solid red;
}
.fourth img{
margin-top: 40px;
margin-left: 50px;
margin-right: 120px;
}
.fourth .d0 a,.fourth .d1 a{
color: black;
font-size: 15px;
/*position: absolute;
bottom: 20px;*/
/*text-align: center;*/
}
.fourth .d0 .input2{
width: 126px;
height: 32px;
background: url(../img/image/che.png) no-repeat;
}
.fourth .d1 input{
width: 126px;
height: 32px;
background: url(../img/image/che.png) no-repeat;
}
.fourth .d0 .input2:hover,.fourth .d1 input:hover{
background-color: red;
}
.fourth .d0 .word2,.fourth .d1 .word2{
font-size: 12px;
}
.fourth p{
color: red;
font-size: 12px;
}
.fifth{
position: relative;
height: 102px;
background-color: rgb(234,234,234);
}
.fifth .p14{
left: 180px;
margin-right: 10px;
}
.fifth p{
height: 102px;
display: inline-block;
line-height: 102px;
margin-left: 50px;
margin-right: 15px;
font-size: 20px;
font-weight: 600;
color: rgb(68,68,68);
}
.fifth .p1{
margin-left: 225px;
font-size: 20px;
font-weight: 600;
color: rgb(68,68,68);
}
.fifth img{
position: absolute;
top: 31px;
margin-right: 30px;
}
.sixrh{
height: 202px;
background-color: rgb(234,234,234);
}
/*.sixrh p{
float: left;
margin-left: 50px;
margin-right: 50px;
}*/
.sixrh .div1{
width: 210px;
height: 204px;
background-color: rgb(234,234,234);
margin-left: 237px;
}
.sixrh div{
float: left;
width: 210px;
height: 204px;
background-color: rgb(234,234,234);
}
.sixrh .sp{
margin-top: 22px;
font-size: 15px;
font-weight: 300;
color:black;
}
.sixrh span{
font-size: 12px;
font-weight: 200;
margin-top: 5px;
margin-bottom: 5px;
color:black;
/*display: block;*/
}
.sixrh .sp:hover{
color: black;
}
.sixrh span:hover{
color: red;
}
/*.sixrh .sp1{
display: block;
margin-left: 180px;
}*/
.seventh{
position: relative;
height: 242px;
background-color: rgb(234,234,234);
}
.seventh .guan{
margin-left: 180px;
margin-right: 5px;
/*margin-top: 50px;*/
}
.seventh a{
/*margin-top: 50px;*/
margin-left: 3px;
margin-right: 5px;
text-align: center;
font-size: 12px;
color: black;
font-weight: 300;
/*top: 200px;*/
}
.seventh a:hover{
color: red;
}
.seventh span{
margin-top: 50px;
}
.seventh .div2{
position: absolute;
top:21px;
}
.seventh .div3{
position: absolute;
top: 55px;
margin-left: 297px;
}
.seventh .div3 a,.seventh .div3 p{
float: left;
font-size: 12px;
font-weight: 300;
}
.seventh .div4{
position: absolute;
top: 80px;
margin-left:259px ;
}
.seventh .div4 a,.seventh .div4 p{
float: left;
font-size: 12px;
font-weight: 300;
}
.seventh .space{
position: absolute ;
top: 101px;
margin-left: 320px;
font-size: 12px;
font-weight: 300;
/*text-align: center;*/
}
.seventh .div5{
position: absolute;
top: 120px;
left: 451px;
}
.seventh .p10{
position: absolute;
top: 4px;
}
.seventh .div6{
position: absolute;
top: 145px;
left: 576px;
display: block;
}
.seventh .div6 p{
font-size: 12px;
font-weight: 300;
}
.seventh .div7{
position: absolute;
bottom: 20px;
left: 342px;
}
.seventh .div7 .button{
width: 75px;
height: 32px;
font-size: 15px;
/*margin-left: 5px;*/
margin-right: 10px;
margin-left: 17px;
outline: none;
border: 0;
background-color: rgb(234,234,234);
}
.seventh .div7 .button:hover{
color: black;
}
.seventh .div7 .p6{
position: absolute;
left: 0px;
margin-right: 81px;
}
.seventh .div7 img{
position: absolute;
bottom: 0px;
/*left: 200px;*/
}
