仿京東商城html網頁原始碼
2021-12-30 23:00:02
文章目錄
上期分享了仿小米商城html網頁原始碼，需要的夥伴點選這裡去學習下載原始碼：仿小米商城html網頁原始碼，本期繼續分享仿京東商城html原始碼，包含HTML，CSS，JavaScript和網頁中用到的圖片。
完整原始碼下載方式：微信搜尋公眾號【IT學長】回覆「京東商城原始碼」免費下載。
1、下載解壓後的結構
下載解壓後結構如下圖：
2、京東商城首頁（index.html）
2.1、首頁–輪播圖
2.2、首頁–商品分類
2.3、首頁–生活的櫥窗
2.4、首頁–家電通訊
2.5、首頁–電腦數碼
2.6、首頁–服飾鞋包
2.7、首頁–美容珠寶
2.8、首頁–傢俱生活
2.9、 首頁–母音玩具
2.10、首頁–食品保健
2.11、首頁–圖書音像
2.12、首頁–foot
2.13、首頁–html原始碼（不含js、css）
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>仿京東商城模板html原始碼_網頁模板_js程式碼</title>
<meta name="keywords" content="仿京東商城模板html原始碼下載" />
<meta name="description" content="仿京東商城模板html原始碼下載" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/global.css" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jsstyle.js"></script>
</head>
<body>
<div id="top">
<div id="top_main">
<ul class="topu">
<li>
<div class="xing"></div> <a href="">收藏京東</a>
</li>
<li class="xuan">
<div class="erwei"></div> <a href="" class="aa">關注京東
<!-- 將二維圖新增進a標籤裡 -->
<div class="erweitu"></div>
</a>
</li>
<li>
<div class="didian"></div> <strong style="padding-left: 20px">北京</strong><a href=""
style="padding-left: 0px">[更換]</a>
</li>
</ul>
<div id="hello">
<span>您好，歡迎來到京東！ <a href="">[登陸]</a><a href="">[免費註冊]</a> </span>
</div>
<div class="topright">
<ul>
<li>
<div class="cun">
<a href="">我的訂單</a>
</div>
</li>
<li>
<div class="cun">
<div class="vip"></div>
<a href="">會員俱樂部</a>
</div>
</li>
<li>
<div class="cun">
<div class="bjd"></div>
<a href="">企業頻道</a>
</div>
</li>
<li class="hidetu">
<div class="cun">
<a href="" class="dong">手機京東</a>
<div class="phonetu"></div>
<div class="downjian11"></div>
</div>
<div class="erwei">
<div class="shoudan"></div>
<div class="jd"></div>
<div class="span1">
<span>京東使用者端</span>
</div>
<div class="apple"></div>
<div class="andr"></div>
<div class="ewtu"></div>
<div class="span1">
<span>網銀錢包使用者端</span>
</div>
<div class="apple"></div>
<div class="andr"></div>
</div>
</li>
<li class="kefu">
<div class="cun">
<div class="a1">
<div class="kefuhide">
<span>客戶服務</span>
<div class="downjian1"></div>
<ul>
<li><a href="">幫助中心</a></li>
<li><a href="">售後服務</a></li>
<li><a href="">線上客服</a></li>
<li><a href="">投訴中心</a></li>
<li><a href="">客服郵箱</a></li>
</ul>
</div>
</div>
</div>
</li>
<li class="wangzhan">
<div class="cun">
<span>網站導航</span>
<div class="downjian1"></div>
</div>
<div class="wangzhanhide">
<div class="tese">
<span>特色欄目</span>
</div>
<div class="tesemain">
<a href="">京東通訊</a>
<a href="">校園之星</a>
<a href="">視訊購物</a>
<a href="">京東社群</a>
<a href="">線上讀書</a>
<a href="">裝機大師</a>
<a href="">京東E卡 </a>
<a href="">家裝城</a>
<a href="">搭配購 </a>
<a href="">我喜歡 </a>
<a href="">遊戲社群</a>
</div>
<div class="tese">
<span>企業服務</span>
</div>
<div class="tesemain1">
<a href="">企業採購</a>
<a href="">辦公直通車</a>
</div>
<div class="tese">
<span>旗下網站</span>
</div>
<div class="tesemain2">
<a href="">English Site</a>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- 搜尋區域開始 -->
<div id="serach">
<div class="logo">
<img src="images/logo.png" alt="" />
<div class="dongtu"></div>
</div>
<div class="sou">
<div class="sousuo">
<input type="text" class="kuang" value="跨界" style="color:#999;font-size:14px" />
<div class="souzi">
<a href="">搜尋</a>
</div>
</div>
<div class="reci">
<span>熱門搜尋:</span>
<a href="" style="color:red">校園之星</a>
<a href="">影院到家</a>
<a href="">JD制暖節</a>
<a href="">腕錶領券</a>
<a href="">自營滿減</a>
<a href="">N3搶購</a>
<a href="">圖書換購</a>
<a href="">12.12</a>
</div>
</div>
<div class="myjd">
<div class="mytu"></div>
<a href="">我的京東</a>
<div class="jiantou"></div>
<div class="myjdhide">
<div class="hello">
<span>您好，請</span>
<a href="">登入</a>
</div>
<div class="hey">
<div class="heyleft">
<ul>
<li><a href="">待處理訂單</a></li>
<li><a href="">諮詢回覆</a></li>
<li><a href="">降價商品</a></li>
<li><a href="">返修退換貨</a></li>
<li><a href="">優惠券</a></li>
</ul>
</div>
<div class="heyright">
<ul>
<li><a href="">我的關注></a></li>
<li><a href="">我的京豆></a></li>
<li><a href="">我的理財></a></li>
<li><a href="">我的白條></a></li>
</ul>
</div>
</div>
<div class="hidebot">
<div class="bottop">
<span>最近瀏覽的商品:</span>
<a href="">檢視瀏覽歷史></a>
</div>
<div class="botdown">
<span>「暫無資料」</span>
</div>
</div>
</div>
</div>
<div class="gouwuche">
<div class="chetu"></div>
<a href="">去購物車結算</a>
<div class="jianleft"></div>
<div class="num">
<div class="numright"></div>
<div class="numzi">
<span>0</span>
</div>
</div>
<div class="hideche">
<div class="kongche"></div>
<span>購物車中還沒有商品，趕緊選購吧！</span>
</div>
</div>
<div class="jubao"></div>
</div>
<!-- 搜尋區域結束 -->
<!-- 導覽列區域開始 -->
<!-- 輪播區及瀏覽區開始 -->
<div id="main">
<div class="mainleft">
<div class="lunbo">
<ul class="pic">
<li style="display:block"><img src="images/z1.jpg" alt="" /></li>
<li><img src="images/z2.jpg" alt="" /></li>
<li><img src="images/z3.jpg" alt="" /></li>
<li><img src="images/z4.jpg" alt="" /></li>
<li><img src="images/z5.jpg" alt="" /></li>
<li><img src="images/z6.jpg" alt="" /></li>
</ul>
<ul class="nav">
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
<div class="liulan">
<div class="liuleft">
<div class="lefttu"></div>
</div>
<div class="liucenter">
<ul>
<li><a href=""><img src="images/c1.jpg" alt="" /></a></li>
<li><a href=""><img src="images/c2.jpg" alt="" /></a></li>
<li style="border-right:none"><a href=""><img src="images/c3.jpg" alt="" /></a></li>
<li><a href=""><img src="images/c4.jpg" alt="" /></a></li>
<li><a href=""><img src="images/c5.jpg" alt="" /></a></li>
<li style="border-right:none"><a href=""><img src="images/c6.jpg" alt="" /></a></li>
<li><a href=""><img src="images/c7.jpg" alt="" /></a></li>
<li><a href=""><img src="images/c8.jpg" alt="" /></a></li>
<li style="border-right:none"><a href=""><img src="images/c9.jpg" alt="" /></a></li>
<li><a href=""><img src="images/c10.jpg" alt="" /></a></li>
<li><a href=""><img src="images/c11.jpg" alt="" /></a></li>
<li style="border-right:none"><a href=""><img src="images/c12.jpg" alt="" /></a></li>
</ul>
</div>
<div class="liuright">
<div class="righttu"></div>
</div>
</div>
</div>
<div class="mainright">
<div class="baotu">
<a href=""><img src="images/b30.jpg" alt="" /></a>
</div>
<div class="kuaibao">
<span>京東快報</span>
<a href="">更多快報></a>
</div>
<div class="baomain">
<ul>
<li><a href="">美妝年度盛典 要你好看！</a></li>
<li><a href="">關於假冒客服詐騙的宣告</a></li>
<li><a href="">京東值得買 9.9元購了</a></li>
<li><a href="">阿根廷野生紅蝦4斤178元</a></li>
<li><a href="">自營家居低至9.9元</a></li>
<li><a href="">大家電配送範圍擴大公告</a></li>
<li><a href="">狂歡不落幕，好奇一整年</a></li>
<li><a href="">童書全品優惠券限時搶</a></li>
</ul>
</div>
<div class="tubiao">
<ul>
<li class="xiala">
<div class="tubiao_1"></div> <a href="">話費</a>
<div class="tubiao_9"></div>
</li>
<li class="xiala">
<div class="tubiao_2"></div> <a href="">機票</a>
<div class="tubiao_9"></div>
</li>
<li class="xiala">
<div class="tubiao_3"></div> <a href="">彩票</a>
<div class="tubiao_9"></div>
</li>
<li class="xiala" style="border-right:none">
<div class="tubiao_4"></div> <a href="">遊戲</a>
<div class="tubiao_9"></div>
</li>
<li style="border-bottom:none">
<div class="tubiao_5"></div> <a href="">旅行</a>
</li>
<li style="border-bottom:none">
<div class="tubiao_6"></div> <a href="">電影票</a>
</li>
<li style="border-bottom:none">
<div class="tubiao_7"></div> <a href="">理財</a>
</li>
<li style="border-bottom:none;border-right:none;">
<div class="tubiao_8"></div> <a href="">水電煤</a>
</li>
<div class="tubiaola">
<div class="close_menu">
<ul>
<li><a href="">話費</a></li>
<li><a href="">機票</a></li>
<li><a href="">彩票</a></li>
<li style="border-right:none"><a href="">遊戲</a></li>
</ul>
</div>
<div class="c_main">
<div class="box" style="display:block">
<div class="phonechong">
<span class="span1">手機號:</span>
<input type="text" value="請輸入手機號" class="shuru1" style="color:#ccc" />
<span class="span2">支援移動、聯通、電信京東、通訊</span>
<span class="close">X</span>
</div>
<div class="mianzhi">
<span class="span1"> 面值:</span>
<select name="" id="jine">
<option value="">10元</option>
<option value="">20元</option>
<option value="">30元</option>
<option value="">50元</option>
<option value="">100元</option>
<option value="">200元</option>
<option value="">300元</option>
<option value="">500元</option>
</select>
<span class="span3">9.80-11.00</span>
</div>
<div class="chong">
<input type="button" value="立即充值" class="cb" />
</div>
<div class="close">
X
</div>
</div>
<div class="box">
<ul class="jipiao_top">
<li class="tehui"><a href="">特惠國際機票</a></li>
<li class="guonei"><a href="">國內機票</a></li>
</ul>
<div class="jpbox" style="display:block">
<div class="tu">
<img src="images/d1.jpg" alt="" />
<span>國際機票430元起</span>
</div>
<div class="tu">
<img src="images/d2.jpg" alt="" />
<span>免籤線路說走就走</span>
</div>
</div>
<div class="jpbox">
<div class="go">
<span>出發城市:</span>
<select name="" id="chufa">
<option value="">K-昆明</option>
<option value="">B-北京</option>
<option value="">S-上海</option>
</select>
<span>到達城市:</span>
<select name="" id="chufa">
<option value="">A-阿克蘇</option>
<option value="">B-北京</option>
<option value="">S-上海</option>
</select>
</div>
<div class="gotime">
<span>出發日期:</span>
<select name="" id="chufatime">
<option value="">2014</option>
<option value="">2015</option>
</select>
<span>年</span>
<select name="" id="chufatime">
<option value="">12</option>
<option value="">11</option>
</select>
<span>月</span>
<select name="" id="chufatime">
<option value="">11</option>
<option value="">12</option>
</select>
<span>日</span>
</div>
<div class="goserach">
<input type="button" value="機票查詢" class="cha" />
<a href="">白條購機票更方便！</a>
</div>
</div>
<div class="close">
X
</div>
</div>
<div class="box">
<div class="doubleqiu">
<div class="qiutu"></div>
</div>
<div class="qiumain">
<div class="mai">
<span>買注</span>
<select name="" id="shuangseqiu">
<option value="">雙色球</option>
<option value="">大樂透</option>
<option value="">3D</option>
<option value="">競足</option>
</select>
<span><b>試試手氣吧！</b></span>
</div>
<div class="number">
<span>04</span>
<span>11</span>
<span>19</span>
<span>25</span>
<span>27</span>
<span>28</span>
<span style="color:blue">03</span>
</div>
<div class="xiazhu">
<a href="">[機選一注]</a>
<a href="">[自助選號]</a>
</div>
<input type="button" value="提交資料" class="sub" />
</div>
<div class="close">
X
</div>
</div>
<div class="box">
<div class="gamechose">
<ul>
<li><a href="">點卡</a></li>
<li><a href="">QQ</a></li>
<li><a href="">頁遊</a></li>
</ul>
<div class="yeyoutu">
<img src="images/d4.jpg" alt="" />
<img src="images/d5.jpg" alt="" />
<img src="images/d6.jpg" alt="" />
</div>
</div>
<div class="close">
X
</div>
</div>
</div>
</div>
</ul>
</div>
</div>
</div>
<!-- 輪播區及瀏覽區結束 -->
<!-- 商品展示區開始 -->
<div id="lifewindow">
<div class="lifetu"></div>
<div class="lifemain">
<div class="tuarea1">
<img src="images/e2.jpg" alt="" />
<div class="zhe">
<h3>品牌街</h3>
<div class="life1">
<a href="">卡西歐腕錶</a>
</div>
<div class="life1">
<a href="" style="color:#E4393C">全場低至4折</a>
</div>
<ul>
<li><a href="">更多品牌</a></li>
<li><a href="">進入品牌街</a></li>
</ul>
</div>
</div>
<div class="tuarea2">
<img src="images/e3.jpg" alt="" />
<div class="zhe1">
<h3>天天低價</h3>
<div class="life1">
<a href="">康佳42英寸電</a>
</div>
<div class="life1">
<a href="" style="background:red;color:white;padding:2px 2px">直降100元</a>
</div>
</div>
</div>
<div class="tuarea3">
<img src="images/e4.jpg" alt="" />
<div class="zhe">
<h3>好東西</h3>
<div class="life1">
<a href="">OPPO N3</a>
</div>
<div class="life1">
<a href="" style="color:#E4393C;font-size:12px">白條免息送京豆</a>
</div>
<ul>
<li><a href="">宅在家裡玩手機</a></li>
<li><a href="">逛更多></a></li>
</ul>
</div>
</div>
<div class="tuarea4">
<img src="images/e5.png" alt="" />
<div class="zhe1">
<h3>今日團購</h3>
<div class="life1">
<a href="">56元自助餐</a>
</div>
<div class="life1" style="margin-top:20px">
團購價
<span style="font-size:25px;color:red;font-weight:700">￥45</span>
</div>
<div class="cantuan"></div>
</div>
</div>
<div class="tuarea5">
<img src="images/e6.jpg" alt="" />
<div class="zhe1">
<h3>京東首發</h3>
<div class="life1">
<a href="">MR X8遊戲本</a>
</div>
<div class="life1">
<a href="" style="background:red;color:white;padding:2px 2px">8G超級顯示卡</a>
</div>
</div>
</div>
<div class="tuarea6">
<img src="images/e7.jpg" alt="" />
<div class="zhe1">
<h3>優惠券</h3>
<div class="life1">
<a href="">NB大牌神券</a>
</div>
<div class="life1">
<a href="" style="color:#E4393C">免費瘋搶ing</a>
</div>
</div>
</div>
<div class="tuarea7">
<img src="images/e8.jpg" alt="" />
<div class="zhe1">
<h3>京東預售</h3>
<div class="life1">
<a href="">魔力按摩貼</a>
</div>
<div class="life1">
<a href="" style="background:red;color:white;padding:2px 2px">你背後的女人</a>
</div>
</div>
</div>
<div class="tuarea8">
<img src="images/e9.jpg" alt="" />
<div class="zhe1">
<div class="zhe1">
<h3>金融精選</h3>
<div class="life1">
<a href="">天天免息</a>
</div>
<div class="life1">
<a href="" style="color:red">iPad輕鬆購</a>
</div>
</div>
</div>
</div>
<div class="tuarea9">
<img src="images/e10.jpg" alt="" />
</div>
<div class="tuarea9">
<img src="images/e11.jpg" alt="" />
</div>
<div class="tuarea9">
<img src="images/e12.jpg" alt="" />
</div>
</div>
</div>
<!-- 商品展示區結束 -->
<!-- hot熱門區開始 -->
<div id="hot">
<!-- 左邊開始 -->
<div class="hotleft">
<!-- 熱門曬單區域開始 -->
<div class="shaidan">
<div class="dan_top">
<h2>熱門曬單</h2>
</div>
<div class="shaimain">
<ul>
<li>
<div class="dantu">
<img width="50px" height="50px" src="images/s1.jpg" alt="" />
<div class="shai"></div>
</div>
<div class="hotname">
<a href="">[曬單帖]服務態度好</a>
</div>
<div class="hotlun">
<a href="">客服很好，買東西服務很重要，產品不錯，服務滿意</a>
<div class="dou"></div>
</div>
</li>
<li>
<div class="dantu">
<img width="50px" height="50px" src="images/s2.jpg" alt="" />
<div class="shai"></div>
</div>
<div class="hotname">
<a href="">[曬單帖]各種條碼都能識別，速度超級快</a>
</div>
<div class="hotlun">
<a href="">看評價說掃描槍有問題，但是客服很好很耐心的介紹了功能、設定啊，感覺功能相當完備。拿到手裡各種</a>
<div class="dou"></div>
</div>
</li>
<li>
<div class="dantu">
<img width="50px" height="50px" src="images/s3.jpg" alt="" />
<div class="shai"></div>
</div>
<div class="hotname">
<a href="">[曬單帖]很棒的東西</a>
</div>
<div class="hotlun">
<a href="">給公司買的。感覺很不錯。拆包以後就試了下。效果很清晰。</a>
<div class="dou"></div>
</div>
</li>
<li>
<div class="dantu">
<img width="50px" height="50px" src="images/s4.jpg" alt="" />
<div class="shai"></div>
</div>
<div class="hotname">
<a href="">[曬單帖]女兒喜歡的漂亮書包！</a>
</div>
<div class="hotlun">
<a href="">品質很好，外觀漂亮，女兒喜歡！</a>
<div class="dou"></div>
</div>
</li>
<li>
<div class="dantu">
<img width="50px" height="50px" src="images/s5.jpg" alt="" />
<div class="shai"></div>
</div>
<div class="hotname">
<a href="">[曬單帖]容量大、做工好</a>
</div>
<div class="hotlun">
<a href="">京東配送還是很給力的，下單兩天就收到貨了 我買的艾迪寶6支裝的羽毛球包，看外觀沒有色差，跟描述內</a>
<div class="dou"></div>
</div>
</li>
<li>
<div class="dantu">
<img width="50px" height="50px" src="images/s6.jpg" alt="" />
<div class="shai"></div>
</div>
<div class="hotname">
<a href="">[曬單帖]舒膚佳專效護理系列沐浴露</a>
</div>
<div class="hotlun">
<a href="">舒膚佳專效護理系列沐浴露敏感型，專為嬌嫩、敏感、特異型肌膚設計，100%天然溫和0刺激成分，不含</a>
<div class="dou"></div>
</div>
</li>
</ul>
</div>
</div>
<!-- 熱門曬單區域結束 -->
<!-- 熱門活動區域開始 -->
<div class="shaidan1">
<div class="dan_top">
<h2>熱門活動</h2>
</div>
<div class="shaimain">
<ul>
<li>
<div class="dantu">
<img width="50px" height="50px" src="images/s7.jpg" alt="" />
<div class="re"></div>
</div>
<div class="hotname">
<a href="">佳貝艾特金裝150克2、3段0元試用！</a>
</div>
<div class="hotlun">
<a href="">全球同步銷售：佳貝艾特金裝150克2、3段0元試用，零風險！快來報名！</a>
<div class="dou"></div>
</div>
</li>
<li>
<div class="dantu">
<img width="50px" height="50px" src="images/s8.jpg" alt="" />
<div class="re"></div>
</div>
<div class="hotname">
<a href="">一槍在手生活無瑣事-惠澤熱熔膠槍</a>
</div>
<div class="hotlun">
<a href="">惠澤熱熔膠槍京東首發，邀您0元試用啦~~</a>
<div class="dou"></div>
</div>
</li>
<li>
<div class="dantu">
<img width="50px" height="50px" src="images/s9.jpg" alt="" />
<div class="re"></div>
</div>
<div class="hotname">
<a href="">I’m cool系列彩色冰箱0元試用</a>
</div>
<div class="hotlun">
<a href="">奧馬I’m cool系列彩色冰箱0元試用啦！冷藏/冷凍雙溫區，歐盟質控標準，太空艙檢漏技術，年輕人的冰箱</a>
<div class="dou"></div>
</div>
</li>
<li>
<div class="dantu">
<img width="50px" height="50px" src="images/s10.jpg" alt="" />
<div class="re"></div>
</div>
<div class="hotname">
<a href="">華為榮耀6plus0元試用</a>
</div>
<div class="hotlun">
<a href="">為了慶祝華為榮耀新品橫空出世，也為了答謝各位花粉的支援與厚愛，我們從研發童鞋那裡搶到了50臺嶄</a>
<div class="dou"></div>
</div>
</li>
<li>
<div class="dantu">
<img width="50px" height="50px" src="images/s11.jpg" alt="" />
<div class="re"></div>
</div>
<div class="hotname">
<a href="">《Win8平板最佳伴侶》有獎問答活動</a>
</div>
<div class="hotlun">
<a href="">今年雙12來京東，參加《Win8平板最佳伴侶》有獎問答活動，就有機會把Win8平板「伴侶」帶回家！</a>
<div class="dou"></div>
</div>
</li>
<li>
<div class="dantu">
<img width="50px" height="50px" src="images/s12.jpg" alt="" />
<div class="re"></div>
</div>
<div class="hotname">
<a href="">許願望，贏周生生Charme蘋果串珠免單</a>
</div>
<div class="hotlun">
<a href="">2015年即將到來，你有什麼願望？留下你的願望，有機會贏取周生生Charme蘋果串珠免單權，祈願明年平</a>
<div class="dou"></div>
</div>
</li>
</ul>
</div>
</div>
<!-- 熱門活動區域結束 -->
</div>
<!-- 左邊結束 -->
<!-- 右邊開始 -->
<div class="hotright">
<div class="readtop">
<div class="read">
<h2>線上讀書</h2>
<a href="">更多線上讀書></a>
</div>
<div class="readmain">
<div class="readleft">
<img src="images/s13.jpg" alt="" />
</div>
<div class="readright">
<a href="">[電子書]1元特價，好書週週有</a>
<a href="">《默克爾傳》極具影響力的女性</a>
<a href="">《旅行者閱讀行為分析報告》</a>
<a href="">京東巨量資料——洞悉未來</a>
</div>
</div>
</div>
<h3>訂閱促銷資訊</h3>
<div class="readbottom">
<div class="youjian"></div>
<input class="shuru" type="text" name="" id="" value="請輸入您的Email地址" />
<input class="ding" type="button" value="訂閱" />
</div>
</div>
<!-- 右邊結束 -->
</div>
<!-- hot熱門區結束 -->
<!-- 網站詳情開始 -->
<div id="xiang">
<div class="xleft">
<div class="qing">
<div class="qtu"></div>
<h3>購物指南</h3>
<div class="bao">
<a href="">購物流程</a>
</div>
<div class="bao">
<a href="">會員介紹</a>
</div>
<div class="bao">
<a href="">團購/機票</a>
</div>
<div class="bao">
<a href="">常見問題</a>
</div>
<div class="bao">
<a href="">大家電</a>
</div>
<div class="bao">
<a href="">聯絡客服</a>
</div>
</div>
<div class="bao"></div>
<div class="qing">
<div class="qtu1"></div>
<h3>配送方式</h3>
<div class="bao">
<a href="">上門自提</a>
</div>
<div class="bao">
<a href="">211限時達</a>
</div>
<div class="bao">
<a href="">配送服務查詢</a>
</div>
<div class="bao">
<a href="">配送費收取標準</a>
</div>
<div class="bao">
<a href="">海外配送</a>
</div>
</div>
<div class="qing">
<div class="qtu2"></div>
<h3>支付方式</h3>
<div class="bao">
<a href="">貨到付款</a>
</div>
<div class="bao">
<a href="">線上支付</a>
</div>
<div class="bao">
<a href="">分期付款</a>
</div>
<div class="bao">
<a href="">郵局匯款</a>
</div>
<div class="bao">
<a href="">公司轉賬</a>
</div>
</div>
<div class="qing">
<div class="qtu3"></div>
<h3>售後服務</h3>
<div class="bao">
<a href="">售後政策</a>
</div>
<div class="bao">
<a href="">價格保護</a>
</div>
<div class="bao">
<a href="">退款說明</a>
</div>
<div class="bao">
<a href="">返修/退換貨</a>
</div>
<div class="bao">
<a href="">取消訂單</a>
</div>
</div>
<div class="qing">
<div class="qtu4"></div>
<h3>特色服務</h3>
<div class="bao">
<a href="">奪寶島</a>
</div>
<div class="bao">
<a href="">DIY裝機</a>
</div>
<div class="bao">
<a href="">延保服務</a>
</div>
<div class="bao">
<a href="">京東E卡</a>
</div>
<div class="bao">
<a href="">節能補貼</a>
</div>
<div class="bao">
<a href="">京東通訊</a>
</div>
</div>
</div>
<div class="xright">
<h3>京東自營覆蓋區縣</h3>
<span>京東已向全國1864個區縣提供自營配送服務，支援貨到付款、POS機刷卡和售後上門服務。</span>
<a href="">檢視詳情></a>
</div>
</div>
<!-- 網站詳情結束 -->
<!-- 底部開始 -->
<div id="down">
<div class="down_top">
<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="" style="border-right:none">English Site</a>
</div>
<div class="down_center">
<span>北京市公安局朝陽分局備案編號110105014669 | 京ICP證070359號 | <a href="">網際網路藥品資訊服務資格證編號(京)-經營性-2014-0008</a> | 新出發京零
字第大120007號</span>
<span><a href="">音像製品經營許可證蘇宿批005號</a> | 出版物經營許可證編號新出發(蘇)批字第N-012號 | 網際網路出版許可證編號新出網證(京)字150號</span>
<span><a href="">網路文化經營許可證京網文[2011]0168-061號</a> 違法和不良資訊舉報電話：4006561155 Copyright © 2004-2014
京東JD.com 版權所有</span>
<span>京東旗下網站：<a href="">360TOP</a> <a href="">拍拍網</a> <a href="">網銀線上</a> </span>
</div>
<div class="down_bot">
<img src="images/bot1.gif" alt="" />
<img src="images/bot2.gif" alt="" />
<img src="images/bot3.png" alt="" />
<img src="images/bot4.png" alt="" />
</div>
</div>
<!-- 底部結束 -->
<!--程式碼整理：js程式碼 www.jsdaima.com-->
</body>
</html>
3、404頁面（404.html）
3.1、404頁面原始碼（不含js、css）
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>404 - 當前頁面不存在</title>
<style>
body {
background: #ccc;
}
.xy {
width: 258px;
height: 258px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -129px;
margin-top: -129px;
}
.xydd {
color: #999;
font-family: '微軟雅黑';
font-size: 20px;
text-align: center;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="xy">
<img src="images/404.jpg" alt="" />
</div>
<div class="xydd">
<h1>頁面與君失聯，微信掃碼閱讀IT技術文章</h1>
</div>
</body>
</html>
4、部分圖片（images）
以上就是本期所有內容量了，歡迎學習前端的夥伴作為參考，完整版原始碼下載方式：微信搜尋公眾號【IT學長】回覆「京東商城原始碼」免費下載。