學(xué)習(xí)前端時(shí)間不多,看了兩晚上就開(kāi)始趕實(shí)訓(xùn)作業(yè),大家看看就行
先來(lái)看看效果:
?
?文章來(lái)源:http://www.zghlxwxcb.cn/news/detail-504541.html
?
?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>京東</title>
<style>
*{
/* margin: 0px auto; */
padding: 0px;
list-style: none;
text-decoration: none
}
.clear::after{
content: "";
display: block;
clear: both;
}
.top{
width: 1580px;
/* border: 2px solid red; */
background-color: #e5e3e5;
}
.top_left{
width: 40px;
/* border: 2px solid rgb(255, 81, 0); */
display:inline;
float: left;
padding-left:100px;
}
.top_left .one {
display: none;
/* border: 2px solid rgb(253, 17, 0); */
position: absolute;
}
.top_left:hover .one{
display: block;
background-color:#e3e4e5;
}
.top_right{
/* border: 2px solid blue; */
border: 0px,0px,0px,0px;
float: right;
padding-right:100px;
display:inline;
}
.ul1 .li1{
float: left;
width: 100px;
position: relative;
}
.ul1 .one{
display: none;
position: absolute;
}
.li1:hover .one{
display: block;
background-color:#e3e4e5;
}
.bottom{
width: 1580px;
height: 180px;
background-color: rgb(255, 255, 255);
}
.bottom .bottom_left{
float: left;
/* border: 2px solid blue; */
padding-top:50px;
padding-left:180px;
}
.bottom .bottom_middle{
/* border: 2px solid blue; */
float: left;
padding-top:40px;
/* padding-left:150px; */
padding-right:200px;
}
.bottom .bottom_right{
float: left;
/* border: 2px solid blue; */
padding-top:50px;
padding-right:100px;
}
/* 外邊距 margin */
/* 內(nèi)邊距 padding */
.bottom_middle input{
width:454px;
height:32px;
border:2px solid #c62020;
padding-left: 4px;
color:rgb(104, 103, 103);
font:14px/32px "microsoft yahei";
float:left;
}
.bottom_middle button{
width:80px;
height:35px;
background-color:#e1251b;
float:left;
font:16px/36px "microsoft yahei";
color:#fff;
cursor:pointer;
}
.bottom_middle .button1{
width:150px;
height:35px;
background-color:#ffffff;
float:left;
font:16px/36px "microsoft yahei";
color:#e1251b;
cursor:pointer;
}
.bottom .bottom_middle .bottom_middle_1{
/* border: 2px solid rgb(255, 0, 0); */
margin-left: 80px;
}
.bottom .bottom_middle .bottom_middle_2{
border: 2px solid rgb(255, 255, 255);
margin-top: 20px;
margin-left: 80px;
}
.bottom_middle_2_1{
font:16px/36px "microsoft yahei";
color:#999999;
}
.bottom .bottom_middle .bottom_middle_3{
/* border: 2px solid rgba(0, 0, 0, 0.396); */
margin-left: 60px;
padding-top: 0px;
}
section{
background-color: #f4f4f4;
padding-top: 12px;
width: 1580px;
height: 580px;
/* border: 2px solid blue; */
}
section .div2{
background-color: rgb(255, 255, 255);
margin-left: 120px;
padding-left: 10px;
width: 200px;
height: 580px;
/* border: 2px solid blue; */
float: left;
}
section .div3{
width: 650px;
height: 580px;
/* border: 2px solid blue; */
margin-left: 5px;
margin-right: 5px;
float: left;
}
section .div4{
width: 200px;
height: 580px;
/* border: 2px solid blue; */
float: left;
}
section .div4 .div4-1{
margin-bottom: 3px;
}
section .div4 .div4-2{
margin-bottom: 3px;
}
section .div5{
width: 240px;
height: 580px;
background-color: rgb(255, 255, 255);
margin-left: 5px;
/* border: 2px solid blue; */
float: left;
}
section .div5 .div5-3{
/* border: 2px solid blue; */
display: inline-block;
}
section .div5 .div5-4{
/* border: 2px solid blue; */
display: inline-block;
}
section .div5 .div5-4 .table1{
border-spacing: 24px 0px;
}
.r_top_banner {
height:115px;
border-bottom:1px solid #ccc;
}
.r_top_banner .top_user {
padding-top:15px;
padding-left:10px;
}
.r_top_banner .top_user img {
width:45px;
height:45px;
border-radius:25px;
}
.r_top_banner .top_user a{
float:left;
}
.r_top_banner .top_user .userinfo {
float:left;
margin-left:15px;
line-height:20px;
}
.r_top_banner .userinfo a {
margin-right:5px;
}
.bot_btns {
padding-left:10px;
padding-top:15px;
}
.bot_btns a {
width:80px;
height:20px;
border:2px solid red;
display:block;
float:left;
text-align:center;
line-height:20px;
margin-right:10px;
}
/* 外邊距 margin */
/* 內(nèi)邊距 padding */
footer{
background-color: #f4f4f4;
padding-top: 12px;
width: 1580px;
height: 700px;
/* border: 2px solid blue; */
}
.footer_1{
/* border: 2px solid blue; */
width: 1580px;
height: 350px;
}
.footer_1_1{
/* border: 2px solid blue; */
margin-left: 115px;
width: 215px;
float: left;
}
.footer_1_2{
/* border: 2px solid blue; */
margin-left: 0px;
width: 850px;
height: 298px;
float: left;
}
.footer_1_3{
/* border: 2px solid blue; */
margin-left: 0px;
width: 242px;
height: 298px;
float: left;
}
.footer_1_4{
/* border: 2px solid blue; */
background-color: #ffffff;
margin-left: 30px;
width: 80px;
height: 330px;
float: left;
}
.footer_1_4_1{
border-spacing: 18px 15px;
}
.footer_2{
/* border: 2px solid blue; */
width: 1580px;
height: 350px;
}
.footer_2_1{
/* border: 2px solid blue; */
margin-left: 115px;
width: 160px;
height: 210px;
float: left;
}
.footer_2_2{
/* border: 2px solid blue; */
margin-left: 65px;
width: 160px;
height: 210px;
float: left;
}
.footer_2_3{
/* border: 2px solid blue; */
margin-left: 65px;
width: 160px;
height: 210px;
float: left;
}
.footer_2_4{
/* border: 2px solid blue; */
margin-left: 65px;
width: 160px;
height: 210px;
float: left;
}
.footer_2_5{
/* border: 2px solid blue; */
margin-left: 65px;
width: 160px;
height: 210px;
float: left;
}
.footer_2_6{
/* border: 2px solid blue; */
margin-left: 65px;
width: 200px;
height: 210px;
float: left;
}
.footer_2_7{
/* border: 2px solid blue; */
margin-left: 115px;
width: 1350px;
height: 130px;
float: left;
}
.footer_2_7_1{
/* border: 2px solid blue; */
margin-left: 80px;
width: 1100px;
height: 50px;
float: left;
}
.footer_2_7_2{
/* border: 2px solid rgb(255, 0, 0); */
margin-left: 20px;
margin-top: 0px;
width:100px;
height: 100px;
float: left;
}
.footer_2_7_3{
/* border: 2px solid rgb(255, 0, 0); */
margin-right: 22px;
margin-top: 0px;
width:120px;
height: 30px;
float: right ;
}
</style>
</head>
<body>
<header>
<div class="top clear">
<div class="top_left ">
<p class="top_left_1"><a href="">甘肅</a></p>
<div class="one">
<ul>
<div class="li5">   北京      上海    天津    重慶    河北</div>
<div class="li5">   山西      河南    遼寧    吉林    黑龍江 </div>
<div class="li5">   內(nèi)蒙古   江蘇    山東    安徽    浙江 </div>
<div class="li5">   福建      湖北    湖南    廣東    廣西 </div>
<div class="li5">   江西      四川    海南    貴州    云南 </div>
<div class="li5">   西藏      陜西    甘肅    青海    寧夏 </div>
<div class="li5">   新疆      港澳    臺(tái)灣    釣魚(yú)島   海外 </div>
</ul>
</div>
</div>
<div class="top_right">
<ul class="ul1 " >
<li class="li1">
<a href="">你好,請(qǐng)登錄 </a>
</li>
<li class="li1">
<a href="">免費(fèi)注冊(cè) |</a>
</li>
<li class="li1">
<a href="">我的京東 |</a>
<div class="one">
<ul>
<li>待處理訂單</li>
<li>我的問(wèn)答</li>
<li>降價(jià)商品</li>
<li>返修退換貨</li>
<li>我的商品</li>
</ul>
</div>
</li>
<li class="li1">
<a href="">京東會(huì)員 |</a>
</li>
<li class="li1">
<a href="">企業(yè)采購(gòu) |</a>
<div class="one">
<ul>
<li>企業(yè)購(gòu)</li>
<li>公共采購(gòu)</li>
<li>工業(yè)品</li>
<li>商用場(chǎng)景館</li>
<li>微信企業(yè)購(gòu)</li>
<li>禮品卡</li>
</ul>
</div>
</li>
<li class="li1">
<a href="">商家服務(wù) |</a>
</li>
<li class="li1">
<a href="">商家服務(wù) |</a>
</li>
<li class="li1">
<a href="">手機(jī)京東 |</a>
</li>
<li class="li1">
<a href="">網(wǎng)站無(wú)障礙</a>
</li>
</ul>
</div>
</div>
<div class="bottom">
<div class="bottom_left">
<img src="img/logo.png" width="100px" height="100px" alt="logo">
</div>
<div class="bottom_middle">
<div class="bottom_middle_1">
<input type="text" value="圖書(shū)開(kāi)搶">
<button>搜索 </button>
<button class="button1" style="margin-left:30px;"><img src="img/gwc.png" width="30px" height="20px">我的購(gòu)物車(chē)</button>
</div>
<div class="bottom_middle_2">
<p class="bottom_middle_2_1">100減99 一加手機(jī) 京東京造 健康服務(wù) 鎮(zhèn)店電腦 加氛生活 三星盛典 </p>
</div>
<!-- <br> -->
<div class="bottom_middle_3">
<p>京東超市     優(yōu)惠劵     秒殺     京東家電     京東生鮮     PLUS會(huì)員     進(jìn)口好物     品牌閃購(gòu)     拍賣(mài)     京東五金城</p>
</div>
</div>
<div class="bottom_right">
<img src="img/jingdong.png" width="100px" height="100px" alt="京東網(wǎng)站二維碼">
</div>
</div>
</header>
<section >
<div class="div2">
<ul class="ul4">
<li class="li4" style="margin-bottom:10px;"><a href="">家用電器</a></li>
<li class="li4" style="margin-bottom:10px;">手機(jī)/運(yùn)營(yíng)商/數(shù)碼</li>
<li class="li4" style="margin-bottom:10px;">電腦/辦公</li>
<li class="li4" style="margin-bottom:10px;">家居/家具/家裝/廚具</li>
<li class="li4" style="margin-bottom:10px;">男裝/女裝/童裝/內(nèi)衣</li>
<li class="li4" style="margin-bottom:10px;">美妝/個(gè)護(hù)/清潔/寵物</li>
<li class="li4" style="margin-bottom:10px;">女鞋/箱包/鐘表/珠寶</li>
<li class="li4" style="margin-bottom:10px;">男鞋/運(yùn)動(dòng)/戶外</li>
<li class="li4" style="margin-bottom:10px;">房產(chǎn)/汽車(chē)/汽車(chē)用品</li>
<li class="li4" style="margin-bottom:10px;">母嬰/玩具樂(lè)器</li>
<li class="li4" style="margin-bottom:10px;">食品/酒類(lèi)/生鮮/特產(chǎn)</li>
<li class="li4" style="margin-bottom:10px;">藝術(shù)/禮品鮮花/農(nóng)資綠植</li>
<li class="li4" style="margin-bottom:10px;">醫(yī)療保健/計(jì)生用品</li>
<li class="li4" style="margin-bottom:10px;">圖書(shū)/文娛/教育/電子書(shū)</li>
<li class="li4" style="margin-bottom:10px;">機(jī)票/酒店/旅游/生活</li>
<li class="li4" style="margin-bottom:10px;">眾籌/白條/保險(xiǎn)/企業(yè)金融</li>
<li class="li4" style="margin-bottom:10px;">安裝/維修/清洗/二手</li>
<li>工業(yè)品</li>
</ul>
</div>
<div class="div3">
<img src="img/zhu.png" width="650px" height="580px" alt="logo">
</div>
<div class="div4">
<div class="div4-1"><img src="img/4-1.png" width="200px" height="188px" alt="圖片4-1"></div>
<div class="div4-2"><img src="img/4-2.jpg" width="200px" height="188px"alt="圖片4-2"></div>
<div class="div4-3"><img src="img/4-3.png" width="200px" height=" 188px"alt="圖片4-3"></div>
</div>
<div class="div5">
<div class="div5-1">
<!-- <img src="img/5-1.png" width="240px" height="150px" alt="圖片5-1"> -->
<div class="r_top_banner">
<div class="top_user clearfix">
<a href="#">
<img src="img/no_login.png">
</a>
<div class="userinfo">
<p class="p1">hi~歡迎逛京東!</p>
<p class="p2">
<a href="#">登入</a>
<a href="#">注冊(cè)</a>
</p>
</div>
</div>
<div class="bot_btns">
<a href="#">新人福利</a>
<a href="#">PLUS會(huì)員</a>
</div>
</div>
</div>
<div class="div5-2">
<div5-2-1>
<a href="" style="margin-right: 100px;">京東日?qǐng)?bào)</a>
<a href="">更多></a>
</div5-2-1>
</div>
<div class="div5-3">
<ul>
<li><a href="" style="margin-left: 70px;">360度旋轉(zhuǎn)安全座......</a></li>
<li><a href="" style="margin-left: 70px;">邊拖邊洗,一步到位....</a></li>
<li><a href="" style="margin-left: 70px;">噓!以內(nèi)家用洗衣機(jī)...</a></li>
<li><a href="" style="margin-left: 70px;">精準(zhǔn)避障仿跌落,以...</a></li>
</ul>
</div>
<div class="div5-4">
<table border="0" class="table1">
<tr >
<td><img src="img/禮品卡.png" width="45px" height="45px"alt=""></td>
<td><img src="img/企業(yè)購(gòu).png" width="45px" height="45px" alt=""></td>
<td><img src="img/話費(fèi).png" width="45px" height="45px"alt=""></td>
</tr>
<tr>
<td>禮品卡</td>
<td>企業(yè)購(gòu)</td>
<td> 話費(fèi)</td>
</tr>
<tr>
<td><img src="img/游戲.png" width="45px" height="45px"></td>
<td><img src="img/白條.png" width="45px" height="45px"alt=""></td>
<td><img src="img/加油卡.png" width="45px" height="45px"alt=""></td>
</tr>
<tr>
<td>游戲</td>
<td>白條</td>
<td>加油卡</td>
</tr>
<tr>
<td><img src="img/五金城.png" width="45px" height="45px"alt=""></td>
<td><img src="img/機(jī)票.png" width="45px" height="45px"alt=""></td>
<td><img src="img/火車(chē)票.png" width="45px" height="45px"alt=""></td>
</tr>
<tr>
<td>五金城</td>
<td>機(jī)票</td>
<td>火車(chē)票</td>
</tr>
<tr>
<td><img src="img/電影票.png" width="45px" height="45px"alt=""></td>
<td><img src="img/酒店.png" width="45px" height="45px"alt=""></td>
<td><img src="img/云主機(jī).png" width="45px" height="45px"alt=""></td>
</tr>
<tr>
<td>電影票</td>
<td>酒店</td>
<td>云主機(jī)</td>
</tr>
</table>
</div>
</div>
</section>
<footer>
<div class="footer_1">
<div class="footer_1_1">
<img src="img/京東秒殺.png" width="215px" height="298"alt="">
</div>
<div class="footer_1_2">
<img src="img/商品.png" width="850px" height="298"alt="">
</div>
<div class="footer_1_3">
<img src="img/美妝.png" width="242px" height="298" alt="">
</div>
<div class="footer_1_4">
<table table border="1" class="footer_1_4_1">
<tr>
<td><a href="">京東秒殺</a></td>
</tr>
<tr>
<td><a href="">特色優(yōu)選</a></td>
</tr>
<tr>
<td><a href="">頻道廣場(chǎng)</a></td>
</tr>
<tr>
<td><a href="">為你推薦</a></td>
</tr>
<tr>
<td><a href="">客服</a></td>
</tr>
<tr>
<td><a href="">反饋</a></td>
</tr>
</table>
</div>
</div>
<div class="footer_2">
<div class="footer_2_1">
<ul>
<li>購(gòu)物指南</li>
<br>
<li>購(gòu)物流程</li>
<li>會(huì)員介紹</li>
<li>生活旅行</li>
<li>常見(jiàn)問(wèn)題</li>
<li>大家電</li>
<li>聯(lián)系客服</li>
</ul>
</div>
<div class="footer_2_2">
<ul>
<li>配送方式</li>
<br>
<li>上門(mén)自提</li>
<li>211限時(shí)達(dá)</li>
<li>配送服務(wù)查詢</li>
<li>配送費(fèi)收取標(biāo)準(zhǔn)</li>
</ul>
</div>
<div class="footer_2_3">
<ul>
<li>支付方式</li>
<br>
<li>貨到付款</li>
<li>在線支付</li>
<li>分期付款</li>
<li>公司轉(zhuǎn)賬</li>
</ul>
</div>
<div class="footer_2_4">
<ul>
<li>售后服務(wù)</li>
<br>
<li>售后政策</li>
<li>價(jià)格保護(hù)</li>
<li>退款說(shuō)明</li>
<li>返修\退換貨</li>
<li>取消訂單</li>
</ul>
</div>
<div class="footer_2_5">
<ul>
<li>特色服務(wù)</li>
<br>
<li>奪寶島</li>
<li>DIY裝機(jī)</li>
<li>延保服務(wù)</li>
<li>京東E卡</li>
<li>京東通信</li>
<li>京魚(yú)座智能</li>
</ul>
</div>
<div class="footer_2_6">
<ul>
<li>京東自營(yíng)覆蓋區(qū)縣</li>
<br>
<li>京東已向全國(guó)2661個(gè)區(qū)縣提供自營(yíng)配送服務(wù),支持貨到付款、POS機(jī)刷卡和售后上門(mén)服務(wù)。</li>
</ul>
</div>
<div class="footer_2_7">
<div class="footer_2_7_1">
<p>關(guān)于我們 | 聯(lián)系我們 | 聯(lián)系客服 | 合作招商 | 商家?guī)椭?| 營(yíng)銷(xiāo)中心 | 手機(jī)京東 | 友情鏈接 | 銷(xiāo)售聯(lián)盟 | 京東社區(qū) | 風(fēng)險(xiǎn)監(jiān)測(cè) | 隱私政策 | 京東公益 | Media & IR</p>
</div>
<div class="footer_2_7_2">
<img src="img/公眾號(hào)二維碼.png" width="100px" height="100"alt="">
</div>
<div class="footer_2_7_3">
<p>歡迎關(guān)注作者</p>
</div>
</div>
</div>
</footer>
</body>
</html>
相關(guān)資源可以在主頁(yè)資源查看文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-504541.html
到了這里,關(guān)于HTML+CSS仿寫(xiě)京東頁(yè)面附代碼(web前端大作業(yè))的文章就介紹完了。如果您還想了解更多內(nèi)容,請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!