歡迎點(diǎn)贊 ?? 收藏 ?留言 ?? 私信
學(xué)習(xí)目標(biāo)
學(xué)習(xí)目標(biāo):
- 掌握京東項(xiàng)目流程體系
- 掌握網(wǎng)站三大標(biāo)簽優(yōu)化
- 掌握京東頭部和尾部制作
- 掌握京導(dǎo)航欄制作
- 掌握京東焦點(diǎn)圖制作
- 了解網(wǎng)站三大標(biāo)簽優(yōu)化
技術(shù)棧： HTML + CSS
實(shí)現(xiàn)效果
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-516989.html
網(wǎng)頁(yè)模塊
- 快速導(dǎo)航欄部分
<div class="shortcut">
<div class="w">
<ul class="fl city">
<li> <i class="f10">?</i><a href="#">北京</a></li>
</ul>
<ul class="fr">
<li>
<a href="#">你好，請(qǐng)登錄</a>
<a href="#" class="f10">免費(fèi)注冊(cè)</a>
</li>
<li class="space"></li>
<li>
<a href="#">我的訂單</a>
</li>
<li class="space"></li>
<li>
<a href="#">我的京東</a>
<i>?</i>
</li>
<li class="space"></li>
<li>
<a href="#">京東會(huì)員</a>
</li>
<li class="space"></li>
<li>
<a href="#">企業(yè)采購(gòu)</a>
</li>
<li class="space"></li>
<li>
<a href="#">客戶服務(wù)</a>
<i>?</i>
</li>
<li class="space"></li>
<li>
<a href="#">網(wǎng)站導(dǎo)航</a>
<i>?</i>
</li>
<li class="space"></li>
<li>
<a href="#" class="mobile">手機(jī)京東</a>
</li>
<li class="space"></li>
<li>
<a href="#">網(wǎng)站無(wú)障礙</a>
</li>
</ul>
</div>
</div>
- 中間頭部分
<!-- 搜索 -->
<div class="form">
<input type="text" placeholder="掃描儀">
<!-- 按鈕的意思 雙標(biāo)簽 等價(jià)于 <input type="button" value=""> -->
<button> <i>?</i> </button>
</div>
<!-- 購(gòu)物車 -->
<div class="shopCar">
<i>?</i><a href="#" class="f10">我的購(gòu)物車</a> <span>0</span>
</div>
<!-- 關(guān)鍵詞 -->
<div class="hotwords">
<a href="#" class="f10">199減100</a>
<a href="#">9.9洗車</a>
<a href="#">京東京造</a>
<a href="#">電腦數(shù)碼</a>
<a href="#">蘋果直降</a>
<a href="#">數(shù)碼配件</a>
<a href="#">年度大賞</a>
</div>
<!-- 小導(dǎo)航部分 -->
<div class="navitems">
<ul>
<li><a href="#">秒殺</a></li>
<li><a href="#">優(yōu)惠券</a></li>
<li><a href="#">閃購(gòu)</a></li>
<li><a href="#">拍賣</a></li>
<li class="space"></li>
<li><a href="#">服裝城</a></li>
<li><a href="#">京東超市</a></li>
<li><a href="#">生鮮</a></li>
<li><a href="#">全球購(gòu)</a></li>
<li class="space"></li>
<li><a href="#">京東金融</a></li>
</ul>
</div>
<!-- 超級(jí)日部分 -->
<div class="super">
<a href="#"><img src="images/super.png" height="40" width="190" alt=""></a>
</div>
- 中間分類區(qū)域
<div class="grid-col1 fl">
<ul>
<li><a href="#">家用電器</a></li>
<li><a href="#">手機(jī)</a>/<a href="#">運(yùn)用商</a>/<a href="#">數(shù)碼</a></li>
<li><a href="#">電腦</a>/<a href="#">辦公</a>
<li><a href="#">家居</a>/<a href="#">家居</a>/<a href="#">家裝</a>/<a href="#">廚具</a></li>
<li><a href="#">男裝</a>/<a href="#">女裝</a>/<a href="#">童裝</a>/<a href="#">內(nèi)衣</a></li>
<li><a href="#">美妝</a>/<a href="#">個(gè)護(hù)清潔</a>/<a href="#">寵物</a></li>
<li><a href="#">女鞋</a>/<a href="#">箱包</a>/<a href="#">鐘表</a>/<a href="#">珠寶</a></li>
<li><a href="#">男鞋</a>/<a href="#">運(yùn)動(dòng)</a>/<a href="#">戶外</a></li>
<li><a href="#">房產(chǎn)</a>/<a href="#">汽車</a>/<a href="#">汽車用品</a></li>
<li><a href="#">母嬰</a>/<a href="#">玩具樂器</a></li>
<li><a href="#">食品</a>/<a href="#">酒類</a>/<a href="#">生鮮</a>/<a href="#">特產(chǎn)</a></li>
<li><a href="#">藝術(shù)</a>/<a href="#">禮品鮮花</a>/<a href="#">農(nóng)資綠植</a></li>
<li><a href="#">圖書</a>/<a href="#">文娛</a>/<a href="#">數(shù)碼</a></li>
<li><a href="#">圖像</a>/<a href="#">音響</a>/<a href="#">教育</a>/<a href="#">電子書</a></li>
<li><a href="#">手機(jī)</a>/<a href="#">運(yùn)用商</a>/<a href="#">數(shù)碼</a></li>
<li><a href="#">理財(cái)</a>/<a href="#">眾籌</a>/<a href="#">白條</a>/<a href="#">保險(xiǎn)</a></li>
</ul>
</div>
- 頁(yè)面底部分
<div class="service">
<div class="w">
<ul>
<li>
<h5>多</h5>
<p>品類齊全，輕松購(gòu)物</p>
</li>
<li>
<h5>快</h5>
<p>多倉(cāng)直發(fā)，極速配貨</p>
</li>
<li>
<h5>好</h5>
<p>正品行貨，精致服務(wù)</p>
</li>
<li>
<h5>省</h5>
<p>天天低價(jià)，暢選無(wú)憂</p>
</li>
</ul>
</div>
</div>
上面僅僅是部分代碼，有需要?dú)g迎來(lái)私信！文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-516989.html
到了這里，關(guān)于Web前端大學(xué)生期末大作業(yè)--京東首頁(yè)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
