京東首頁項目總述
這里做一個京東首頁的項目。主要目的是總結和提高 HTML+ CSS 技術。該項目暫不涉及JS相關技術。
一、首頁效果
先看首頁完成最終完成的效果
說明 附上項目 github地址。
二、項目介紹
1、設計目標
- 熟悉CSS+DIV布局，頁面的搭建工作
- 了解常用電商類網站的布局模式
2、瀏覽器兼容問題
因為瀏覽器的不同，所以需要我們在前端開發的時候去兼容不同的瀏覽器，而這部分css樣式肯定不需要我們自己去寫，這里使用一個叫CSS Rest 類庫,為跨瀏覽器兼容做准備。
normalize.css 只是一個很小的CSS文件，但它在默認的HTML元素樣式上提供了跨瀏覽器的高度一致性。它的作用如下：
- 保護有用的瀏覽器默認樣式而不是完全去掉它們
- 一般化的樣式：為大部分HTML元素提供
- 修復瀏覽器自身的bug並保證各瀏覽器的一致性
- 優化CSS可用性：用一些小技巧
- 解釋代碼：用注釋和詳細的文檔來
3、技術棧
HTML5 結構 + CSS3 布局 (在這里不涉及到JS 和 后端技術)
4、目錄說明
要實現結構和樣式相分離的設計思想。 根目錄下有這4個文件。
寫代碼之前，先引入css基礎公共樣式文件
<!-- 引入css初始化文件-->
<link rel="stylesheet" href="css/normalize.css">
<!-- 頭部和底部結構基本相同 做基本公共樣式-->
<link rel="stylesheet" href="css/base.css">
base.css是基本公共樣式，和初始化文件都放在css文件夾中。
三、SEO優化
概念 SEO 中文意譯為“搜索引擎優化”！SEO是指通過對網站進行站內優化和站外優化，從而提高網站的關鍵詞排名以及公司產品的曝光度。
站內優化中網頁SEO涉及到3個關鍵字： title(標題)、Description(網站說明)、Keywords(關鍵字)
1、title (標題)
title具有不可替代性，是我們的內頁第一個重要標簽，是搜索引擎了解網頁的入口，和對網頁主題歸屬的最佳判斷點。
重點 對於標題而言最先出現的詞它的權重越高。所以對於網站首頁標題建議：**網站名（產品名）- 網站的介紹 **
例如
京東 ：京東(JD.COM)-正品低價、品質保障、配送及時、輕松購物！
簡書：簡書 - 創作你的創作。
淘寶：淘寶網 - 淘！我喜歡。
2、Description (網站說明)
對於關鍵詞的作用明顯降低，但由於很多搜索引擎，仍然大量采用網頁的MATA標簽中描述部分作為搜索結果的“內容摘要”。 就是簡要說明我們網站的主要做什么的。
Description作為網站的總體業務和主題概括，多采用“我們是…”“我們提供…”“×××網作為…”“之類語句。
建議
1. 描述中出現關鍵詞，與正文內容相關，這部分內容是給人看的，所以要寫的很詳細，讓人感興趣， 吸引用戶點擊。
2. 同樣遵循簡短原則，字符數含空格在內不要超過 120 個漢字。
3. 補充在 title 和 keywords 中未能充分表述的說明.
4. 用英文逗號 關鍵詞1,關鍵詞2
例如
京東：京東JD.COM-專業的綜合網上購物商城,銷售家電、數碼通訊、電腦、家居百貨、服裝服飾、母嬰、圖書、食品等數萬個品牌優質商品.便捷、
誠信的服務，為您提供愉悅的網上購物體驗!
簡書：簡書是一個優質的創作社區，在這里，你可以任性地創作，一篇短文、一張照片、一首詩、一幅畫……我們相信，每個人都是生活中的藝術
家，有着無窮的創造力。
淘寶：淘寶網 - 亞洲較大的網上交易平台，提供各類服飾、美容、家居、數碼、話費/點卡充值… 數億優質商品，同時提供擔保交易(先收貨后付款)
等安全交易保障服務，並由商家提供退貨承諾、破損補寄等消費者保障服務，讓你安心享受網上購物樂趣！
3、Keywords (關鍵字)
Keywords是頁面關鍵詞，是搜索引擎關注點之一。Keywords應該限制在6～8個關鍵詞左右，電商類網站可以多 少許。
例如
京東：網上購物,網上商城,手機,筆記本,電腦,MP3,CD,VCD,DV,相機,數碼,配件,手表,存儲卡,京東
簡書：簡書,簡書官網,圖文編輯軟件,簡書下載,圖文創作,創作軟件,原創社區,小說,散文,寫作,閱讀
淘寶：淘寶,掏寶,網上購物,C2C,在線交易,交易市場,網上交易,交易市場,網上買,網上賣,購物網站,團購,網上貿易,安全購物,電子商務,放心買,供應,
買賣信息,網店,一口價,拍賣,網上開店,網絡購物,打折,免費開店,網購,頻道,店鋪
四、favicon.ico圖標
1、什么是favicon.ico
概念 所謂favicon，便是其可以讓瀏覽器的收藏夾中除顯示相應的標題外，還以圖標的方式區別不同的網站。
我們看到標題左邊的那個小圖標就是favicon.ico，簡書、京東、百度、淘寶都有它們自己的ico。
2、引用favicon.ico
引入這個ico其實很簡單，只需一行代碼，放在 head 標簽中間。
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
注意 為了兼容性，將favicon.ico 這個圖標放到根目錄下。
3、轉換favicon.ico圖標
我們可以自己做的圖片，轉換為 ico圖標，以便放到我們站點里面。 http://www.bitbug.net/
你如果願意有所作為，就必須有始有終。(11)