設計目標
-
保證瀏覽器 ie7及以上, 火狐, 360, safari，chrome等。誰讓我再測ie6，就跟誰急。。
-
熟悉CSS+DIV布局，頁面的搭建工作
-
了解常用電商類網站的布局模式
-
為后期京東移動端做鋪墊
幾點思考
(1)開發工具 sublime 、fireworks（ps）、各種瀏覽器(ie6.7 要測看心情)
(2)CSS Rest 類庫,為跨瀏覽器兼容做准備(也可以直接運用jd網站的初始化)
normalize.css
只是一個很小的CSS文件，但它在默認的HTML元素樣式上提供了跨瀏覽器的高度一致性。
相比於傳統的CSS reset，Normalize.css是一種現代的、為HTML5准備的優質替代方案。
Normalize.css現在已經被用於Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及許許多多其他框架、工具和網站上。 你值得擁有。。
- 保護有用的瀏覽器默認樣式而不是完全去掉它們
- 一般化的樣式：為大部分HTML元素提供
- 修復瀏覽器自身的bug並保證各瀏覽器的一致性
- 優化CSS可用性：用一些小技巧
- 解釋代碼：用注釋和詳細的文檔來
(3)技術棧
HTML5 結構 + CSS3 布局
(4)低版本瀏覽器 單獨制作一個跳轉頁面 (都是孩子，也舍不得打，舍不得扔)
https://h5.m.jd.com/dev/3dm8aE4LDBNMkDfcCaRxLnVQ7rqo/index.html
目錄說明
要實現結構和樣式相分離的設計思想。 根目錄下有這4個文件（目錄）。
項目開始
通用部分
1.icon圖標
標題上的小圖標
右鍵另存為到網站根目錄下。
引入icon圖標
代碼： <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
注意：
-
它不是iconfont字體。
-
代碼位置是放到 head 標簽中間。
-
后面的type="image/x-icon" 屬性可以省略。
-
為了兼容性，請將favicon.ico 這個圖標放到根目錄下。
轉換icon圖標
2.網站優化三大標簽
SEO是由英文Search Engine Optimization縮寫而來，中文意譯為“搜索引擎優化”！
SEO是指通過對網站進行站內優化、網站結構調整、網站內容建設、網站代碼優化等)和站外優化，從而提高網站的關鍵詞排名以及公司產品的曝光度。
簡單的說就是，把產品做好，搜索引擎就會介紹客戶來。
我們現在階段主要進行站內優化。網站優化，我們應該要懂。。。
建議：
首頁標題：網站名（產品名）- 網站的介紹
京東(JD.COM)-綜合網購首選-正品低價、品質保障、配送及時、輕松購物！
小米商城 - 小米5s、紅米Note 4、小米MIX、小米筆記本官方網站
②Description 網站說明
對於關鍵詞的作用明顯降低，但由於很多搜索引擎，仍然大量采用網頁的MATA標簽中描述部分作為搜索結果的“內容摘要”。 就是簡要說明我們網站的主要做什么的。 我們提倡，Description作為網站的總體業務和主題概括，多采用“我們是…”“我們提供…”“×××網作為…”“電話：010…”之類語句。
京東網：
<meta name="description" content="京東JD.COM-專業的綜合網上購物商城,銷售家電、數碼通訊、電腦、家居百貨、服裝服飾、母嬰、圖書、食品等數萬個品牌優質商品.便捷、誠信的服務，為您提供愉悅的網上購物體驗!" />
注意：
-
-
同樣遵循簡短原則，字符數含空格在內不要超過 120 個漢字。
-
補充在 title 和 keywords 中未能充分表述的說明.
-
用英文逗號 關鍵詞1,關鍵詞2
<meta name="description" content="小米商城直營小米公司旗下所有產品，囊括小米手機系列小米MIX、小米Note 2，紅米手機系列紅米Note 4、紅米4，智能硬件，配件及小米生活周邊，同時提供小米客戶服務及售后支持。" />
③Keywords 關鍵字
Keywords是頁面關鍵詞，是搜索引擎關注點之一。Keywords應該限制在6～8個關鍵詞左右，電商類網站可以多一點。
京東網：
<meta name="Keywords" content="網上購物,網上商城,手機,筆記本,電腦,MP3,CD,VCD,DV,相機,數碼,配件,手表,存儲卡,京東" />
小米網：
<meta name="keywords" content="小米,小米6,紅米Note4,小米MIX,小米商城" />
3.火狐瀏覽器截圖工具
用火狐瀏覽器的截圖工具截取網頁圖片
點擊截圖按鈕——截取整個網頁——保存，稍后可用ps來截取我們需要的圖片
頂部（快捷菜單）所用知識點
1.頭部制作
①版心：
用ps量出網頁的版心，修改css代碼，定義版心寬度並居中
②廣告條部分
分析：一個div里面套一個版心，版心中有一個圖片形式的鏈接（a標簽+img標簽/背景圖片，如果使用背景圖片的方法要先將a轉換為塊級元素，設置高度，再填充背景圖片）
ps量出高度，修改css樣式，編寫HTML結構
2.快速導航欄
①寫好結構和基本樣式
分析：一個div（底部有邊框），里面套一個版心div，一部分文字（ul）向左浮動，一部分文字（ul）向右浮動；最后引入字體圖標
<!-- 快速導航欄 -->
<div class="shortcut">
<div class="w">
<ul class="fl city">
<li>北京</li>
</ul>
<ul class="fr">
<li>
<a href="#">你好，請登錄</a>
<a href="#" class="f10">免費注冊</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="#">京東會員</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="#">網站導航</a>
<i></i>
</li>
<li class="space"></li>
<li>
<a href="#" class="mobile">手機京東
<img src="images/mobile.png" height="60" width="60" alt="">
</a>
</li>
</ul>
</div>
</div>
css：
/*浮動的公共類*/
.fl{
float: left;
}
.fr{
float: right;
}
a{
text-decoration: none; /*取消鏈接默認下划線*/
font-size: 12px;
color: #999;
}
a:hover { /*鼠標放到鏈接上的顏色*/
color: #c81623;
}
ul{
list-style: none;/*清除列表樣式*/
margin: 0; /*清除內外邊距*/
padding: 0;
}
body{
background-color: #f6f6f6; /*整個頁面的背景顏色*/
}
/*快速導航欄部分*/
.shortcut{
height: 30px; /*沒有高度撐開，不會顯示*/
line-height: 30px; /*行高=容器高，可以使字體居中*/
background-color: #e3e4e5;
border-bottom: 1px solid #ddd;
font-size: 12px; /*導航欄中字體大小*/
color: #999; /*字體顏色*/
}
.city{ /*定義“北京”的左外邊距，給logo倒出位置*/
margin-left: 200px;
}
.shortcut li{ /*列表本來是豎着排列，浮動后變為一行*/
float: left;
}
.space{ /*間隔的小豎線*/
width: 1px;
height: 10px;
background-color: #ccc;
margin:10px 12px 0;
}
.f10{ /*常用的紅色單獨定義出來*/
color: #f10215;
}
②引入字體圖標：
下載字體圖標地址：https://icomoon.io/
點擊這個按鈕，選擇想要的圖標，進行下載~
將下載好的壓縮包解壓，font文件夾下得到下面4個文件，放入項目的fonts文件夾中。
引入字體圖標步驟：
1）打開壓縮包中的demo.html。復制想要的圖標到 i 標簽中，將 i 標簽插入到需要字體圖標的位置。
2）在css文件中聲明字體圖標：將壓縮包中的style.css前面的聲明代碼復制到我們的css文件中，修改成正確的路徑。
3）調用字體圖標。
font-style：normal ，去掉 i 默認的傾斜樣式
③手機京東下面的二維碼
如果直接在手機京東后加圖片，會把手機京東這幾個字擠下來
解決辦法：給它們開啟定位
3.logo部分
分析：
①左邊的logo
②搜索框
搜索欄和按鈕之間會有縫隙，按鈕較小時會被擠下來，讓他們都浮動即可解決
③購物車
④關鍵詞
⑤下邊的小導航
⑥右下角小廣告
知識點：
<!-- 頭部中間部分開始 -->
<div class="w middle">
<div class="logo">
<h1> <!-- 提高權重 便利於搜索引擎優化 -->
<a href="#"></a>
</h1>
</div>
<!-- 搜索 -->
<div class="form">
<input type="text" placeholder="筆記本電腦">
<!-- 按鈕的意思 雙標簽 等價於 <input type="button" value=""> -->
<button> <i></i> </button>
</div>
<!-- 購物車 -->
<div class="shopCar">
<i></i><a href="#" class="f10">我的購物車</a> <span>0</span>
</div>
<!-- 關鍵詞 -->
<div class="hotwords">
<a href="#" class="f10">199減100</a>
<a href="#">鼠標試用</a>
<a href="#">農資7折</a>
<a href="#">低至29元</a>
<a href="#">抽獎贏空調</a>
<a href="#">記憶棉</a>
<a href="#">坐墊</a>
<a href="#">1分錢買油</a>
<a href="#">智能手表</a>
</div>
<!-- 小導航部分 -->
<div class="navitems">
<ul>
<li><a href="#">秒殺</a></li>
<li><a href="#">優惠券</a></li>
<li><a href="#">閃購</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="#">全球購</a></li>
<li class="space"></li>
<li><a href="#">京東金融</a></li>
</ul>
</div>
<!-- 超級日部分 -->
<div class="super">
<a href="#"><img src="images/super.png" height="40" width="190" alt=""></a>
</div>
</div><!-- 頭部中間部分結束 -->
css：
/*頭部中間部分開始*/
.middle {
height: 140px;
position: relative;
}
.logo {
position: absolute;
top: -30px;
left: 0;
box-shadow: 0px -10px 10px rgba(0,0,0,.3);
}
.logo a {
display: block;
width: 190px;
height: 170px;
background: #fff url(../images/logo.png) no-repeat;
}
/* 搜索框 */
.form {
width: 550px;
height: 35px;
position: absolute;
top: 25px;
left: 320px;
}
.form input {
width: 495px;
height: 33px;
border: 1px solid #f10215;
float: left;
font-size: 14px;
padding-left:3px;
}
.form button {
width: 50px;
height: 35px;
background-color: #f10215;
float: left;
}
.form button i {
font-family: 'icomoon';
font-style: normal;
color: #fff;
}
/* 購物車 */
.shopCar {
width: 188px;
height: 33px;
line-height: 33px;
border: 1px solid #ccc;
position: absolute;
top: 25px;
right: 95px;
background-color: #fff;
text-align: center;
color: #f10215;
}
.shopCar i {
font-family: 'icomoon';
margin-right: 5px;
font-style: normal;
}
.shopCar span {
width: 15px;
height: 15px;
background-color: #f10215;
border-radius: 50%;
position: absolute; /* 加了絕對定位 固定定位 浮動的行內元素， 可以不用轉換，直接給寬度和高度 */
top: 5px;
right: 30px;
font-size: 12px;
color: #fff;
line-height: 15px;
}
/* 關鍵詞模塊 */
.hotwords {
position: absolute;
top: 68px;
left: 320px;
}
/* 小導航模塊 */
.navitems {
width: 770px;
height: 40px;
position: absolute;
bottom: 0;
left: 200px;
line-height: 40px;
}
.navitems li {
float: left;
margin-left: 30px;
}
.navitems li a {
font-size: 16px;
font-weight: 700;
color: #555;
}
.navitems li a:hover {
color: #f10215;
}
.navitems .space {
/* margin-top: 15px;
margin-left:15px;
margin-right: -15px; */
margin:15px -15px 0 15px;
}
/* 超級日 */
.super {
position: absolute;
bottom: 10px;
right: 0;
}
/*頭部中間部分結束*/
底部
分析：footer標簽，里面兩個div
①多快好省部分
品類齊全···文字部分直接給margin-left，‘多’（使用雪碧圖）定位到文字左邊，不占空間
text-indent 設置負值，可以隱藏文字，一般是-999px。
li浮動后，脫離文檔流，高度坍塌，給父元素清除浮動即可
②購物指南部分
兩個部分，‘購物指南’那五欄整體左浮動，右邊‘京東自營覆蓋區縣’部分右浮動
sublime快捷鍵：快速到達某行，ctrl + g，輸入行數，回車
‘購物指南部分’用dd、dl標簽實現
box-sizing:border-box;（稍后補充相關知識點）
中間部分
准備工作：
頭部和底部屬於公共樣式，在css文件夾中再新建一個index.css，寫中間部分css樣式
模塊划分：
首先一個大盒子，給一個高度480px
大盒子中有左中右三個盒子
①左側分類部分
使用ul、li實現
撐開文字整體與盒子間上下左右的間距：
給ul設置上下padding
給li設置左右padding
撐開每行文字間的間距：
給li里的a設置margin
撐開行與行文字間的間距：
給li指定line-height
鼠標放置變色：
li：hover
a：hover
②中間banner部分
上邊一個大盒子，大盒子下面並排兩個小盒子，‘品’型。
箭頭垂直居中：
transform : translateY(-50%)
bug：左邊的箭頭跑出去了，稍后解決
圖片上翻頁的小圓點：
用ul，li + 浮動實現
③右側盒子模塊
模塊划分：
3個盒子組成，分別是登錄、促銷公告和服務模塊。
登錄模塊：
上邊登錄注冊部分+下部分（兩個按鈕）
上部分：寬度就是文字部分寬度，給圖片絕對定位
促銷公告模塊：
樣式沒生效可能是權重不夠的問題。
促銷下的紅線用一個單獨的div底邊框+定位實現
下半部分用ul+li實現
服務模塊：
用ul和li實現，每個li有個邊框。
給li設置浮動解決框框排成一豎排的問題
每個li盒子的寬度給多了，會擠到下一行，解決辦法：給ul的寬度調大一些，
使用overflow：hidden將右側和下側多余部分隱藏
④分類左側的彈出廣告部分
鼠標放到廣告條上，顯示一張大的廣告圖片
廣告條在左側分類大盒子里，再定位到左邊
動畫效果：過渡（一開始大圖片寬度設置為0，鼠標放上去大圖片寬度恢復）