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>
<!--網(wǎng)頁頂部-->
<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">企業(yè)采購</a>|
<a href="" class="header-8">客戶服務(wù)</a>|
<a href="" class="header-9">網(wǎng)站導(dǎo)航</a>|
<a href="" class="header-10">手機京東</a>
</div>
<!--網(wǎng)頁中部-->
<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">北京朝陽區(qū)三環(huán)以內(nèi)</option>
</select>
</div>
</div>
<!--網(wǎng)頁底部-->
<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">多倉直發(fā)，極速配送</p>
<img src="img/12.png" class="p3"/>
<p class="t3">正品行貨闹司，精致服務(wù)</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="">聯(lián)系客服</a><br />
</div>
<div class="footer-mid-d2">
<p>配送方式</p>
<a href="">上門自提</a><br />
<a href="">211限時達</a><br />
<a href="">配送服務(wù)查詢</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="">公司轉(zhuǎn)賬</a><br />
</div>
<div class="footer-mid-d4">
<p>售后服務(wù)</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>特色服務(wù)</p>
<a href="">奪寶島</a><br />
<a href="">DIY裝機</a><br />
<a href="">延保服務(wù)</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="">關(guān)于我們</a>|
<a href="">聯(lián)系我們</a>|
<a href="">聯(lián)系客服</a>|
<a href="">合作招商</a>|
<a href="">商家?guī)椭?lt;/a>|
<a href="">營銷中心</a>|
<a href="">手機京東</a>|
<a href="">友情鏈接</a>|
<a href="">銷售聯(lián)盟</a>|
<a href="">京東社區(qū)</a>|
<a href="">風險監(jiān)測</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="">京公網(wǎng)安備 11000002000088號</a> |
<span id="">京ICP證070359號</span> |
<a href="">互聯(lián)網(wǎng)藥品信息服務(wù)資格證編號(京)-經(jīng)營性-2014-0008</a> |
<span id="">新出發(fā)京零 字第大120007號</span>
</p>
<p class="footer-bottom-2-2">
<span>互聯(lián)網(wǎng)出版許可證編號新出網(wǎng)證(京)字150號</span> |
<a href="">出版物經(jīng)營許可證</a> |
<a href="">網(wǎng)絡(luò)文化經(jīng)營許可證京網(wǎng)文[2014]2148-348號</a> |
<span>違法和不良信息舉報電話：4006561155</span>
</p>
<p class="footer-bottom-2-3">
<span>Copyright ? 2004 - 2018 京東JD.com 版權(quán)所有</span> |
<span>消費者維權(quán)熱線：4006067733</span>
<a href="">經(jīng)營證照</a> |
<span>(京)網(wǎng)械平臺備字(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="">京東旗下網(wǎng)站：</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;
}
