前後花了快一個星期，雖然只是做的靜態頁面，但是京東首頁設計到的佈局還是很有參考價值的，其中很多小的板塊佈局各有特點，可以通過過一個個小的板塊來練習自己的html+css能力。
內容簡介：
html：
- 標籤語義化，如使用header、footer等
- 頭部meta標籤的元信息的TDK書寫要利於SEO
- css文件在頭部引入，js文件在body底部引入
- 元素嵌套不宜過深
- 不同板塊註釋要清晰
css：
- 爲公共樣式創建一個base.css文件，不同的大板塊各自創建一個css文件
- 使用normalize.css初始化樣式
- 選擇器的權重問題
- 僞類（nth-type和nth-of-type中對標籤和類的選擇）
- 行內元素和塊級元素的區別（寬高是否可設置，margin-top傳遞給父元素，margin合併問題等）
- transition過渡效果中，display無法生效的原因及解決方案（visibility+opacity解決）
- flex佈局縮短開發時間
- 慎用！important
js：
事件委託優化性能
原生輪播圖
使用定時器時注意清除定時器避免內存泄漏（使用setTimeout()遞歸來代替setInterval()）
事件綁定中mouseover，mouseout和mouseenter，mouseleave的區別
來看看我的京東商城：
接下來來整理一下編寫流程、注意的點以及一些坑:
首先肯定是打開京東商城官網先仔細地看一下啦，然後先了解它的結構大體是如何的：黑>紅>藍>黃
html文件編寫：
沒有什麼特別重要的地方，就是要注意層次間的標籤嵌套要清晰，不能嵌套太深，導致結構混亂（多寫註釋= ^ =）
將頁面分爲頭圖-頭部導航-主體（左側導航欄-中間輪播圖欄-右側登錄欄）-底部信息，然後進行N個div的組合編寫頁面...
css文件編寫：
- 注意樣式取名要清晰，便於自己開發和維護= - =。
- 然後百度normalize.css，下載這個樣式文件來對css進行初始化（至於作用嘛。。。初始化啊，很多標籤屬性默認有很無語的邊距什麼的，無力吐槽...），別以爲用了這個樣式文件你就不用再初始化了，它只是做一些很基礎的初始化，如果你平常對標籤有什麼使用習慣的話，建議還是自己在基礎樣式中再初始化一次（不建議*{padding:0px;}這樣一股腦的初始化，很多樣式的屬性自有存在的道理，只需要把你要用到的進行合理的初始化就行了）。
- 注意把一些京東商城常用的標籤樣式提取出來，如給a一個hover的poiter樣式，可以在樣式文件最上方統一設定一個，如果有些a不需要這個hover樣式的，也可以給需要的a標籤增大權重覆蓋這個hover樣式
- 將一些常用樣式單獨寫成一個class樣式類，方便在便籤中添加和刪除，如.fl { float: left; } .fr { float: right; } .colorRed{ color: #FF0000 }
- 注意position：absolute是相對於父元素中第一個非默認流（static）的絕對定位
- 一般設置ul的寬高和li的寬高，便於li的懸浮顯示更換背景效果
- height和line-height的關係不簡單，height=line-height時候文字垂直居中，還有其他情況， 戳我
- 不得不說nth-child和nth-of-type的坑 nth-child的坑 、nth-child和nth-of-type的坑
- z-index只適用於已經定位的元素（即position:relative/absolute/fixed）。 z-index層疊規則
- margin、padding的簡便寫法。 簡便寫法
- 實現漸隱漸顯效果，transition:display 1s;一起使用沒有過渡效果，這是因爲過渡效果只能使存在的屬性進行過渡，如width，color，而display只有存在或者不存在這兩個狀態，所以無法實現由存在到不存在的過渡，解決方案：可以使用visibility：hidden,opacity：0，來代替display:none；然後transition:opacity 1s;當觸發事件時，只要visibility:visble,opacity:1即可實現漸隱漸顯效果。
- 使用別的字體：然後使用這個useFontFamily樣式即可設置字體
-
/*聲明字體*/ @font-face { font-family: 'icomoon';/*字體名*/ src: url('../fonts/icomoon.eot?fcdq5i'); src: url('../fonts/icomoon.eot?fcdq5i#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf?fcdq5i') format('truetype'), url('../fonts/icomoon.woff?fcdq5i') format('woff'), url('../fonts/icomoon.svg?fcdq5i#icomoon') format('svg'); font-weight: normal; font-style: normal; } .useFontFamily{ font-family: icomoon; } - 清除浮動
- 當你覺得設定了width之後，padding和border在變的時候（加了個border讓你的佈局變得面目全非。。）計算麻煩，可以使用box-sizing：border-box;(將width=content改爲width=content+padding*2+border*2)
- 簡單輪播圖的佈局：設定一個外邊框大div，設定屬性overflow:hidden; position:relative;(爲輪播圖按鈕的絕對定位做準備)。然後裏面嵌套輪播圖div，width：99999px;(很大，足夠裝下所有輪播圖)，設定爲絕對定位，left：0px; top:0px; 然後設定輪播圖片向左浮動，這樣所有圖片都在一行顯示，父級div超出部分隱藏。（js中只要修改left值便可以實現左滑動輪播的效果）。
- 實現垂直居中的幾種方式
- flex佈局
js文件編寫：
實現該效果，鼠標懸浮在“我的京東”，顯示隱藏的div
將“我的京東”和隱藏的div放在同一個大的div下，使用絕對定位，將隱藏div移動到邊界一致的地方，通過給外層大div綁定mouseover事件和mouseout事件來控制裏面div的顯隱。
一個倒計時函數
function killTime(){
var hour=12,minute=30,second=40;
computeTime(hour,minute,second);
}
//計時器
function computeTime(hour,minute,second){
var timer=null;
timer=setInterval(function(){
if(hour>0){
second--;
if(second==0){
second=59;
minute--;
if(minute==0){
second=0;
hour--;
}
}
if(second<10){second="0"+second};
if(minute<10){minute="0"+minute};
if(hour<10){hour="0"+hour};
console.log(hour+":"+minute+":"+second);
}
else{
clearInterval(timer);//清除計時器
}
},1000);
}
好了，這個項目就介紹到這裏，至於用到的圖片素材嘛，自己去京東商城看咯，
有需要源碼的說一聲