【前端】【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 負值自己的寬度一半(固定定位也是如此) |