僅供學(xué)習(xí)秕豫，轉(zhuǎn)載請(qǐng)注明出處
需求
前面鋪墊寫(xiě)了不少HTML、CSS观蓄、Photoshop的文章混移，那么本篇章就是要結(jié)合起來(lái)挑戰(zhàn)寫(xiě)寫(xiě)京東的商城首頁(yè)了。
好了侮穿，本次的目標(biāo)就是實(shí)現(xiàn)這樣的大概頁(yè)面歌径，讓我們一步步來(lái)開(kāi)始編寫(xiě)。
文檔結(jié)構(gòu)
首頁(yè)創(chuàng)建好本次編寫(xiě)的文件結(jié)構(gòu)亲茅，如下：
好了回铛，文件夾目錄都準(zhǔn)備好了，那么先按照從上到下克锣，從左到右的原則一步步開(kāi)始編寫(xiě)吧勺届。
編寫(xiě)頭部橫欄部分
要編寫(xiě)這部分，首先就需要準(zhǔn)備相關(guān)的圖片娶耍，這里我就不一步步說(shuō)怎么使用photoshop切圖部分了。
如果不太熟悉的朋友饼酿，可以訪問(wèn)我之前寫(xiě)的photoshop 切圖技巧榕酒。
準(zhǔn)備好橫欄所需的圖標(biāo)
我將圖標(biāo)制作成了雪碧圖，如下：
好了故俐，有了這個(gè)雪碧圖就可以開(kāi)始動(dòng)手了想鹰。
編寫(xiě)橫欄部分代碼
HTML代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>京東商城</title>
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./css/font_1056598_n3wpz4pry7/iconfont.css">
</head>
<body>
<!-- 橫欄 -->
<div class="header01">
<div class="location">北京</div>
<div class="hello"><a href="#">你好，請(qǐng)登錄</a></div>
<!-- ul.menu>(li>a.a${免費(fèi)注冊(cè)})*8 -->
<ul class="menu">
<li><a href="" class="a1">免費(fèi)注冊(cè)</a></li>
<li><a href="" class="a2">我的訂單</a></li>
<li>
<a href="" class="a3">
我的京東
<span class="iconfont icon-xiajiantou"></span>
</a>
</li>
<li><a href="" class="a4">京東會(huì)員</a></li>
<li>
<a href="" class="a5">
企業(yè)采購(gòu)
<span class="iconfont icon-xiajiantou"></span>
</a>
</li>
<li>
<a href="" class="a6">
客戶服務(wù)
<span class="iconfont icon-xiajiantou"></span>
</a>
</li>
<li><a href="" class="a7">網(wǎng)站導(dǎo)航</a></li>
<li><a href="" class="a8">手機(jī)京東</a></li>
</ul>
</div>
</body>
</html>
CSS代碼：
* {
margin: 0;
padding: 0;
}
.header01{
height: 38px;
background-color: #e3e4e5;
}
.location{
position: absolute;
width: 61px;
height: 38px;
line-height: 38px;
left: 466px;
background-image: url(../images/icons.png);
background-position: left -138px;
text-indent: 20px;
font-size: 13px;
font-family: "Microsoft YaHei";
color: #999;
cursor: pointer;
}
.hello{
position: absolute;
width: 85px;
height: 38px;
left: 795px;
line-height: 38px;
}
.hello a{
font-size: 13px;
font-family: "Microsoft YaHei";
text-decoration: none;
color: #999;
}
.menu{
position: absolute;
height: 38px;
left: 892px;
overflow: hidden;
}
.menu li{
display: inline-block;
}
.menu li a{
position: relative;
left: -1px;
line-height: 38px;
font-size: 13px;
font-family: "Microsoft YaHei";
text-decoration: none;
color: #999;
border-left: 1px solid #999;
padding: 0 5px;
padding-left: 8px;
}
.menu li a:hover{
color: red;
}
.menu li span{
position: relative;
left: -4px;
top: 3px;
}
瀏覽器顯示如下：
其中菜單里面的下箭頭我才用的阿里巴巴矢量圖標(biāo)药版，如果不清楚如何使用辑舷，可以點(diǎn)擊iconfont阿里巴巴矢量圖標(biāo)庫(kù)從注冊(cè)到使用訪問(wèn)。
好了槽片，下面再來(lái)編寫(xiě)下一部分何缓。
編寫(xiě)京東圖標(biāo)
準(zhǔn)備好京東圖標(biāo)
編寫(xiě)HTML以及CSS
可以從圖標(biāo)顯示來(lái)看肢础，圖標(biāo)可以使用絕對(duì)定位來(lái)解決。
首先寫(xiě)一個(gè)div來(lái)顯示看看碌廓，如下：
瀏覽器顯示如下：
設(shè)置背景顏色以及圖標(biāo)的顏色传轰，查看如下：
設(shè)置body的背景顏色，代碼如下：
再設(shè)置圖標(biāo)的背景顏色谷婆，代碼如下：
瀏覽器顯示慨蛙，如下：
下面將京東的logo設(shè)置背景圖片，如下：
瀏覽器顯示如下：
好了纪挎，下面繼續(xù)下一部分期贫，如下：
編寫(xiě)搜索欄目
這里面的圖標(biāo)可以到阿里巴巴的矢量圖庫(kù)中找一下看看。
準(zhǔn)備圖標(biāo)
編寫(xiě)HTML以及CSS
編寫(xiě)優(yōu)化input部分异袄，詳情訪問(wèn)CSS Input 樣式美化通砍，代碼如下：
瀏覽器展示如下：
開(kāi)始寫(xiě)圖標(biāo)以及右邊放大鏡部分，如下：
瀏覽器展示如下：
編寫(xiě)搜索框下的推薦欄目
簡(jiǎn)單看看隙轻，這里可以使用ul>li>a來(lái)編寫(xiě)埠帕，然后調(diào)整一下大小以及字體樣式即可。
要注意布局的方式不使用float:left;浮動(dòng)布局玖绿，最好就是絕對(duì)定位敛瓷，方便進(jìn)行居中定位。
而如果使用絕對(duì)定位斑匪，那么就是需要設(shè)置display:inline-block;行內(nèi)塊的方式來(lái)進(jìn)行布局呐籽。
瀏覽器展示如下：
編寫(xiě)購(gòu)物車(chē)部分
準(zhǔn)備圖標(biāo)
好了，準(zhǔn)備好了購(gòu)物車(chē)的圖標(biāo)蚀瘸，下面就繼續(xù)來(lái)寫(xiě)HTML + CSS部分狡蝶。
編寫(xiě) HTML + CSS
瀏覽器演示如下：
編寫(xiě)搜索框下的菜單欄目
這部分基本跟上面的推薦菜單的寫(xiě)法一致，可以使用ul>li>a加上絕對(duì)定位來(lái)完成贮勃。
編寫(xiě)HTML + CSS
瀏覽器展示如下：
好了贪惹，上面的部分基本寫(xiě)好了。那么繼續(xù)寂嘉。
左邊細(xì)分類別列表
思路：編寫(xiě)一個(gè)ul>li>a即可奏瞬，然后用絕對(duì)定時(shí)進(jìn)行布局。其實(shí)這里面的每一行也是一個(gè)小菜單欄目泉孩，需要增加不同數(shù)量的a鏈接硼端，設(shè)置bord-left:1px solid #ccc即可，先簡(jiǎn)化實(shí)現(xiàn)一個(gè)先寓搬。
編寫(xiě)HTML + CSS
瀏覽器展示如下：
編寫(xiě)中間幻燈片部分
幻燈片的話單純HTML + CSS 只能展示出一張圖片的珍昨，需要后面加上js代碼，寫(xiě)動(dòng)畫(huà)效果才是完整的。
編寫(xiě) HTML + CSS
做幻燈片這里要講一下技巧镣典，先看看效果兔毙。
這里面其實(shí)中間有一個(gè)div嵌套一個(gè)寬度很大的ul，然后給li設(shè)置float:left來(lái)處理的骆撇。最后通過(guò)絕對(duì)定位的ul的left參數(shù)改變來(lái)實(shí)現(xiàn)移動(dòng)效果瞒御。
好了，大概的布局以及實(shí)現(xiàn)還需要自己多動(dòng)手實(shí)踐一下神郊。
總結(jié)
其實(shí)在整體頁(yè)面編寫(xiě)的過(guò)程肴裙，我是應(yīng)該先用div給頁(yè)面每個(gè)位置進(jìn)行分大塊，然后在每個(gè)大塊中繼續(xù)寫(xiě)內(nèi)部的元素涌乳。
這個(gè)我在代碼編寫(xiě)后期修改了蜻懦，沒(méi)在這篇中體現(xiàn)出來(lái)。不過(guò)本篇章也講述了一個(gè)大概的實(shí)現(xiàn)過(guò)程夕晓。
較好的布局思路：
從上到下宛乃，從左到右，使用div設(shè)定好寬度蒸辆、高度征炼、背景色，基于文檔流進(jìn)行布局躬贡，不要一上來(lái)就使用絕對(duì)定位這種方式谆奥。
2019年全套Java、Android拂玻、HTML5前端酸些、Python、大數(shù)據(jù)視頻檐蚜，價(jià)值數(shù)萬(wàn)資源大放送
尋找資源的地址如下：
掃描微信公眾號(hào)
尋找價(jià)值數(shù)萬(wàn)的視頻資源
