HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>我的购物车 - 京东商城 </title>
<link rel="icon" type="image/x-icon" href="img/1.ico"/>
<link rel="stylesheet" type="text/css" href="css/购物车.css"/>
</head>
<body>
<!--网页顶部-->
<div id="header">
<a href="" class="header-1">京东首页</a>
<a href="" class="header-2">四川</a>
<a href="" class="header-3">七一欧</a>
<img src="img/19.png" class="header-3-p"/>|
<a href="" class="header-4">我的订单</a>|
<a href="" class="header-5">我的京东</a>|
<a href="" class="header-6">京东会员</a>|
<a href="" class="header-7">企业采购</a>|
<a href="" class="header-8">客户服务</a>|
<a href="" class="header-9">网站导航</a>|
<a href="" class="header-10">手机京东</a>
</div>
<!--网页中部-->
<div id="content">
<div class="content-1">
<a href=""><img class="dog1" src="img/dog.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>
<!--网页底部-->
<div id="footer">
<div class="footer-top">
<img src="img/14.png" class="p1"/>
<p class="t1">品类齐全，轻松购物</p>
<img src="img/13.png" class="p2"/>
<p class="t2">多仓直发，极速配送</p>
<img src="img/12.png" class="p3"/>
<p class="t3">正品行货，精致服务</p>
<img src="img/11.png" class="p4"/>
<p class="t4">天天低价，畅选无忧</p>
</div>
<div class="footer-mid">
<div class="footer-mid-d1">
<p>购物指南</p>
<a href="">购物流程</a><br />
<a href="">会员介绍</a><br />
<a href="">生活旅行/团购</a><br />
<a href="">常见问题</a><br />
<a href="">大家电</a><br />
<a href="">联系客服</a><br />
</div>
<div class="footer-mid-d2">
<p>配送方式</p>
<a href="">上门自提</a><br />
<a href="">211限时达</a><br />
<a href="">配送服务查询</a><br />
<a href="">配送费收取标准</a><br />
<a href="">海外配送</a><br />
</div>
<div class="footer-mid-d3">
<p>支付方式</p>
<a href="">货到付款</a><br />
<a href="">在线支付</a><br />
<a href="">分期付款</a><br />
<a href="">邮局汇款</a><br />
<a href="">公司转账</a><br />
</div>
<div class="footer-mid-d4">
<p>售后服务</p>
<a href="">售后政策</a><br />
<a href="">价格保护</a><br />
<a href="">退款说明</a><br />
<a href="">返修/退换货</a><br />
<a href="">取消订单</a><br />
</div>
<div class="footer-mid-d5">
<p>特色服务</p>
<a href="">夺宝岛</a><br />
<a href="">DIY装机</a><br />
<a href="">延保服务</a><br />
<a href="">京东E卡</a><br />
<a href="">京东通信</a><br />
<a href="">京东JD+</a><br />
</div>
</div>
<div class="footer-bottom">
<div class="footer-bottom-1">
<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="">京东公益</a>|
<a href="">English Site</a>|
<a href="">Media & IR</a>
</div>
<div class="footer-bottom-2">
<p class="footer-bottom-2-1">
<a href="">京公网安备 11000002000088号</a> |
<span id="">京ICP证070359号</span> |
<a href="">互联网药品信息服务资格证编号(京)-经营性-2014-0008</a> |
<span id="">新出发京零 字第大120007号</span>
</p>
<p class="footer-bottom-2-2">
<span>互联网出版许可证编号新出网证(京)字150号</span> |
<a href="">出版物经营许可证</a> |
<a href="">网络文化经营许可证京网文[2014]2148-348号</a> |
<span>违法和不良信息举报电话：4006561155</span>
</p>
<p class="footer-bottom-2-3">
<span>Copyright © 2004 - 2018 京东JD.com 版权所有</span> |
<span>消费者维权热线：4006067733</span>
<a href="">经营证照</a> |
<span>(京)网械平台备字(2018)第00003号</span>
</p>
<p class="footer-bottom-2-4">
<img src="img/10.jpg"/>
<a href="">Global Site</a> |
<img src="img/9.png"/>
<a href="">Сайт России</a> |
<img src="img/8.png"/>
<a href="">Situs Indonesia</a> |
<img src="img/7.jpg"/>
<a href="">Sitio de España</a> |
</p>
<p class="footer-bottom-2-5">
<span id="">京东旗下网站：</span>
<a href="">京东钱包</a>
<a href="">京东云</a>
</p>
</div>
<div class="footer-bottom-3">
<a href=""><img src="img/22.png"/></a>
<a href=""><img src="img/23.png"/></a>
<a href=""><img src="img/24.png"/></a>
<a href=""><img src="img/25.png"/></a>
<a href=""><img src="img/26.png"/></a>
<a href=""><img src="img/27.png"/></a>
</div>
</div>
</div>
</body>
</html>
CSS代码
*{
padding: 0;
margin: 0;
}
a{
text-decoration: none;
}
/*------header----------*/
#header{
width: 100%;
height: 30px;
background-color: rgb(227,228,229);
line-height: 30px;
color: rgb(204,204,204);
}
#header a{
color: rgb(153,153,153);
font-size: 12px;
}
#header a:hover{
color: red;
text-decoration: underline;
}
#header .header-1{
position: relative;
background: url(../img/21.jpg) no-repeat 180px 0px;
padding-left: 200px;
}
#header .header-2{
position: relative;
background:url(../img/20.jpg) no-repeat 0 0px;
padding-left:15px ;
}
#header .header-3{
position: relative;
padding-left:155px;
}
#header .header-3-p{
position: relative;
top: 5px;
padding-right: 10px;
}
#header .header-4,#header .header-5,#header .header-6,#header .header-7,#header .header-8,#header .header-9,#header .header-10{
margin-left: 20px;
margin-right: 20px;
}
/*------content----------*/
#content{
width: 100%;
height: 700px;
background-color: rgb(255,255,255);
}
#content .content-1{
position: relative;
height: 145px;
background-color: rgb(255,255,255);
}
#content .content-1 .dog1{
margin-left: 180px;
margin-top:24px;
}
#content .content-1 .input1{
margin-left: 528px;
height: 25px;
width: 269px;
border:2px solid rgb(201,22,35);
outline: none;
}
#content .content-1 button{
position: relative;
height: 29px;
width: 50px;
color: rgb(255,255,255);
background-color: rgb(201,22,35);
right: 4px;
top: 1px;
border: 4px solid rgb(201,22,35);
}
#content .content-1 .a3{
position: absolute;
left: 180px;
bottom: 10px;
color: red;
font-size: 20px;
}
#content .content-1 .a4{
position: absolute;
bottom: 10px;
left: 288px;
color: black;
font-size: 20px;
}
#content .content-1 .a3:hover{
color: red;
text-decoration: underline;
}
#content .content-1 .a4:hover{
color: red;
}
#content .content-1 span{
position: absolute;
left: 982px;
bottom: 10px;
font-size: 12px;
}
#content .content-1 select{
position: absolute;
bottom: 10px;
left: 1040px;
font-size: ;
}
/*------footer----------*/
#footer{
width: 100%;
height: 540px;
background-color: rgb(234,234,234);
}
/*第三部分的上部*/
#footer .footer-top{
height: 105px;
border-bottom: 1px solid rgb(222,222,222);
text-align: center;
line-height: 105px;
}
#footer .footer-top p,#footer .footer-top img{
display: inline;
font-size: 18px;
font-weight: bold;
}
#footer .footer-top img{
margin-left: 10px;
position: relative;
top: 14px;
}
/*第三部分的中部*/
#footer .footer-mid{
height: 205px;
border-bottom: 1px solid rgb(222,222,222);
text-align: center;
}
#footer .footer-mid a{
color: rgb(102,102,102);
font-size: 12px;
}
#footer .footer-mid a:hover{
color: red;
text-decoration: underline;
}
#footer .footer-mid p{
margin-bottom: 5px;
font-size: 15px;
font-weight: bold;
color: rgb(119,119,119);
}
#footer .footer-mid div{
float: left;
width: 202px;
margin-top: 25px;
text-align: left;
}
#footer .footer-mid .footer-mid-d1{
margin-left: 245px;
}
/*第三部分的下部*/
#footer .footer-bottom{
height: 230px;
}
#footer .footer-bottom-1{
height: 50px;
text-align: center;
color: rgb(217,209,204);
line-height: 50px;
}
#footer .footer-bottom-1 a{
display: inline;
margin: 2px;
font-size: 12px;
color:rgb(102,102,102) ;
}
#footer .footer-bottom-1 a:hover{
color: red;
text-decoration: underline;
}
#footer .footer-bottom-2{
height: 100px;
color: rgb(153,153,153);
font-size: 12px;
text-align: center;
margin: 4px;
}
#footer .footer-bottom-2 a{
color: rgb(153,153,153);
margin: 2px;
}
#footer .footer-bottom-2 a:hover{
color: red;
text-decoration: underline;
}
#footer .footer-bottom-2 p{
margin: 5px;
}
#footer .footer-bottom-2 span{
margin: 2px;
}
#footer .footer-bottom-3{
height: 80px;
text-align: center;
margin: 15px;
}
