【前端】【html/css】前端學習之路（十四）（製作京東專案心得）（完）
1.事前準備
（1）工具使用的是 Webstrom的最新版 和 Fireworks 8 作為切圖的輔助工具。
（2）準備CSS Reset類庫（normalize.css），為跨瀏覽器相容做準備（也可以直接使用京東網站的初始化）
|
normalize.css 只是一個很小的CSS檔案，但它在預設的HTML元素樣式上提供了跨瀏覽器的高度一致性。相比於傳統的CSS reset，Normalize.css是一種現代的、為HTML5準備的優質替代方案。Normalize.css現在已經被用於Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及許許多多其他框架、工具和網站上。 - 保護有用的瀏覽器預設樣式而不是完全去掉它們 - 一般化的樣式：為大部分HTML元素提供 - 修復瀏覽器自身的bug並保證各瀏覽器的一致性 - 優化CSS可用性：用一些小技巧 - 解釋程式碼：用註釋和詳細的文件來 |
（3）獲取ico圖示
在每個網頁上都有一個標誌：
我們可以通過在其連結後加上 favicon.ico 也就是：
同時將取得的ico檔案放置於專案的根目錄，也就是：
然後將下列程式碼置於<head></head>中
| 程式碼： <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/> |
2.網站優化三大標籤
（1）網頁標題（Title）
title是內頁的第一個重要標籤，是搜尋引擎瞭解網頁的入口，也是對網頁歸屬的最佳判斷點。
建議命名格式：網站名（產品名）- 網站的介紹
（2）網站說明（Description）
對比關鍵詞沒有那麼重要，但是很多搜尋引擎都會直接採用meta標籤中的網站說明部分作為搜尋結果的“內容摘要”，也就是簡要說明網頁的目的。
格式：
| <meta name="description" content="京東JD.COM-專業的綜合網上購物商城,銷售家電、數碼通訊、電腦、家居百貨、服裝服飾、母嬰、圖書、食品等數萬個品牌優質商品.便捷、誠信的服務，為您提供愉悅的網上購物體驗!" /> |
如搜尋“小米”結果如下：
而在其原始碼中：
Description作為網頁的總體業務和主題概括，建議多采用 “我們是…”“我們提供…” “×××網作為…” “電話：010…”之類語句。
（3）關鍵詞（Keyword）
Keyword是頁面關鍵字，是搜尋引擎的關注重點之一，應該限制在6-8個詞左右。
格式：
|
3.網頁佈局小知識點
（1）網頁佈局穩定性
網頁製作要善於用F12來檢查網頁，使用
使用該標誌就可以對網頁的佈局進行檢視，檢查各個部分是否出錯，而各個部分顏色代表部分如下：
（2）寬度剩餘法
| 知識點 | 說明 |
|---|---|
| 浮動元素特性 |
1. 浮動可以讓多個元素同一行顯示 2. 浮動的元素是頂部對齊 |
| logo優化 | text-indent: -20000px; 隱藏文字（文字必須存在，方便搜尋引擎查詢）， 背景圖片 |
| 清除浮動 | 清除浮動的目的就是為了解決父親高度為0（導致下方盒子往上走）的問題 |
| 滑鼠樣式 |
cursor: pointer; 小手 cursor: move; 四角箭頭 cursor: text; 插入游標 cursor: default; 小白 |
| 不允許換行 | white-space: nowrap; |
（3）nav導航欄所用知識點
| 知識點 | 說明 |
|---|---|
| 邊框底側 | border-bottom: 2px solid #ccc; |
| 定位重點 | 絕對定位不佔位置 相對定位佔有位置 |
| 標籤語義化dl | dl也是塊級元素 dt 是 定義標題 dd 是定義描述，dd是圍繞這dt來描述的，也就是說，dd算是dt 的解釋說明詳細分解。 |
| 標題標籤h | 儘量少用h1，可以多用h2和h3等標籤 |
（4）頁面底部所用知識點
| 知識點 | 說明 |
|---|---|
| 絕對定位的盒子居中對齊 |
盒子 left 50% 然後通過 margin 負值自己的寬度一半（固定定位也是如此） |