HTML+CSS制作京東項目（中）

時間：2023-10-12 08:18:01 | 來源：網(wǎng)站運營

時間：2023-10-12 08:18:01 來源：網(wǎng)站運營

HTML+CSS制作京東項目（中）：

學習目標:

• 掌握京東項目流程體系
• 掌握網(wǎng)站三大標簽優(yōu)化
• 掌握京東頭部和尾部制作
• 掌握京導航欄制作
• 掌握京東焦點圖制作
• 了解網(wǎng)站三大標簽優(yōu)化
• 理解BFC
• 了解漸進增強和優(yōu)雅降級

typora-copy-images-to: media

京東項目(一)

京東項目介紹

項目名稱：京東網(wǎng) 項目描述：京東首頁公共部分的頭部和尾部制作，京東首頁中間部分。

項目背景

現(xiàn)階段電商類網(wǎng)站很流行，很多同學畢業(yè)之后會進入電商類企業(yè)工作，同時電商類網(wǎng)站需要的技術(shù)也是較為復雜的，這里用京東電商網(wǎng)站復習、總結(jié)、提高前面所學布局技術(shù)。其實，最主要的原因還是，為啥寫京東？ 因為劉強東，賺了我們的錢，搶了我們的女神， 我們也要學劉強東，賺別人的錢，搶別人..額，自己的女神。。。

設計目標

• 保證瀏覽器 ie7及以上, 火狐, 360, safari，chrome等。誰讓我再測ie6，就跟誰急。。
  
• 熟悉CSS+DIV布局，頁面的搭建工作
  
• 了解常用電商類網(wǎng)站的布局模式
  
• 為后期京東移動端做鋪墊
  

幾點思考

(1). 開發(fā)工具 sublime 、fireworks（ps）、各種瀏覽器(ie6.7 要測看心情)

(2). CSS Rest 類庫,為跨瀏覽器兼容做準備(也可以直接運用jd網(wǎng)站的初始化)

normalize.css 只是一個很小的CSS文件，但它在默認的HTML元素樣式上提供了跨瀏覽器的高度一致性。相比于傳統(tǒng)的CSS reset，Normalize.css是一種現(xiàn)代的、為HTML5準備的優(yōu)質(zhì)替代方案。Normalize.css現(xiàn)在已經(jīng)被用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及許許多多其他框架、工具和網(wǎng)站上。 你值得擁有。。 - 保護有用的瀏覽器默認樣式而不是完全去掉它們- 一般化的樣式：為大部分HTML元素提供- 修復瀏覽器自身的bug并保證各瀏覽器的一致性- 優(yōu)化CSS可用性：用一些小技巧- 解釋代碼：用注釋和詳細的文檔來(3). 技術(shù)棧

HTML5 結(jié)構(gòu) + CSS3 布局 (因為我們就會這些。。。嘻嘻)(4). 低版本瀏覽器 單獨制作一個跳轉(zhuǎn)頁面 (都是孩子，也舍不得打，舍不得扔)

https://h5.m.jd.com/dev/3dm8aE4LDBNMkDfcCaRxLnVQ7rqo/index.html

目錄說明

要實現(xiàn)結(jié)構(gòu)和樣式相分離的設計思想。 根目錄下有這4個文件（目錄）。

名稱	說明
css	用于存放CSS文件
images	用于存放圖片
index	京東首頁 HTML
js	用于后期存放javascript文件

運用知識點

引入ico圖標

代碼： <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>注意：

1. 她(它)不是iconfont字體哦。
   
2. 位置是放到 head 標簽中間。
   
3. 后面的type="image/x-icon" 屬性可以省略。（我相信你也愿意省略。）
   
4. 為了兼容性，請將favicon.ico 這個圖標放到根目錄下。（我們就不要任性了，聽話放位置，省很多麻煩。。你好，我也好）
   

轉(zhuǎn)換ico圖標

我們可以自己做的圖片，轉(zhuǎn)換為 ico圖標，以便放到我們站點里面。 http://www.bitbug.net/

網(wǎng)站優(yōu)化三大標簽

SEO是由英文Search Engine Optimization縮寫而來， 中文意譯為“搜索引擎優(yōu)化”！SEO是指通過對網(wǎng)站進行站內(nèi)優(yōu)化、網(wǎng)站結(jié)構(gòu)調(diào)整、網(wǎng)站內(nèi)容建設、網(wǎng)站代碼優(yōu)化等)和站外優(yōu)化，從而提高網(wǎng)站的關(guān)鍵詞排名以及公司產(chǎn)品的曝光度。 簡單的說就是，把產(chǎn)品做好，搜索引擎就會介紹客戶來。

我們現(xiàn)在階段主要進行站內(nèi)優(yōu)化。網(wǎng)站優(yōu)化，我們應該要懂。。。

網(wǎng)頁title 標題

title具有不可替代性，是我們的內(nèi)頁第一個重要標簽，是搜索引擎了解網(wǎng)頁的入口，和對網(wǎng)頁主題歸屬的最佳判斷點。

建議：

首頁標題：網(wǎng)站名（產(chǎn)品名）- 網(wǎng)站的介紹

例如：

京東(http://JD.COM)-綜合網(wǎng)購首選-正品低價、品質(zhì)保障、配送及時、輕松購物！

小米商城 - 小米5s、紅米Note 4、小米MIX、小米筆記本官方網(wǎng)站

Description 網(wǎng)站說明

對于關(guān)鍵詞的作用明顯降低，但由于很多搜索引擎，仍然大量采用網(wǎng)頁的MATA標簽中描述部分作為搜索結(jié)果的“內(nèi)容摘要”。 就是簡要說明我們網(wǎng)站的主要做什么的。 我們提倡，Description作為網(wǎng)站的總體業(yè)務和主題概括，多采用“我們是…”“我們提供…”“×××網(wǎng)作為…”“電話：010…”之類語句。

京東網(wǎng)：

<meta name="description" content="京東JD.COM-專業(yè)的綜合網(wǎng)上購物商城,銷售家電、數(shù)碼通訊、電腦、家居百貨、服裝服飾、母嬰、圖書、食品等數(shù)萬個品牌優(yōu)質(zhì)商品.便捷、誠信的服務，為您提供愉悅的網(wǎng)上購物體驗!" />注意點：

1. 描述中出現(xiàn)關(guān)鍵詞，與正文內(nèi)容相關(guān)，這部分內(nèi)容是給人看的，所以要寫的很詳細，讓人感興趣， 吸引用戶點擊。
2. 同樣遵循簡短原則，字符數(shù)含空格在內(nèi)不要超過 120 個漢字。
3. 補充在 title 和 keywords 中未能充分表述的說明.
4. 用英文逗號 關(guān)鍵詞1,關(guān)鍵詞2

<meta name="description" content="小米商城直營小米公司旗下所有產(chǎn)品，囊括小米手機系列小米MIX、小米Note 2，紅米手機系列紅米Note 4、紅米4，智能硬件，配件及小米生活周邊，同時提供小米客戶服務及售后支持。" />

Keywords 關(guān)鍵字

Keywords是頁面關(guān)鍵詞，是搜索引擎關(guān)注點之一。Keywords應該限制在6～8個關(guān)鍵詞左右，電商類網(wǎng)站可以多 少許。

京東網(wǎng)：

<meta name="Keywords" content="網(wǎng)上購物,網(wǎng)上商城,手機,筆記本,電腦,MP3,CD,VCD,DV,相機,數(shù)碼,配件,手表,存儲卡,京東" />小米網(wǎng)：

<meta name="keywords" content="小米,小米6,紅米Note4,小米MIX,小米商城" />

頂部（快捷菜單）所用知識點

知識點	說明
通欄的盒子	不用給寬度 默認為 100% 但是加了浮動和定位的盒子需要 添加 100%
盒子居中對齊	margin: auto; 注意必須有寬度的塊級元素，文字水平居中對齊是 text-align:center;
行高會繼承	文字性質(zhì)的，比如 顏色、文字大小、字體、行高等會繼承父級元素
浮動元素、固定定位，絕對定位會模式轉(zhuǎn)換	具有行內(nèi)塊特性，比如一行放多個，有高度和寬度，如果沒有指定寬度，則會根據(jù)內(nèi)容多少撐開。

logo 和搜索 header 區(qū)域所用知識點

網(wǎng)頁布局穩(wěn)定性

寬度剩余法：

知識點	說明
浮動元素特性	1. 浮動可以讓多個元素同一行顯示 2. 浮動的元素是頂部對齊
logo優(yōu)化	text-indent: -20000px; 隱藏文字， 背景圖片
清除浮動	清除浮動的目的就是為了解決父親高度為0的問題
鼠標樣式	cursor: pointer; 小手 cursor: move; 四角箭頭 cursor: text; 插入光標 cursor: default; 小白
不允許換行	white-space: nowrap;

nav導航欄所用知識點

名稱	說明
邊框底側(cè)	border-bottom: 2px solid #ccc;
定位重點	絕對定位不占位置 相對定位占有位置
標簽語義化dl	dl也是塊級元素 dt 是 定義標題 dd 是定義描述，dd是圍繞這dt來描述的，也就是說，dd算是dt 的解釋說明詳細分解。
標題標簽h	盡量少用h1，可以多用h2和h3等標簽

頁面底部所用知識點

名稱	說明
絕對定位的盒子居中對齊	盒子 left 50% 然后通過 margin 負值自己的寬度一半（固定定位也是如此）

固定定位的盒子靠近版心右側(cè)對齊

跟絕對定位的盒子居中對齊原理差不多。

left 50% 然后 margin-left 版心寬度一半。