CSS Rest 類庫(kù),為跨瀏覽器兼容做準(zhǔn)備(也可以直接運(yùn)用jd網(wǎng)站的初始化)
normalize.css 只是一個(gè)很小的CSS文件批狱，但它在默認(rèn)的HTML元素樣式上提供了跨瀏覽器的高度一致性。相比于傳統(tǒng)的CSS reset壕翩，Normalize.css是一種現(xiàn)代的催享、為HTML5準(zhǔn)備的優(yōu)質(zhì)替代方案。Normalize.css現(xiàn)在已經(jīng)被用于Twitter Bootstrap廊敌、HTML5 Boilerplate铜跑、GOV.UK、Rdio骡澈、CSS Tricks 以及許許多多其他框架疼进、工具和網(wǎng)站上。 你值得擁有秧廉。。
- 保護(hù)有用的瀏覽器默認(rèn)樣式而不是完全去掉它們
- 一般化的樣式：為大部分HTML元素提供
- 修復(fù)瀏覽器自身的bug并保證各瀏覽器的一致性
- 優(yōu)化CSS可用性：用一些小技巧
- 解釋代碼：用注釋和詳細(xì)的文檔來
要實(shí)現(xiàn)結(jié)構(gòu)和樣式相分離的設(shè)計(jì)思想疼电。 根目錄下有這4個(gè)文件（目錄）。
| 名稱 | 說明 |
|---|---|
| css | 用于存放CSS文件 |
| images | 用于存放圖片 |
| index | 京東首頁(yè) HTML |
| js | 用于后期存放javascript文件 |
寫代碼之前减拭，先引入css初始化文件和創(chuàng)建base.css
基礎(chǔ)公共樣式文件
<!-- 引入css初始化文件-->
<link rel="stylesheet" href="css/normalize.css">
<!-- 頭部和底部結(jié)構(gòu)基本相同 做基本公共樣式-->
<link rel="stylesheet" href="css/base.css">
base.css是基本公共樣式蔽豺，和初始化文件都放在css文件夾中
按格式輸入例如： jd.com/favicon.ico 幾乎每個(gè)網(wǎng)站的ico圖標(biāo)都能找到拧粪、
https://www.taobao.com/favicon.ico
https://www.jd.com/favicon.ico
代碼：
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
注意：
- 它不是iconfont字體修陡，是圖標(biāo)。
- 位置是放到 head 標(biāo)簽中間可霎。
- 后面的type="image/x-icon" 屬性可以省略魄鸦。
- 為了兼容性，將favicon.ico 這個(gè)圖標(biāo)放到根目錄下癣朗。
轉(zhuǎn)換ico圖標(biāo)
我們可以自己做的圖片拾因，轉(zhuǎn)換為 ico圖標(biāo)，以便放到我們站點(diǎn)里面。 http://www.bitbug.net/
網(wǎng)站優(yōu)化三大標(biāo)簽
Title绢记、 Description扁达、Keywords
SEO是由英文Search Engine Optimization縮寫而來， 中文意譯為“搜索引擎優(yōu)化”蠢熄！SEO是指通過對(duì)網(wǎng)站進(jìn)行站內(nèi)優(yōu)化跪解、網(wǎng)站結(jié)構(gòu)調(diào)整、網(wǎng)站內(nèi)容建設(shè)签孔、網(wǎng)站代碼優(yōu)化等)和站外優(yōu)化叉讥，從而提高網(wǎng)站的關(guān)鍵詞排名以及公司產(chǎn)品的曝光度。 簡(jiǎn)單的說就是骏啰，把產(chǎn)品做好节吮，搜索引擎就會(huì)介紹客戶來。
我們現(xiàn)在階段主要進(jìn)行站內(nèi)優(yōu)化判耕。網(wǎng)站優(yōu)化透绩，我們應(yīng)該要懂。壁熄。帚豪。
網(wǎng)頁(yè)title 標(biāo)題
title具有不可替代性，是我們的內(nèi)頁(yè)第一個(gè)重要標(biāo)簽草丧，是搜索引擎了解網(wǎng)頁(yè)的入口狸臣，和對(duì)網(wǎng)頁(yè)主題歸屬的最佳判斷點(diǎn)
標(biāo)題的長(zhǎng)度： google 35個(gè)中文，百度 28個(gè)中文
關(guān)鍵字分布： 最先出現(xiàn)的詞語權(quán)重越高
關(guān)鍵字詞頻 主關(guān)鍵詞出現(xiàn)3次
輔關(guān)鍵詞出現(xiàn)1次
建議：
首頁(yè)標(biāo)題：網(wǎng)站名（產(chǎn)品名）- 網(wǎng)站的介紹
例如：
京東(JD.COM)-綜合網(wǎng)購(gòu)首選-正品低價(jià)昌执、品質(zhì)保障烛亦、配送及時(shí)、輕松購(gòu)物懂拾！
小米商城 - 小米5s煤禽、紅米Note 4、小米MIX岖赋、小米筆記本官方網(wǎng)站
Description 網(wǎng)站說明
對(duì)于關(guān)鍵詞的作用明顯降低檬果，但由于很多搜索引擎，仍然大量采用網(wǎng)頁(yè)的MATA標(biāo)簽中描述部分作為搜索結(jié)果的“內(nèi)容摘要”唐断。 就是簡(jiǎn)要說明我們網(wǎng)站的主要做什么的选脊。
我們提倡，Description作為網(wǎng)站的總體業(yè)務(wù)和主題概括脸甘，多采用“我們是…”“我們提供…”“×××網(wǎng)作為…”“電話：010…”之類語句恳啥。
京東網(wǎng)：
<meta name="description" content="京東JD.COM-專業(yè)的綜合網(wǎng)上購(gòu)物商城,銷售家電、數(shù)碼通訊斤程、電腦角寸、家居百貨菩混、服裝服飾、母嬰扁藕、圖書沮峡、食品等數(shù)萬個(gè)品牌優(yōu)質(zhì)商品.便捷、誠(chéng)信的服務(wù)亿柑，為您提供愉悅的網(wǎng)上購(gòu)物體驗(yàn)!" />
注意點(diǎn)：
- 描述中出現(xiàn)關(guān)鍵詞邢疙，與正文內(nèi)容相關(guān)，這部分內(nèi)容是給人看的望薄，所以要寫的很詳細(xì)疟游，讓人感興趣， 吸引用戶點(diǎn)擊痕支。
- 同樣遵循簡(jiǎn)短原則颁虐，字符數(shù)含空格在內(nèi)不要超過 120 個(gè)漢字。
- 補(bǔ)充在 title 和 keywords 中未能充分表述的說明.
- 用英文逗號(hào)隔開 關(guān)鍵詞1,關(guān)鍵詞2
<meta name="description" content="小米商城直營(yíng)小米公司旗下所有產(chǎn)品卧须，囊括小米手機(jī)系列小米MIX另绩、小米Note 2，紅米手機(jī)系列紅米Note 4花嘶、紅米4笋籽，智能硬件，配件及小米生活周邊椭员，同時(shí)提供小米客戶服務(wù)及售后支持车海。" />
Keywords 關(guān)鍵字
Keywords是頁(yè)面關(guān)鍵詞，是搜索引擎關(guān)注點(diǎn)之一隘击。Keywords應(yīng)該限制在6～8個(gè)關(guān)鍵詞左右侍芝，電商類網(wǎng)站可以多 少許。
京東網(wǎng)：
<meta name="Keywords" content="網(wǎng)上購(gòu)物,網(wǎng)上商城,手機(jī),筆記本,電腦,MP3,CD,VCD,DV,相機(jī),數(shù)碼,配件,手表,存儲(chǔ)卡,京東" />
小米網(wǎng)：
<meta name="keywords" content="小米,小米6,紅米Note4,小米MIX,小米商城" />
三打標(biāo)簽的優(yōu)化：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>京東</title>
<!-- 引入ico圖標(biāo)-->
<link rel="shortcut icon" href="favicon.ico">
<!-- 引入css初始化文件-->
<link rel="stylesheet" href="css/normalize.css">
<!-- 頭部和底部結(jié)構(gòu)基本相同 做基本公共樣式-->
<link rel="stylesheet" href="css/base.css">
<!-- title部分 盡量不超過28個(gè)中文字 百度不支持-->
<title>京東(JD.COM)-正品低價(jià)埋同、品質(zhì)保障竭贩、配送及時(shí)、輕松購(gòu)物莺禁！</title>
<!--description 盡量不超過120個(gè)漢字-->
<meta name="description" content="京東JD.COM-專業(yè)的綜合網(wǎng)上購(gòu)物商城，為您提供正品低價(jià)的購(gòu)物選擇窄赋、優(yōu)質(zhì)便捷的服務(wù)體驗(yàn)哟冬。商品來自全球數(shù)十萬品牌商家，囊括家電忆绰、手機(jī)浩峡、電腦、服裝错敢、居家翰灾、母嬰缕粹、美妝、個(gè)護(hù)纸淮、食品平斩、生鮮等豐富品類，滿足各種購(gòu)物需求咽块。" />
<!--6-8個(gè)關(guān)鍵詞绘面，公司的主要產(chǎn)品，給搜索引擎看的-->
<meta name="Keywords" content="網(wǎng)上購(gòu)物,網(wǎng)上商城,家電,手機(jī),電腦,服裝,居家,母嬰,美妝,個(gè)護(hù),食品,生鮮,京東" />
</head>
<body>
</body>
</html>
頂部（快捷菜單）所用知識(shí)點(diǎn)
| 知識(shí)點(diǎn) | 說明 |
|---|---|
| 通欄的盒子 | 不用給寬度 默認(rèn)為 100% ?但是加了浮動(dòng)和定位的盒子需要 添加 100% |
| 盒子居中對(duì)齊 | margin: auto; 注意必須有寬度的塊級(jí)元素侈沪，文字水平居中對(duì)齊是 text-align:center; |
| 行高會(huì)繼承 | 文字性質(zhì)的揭璃，比如 顏色、文字大小亭罪、字體瘦馍、行高等會(huì)繼承父級(jí)元素 |
| 浮動(dòng)元素、固定定位应役，絕對(duì)定位會(huì)模式轉(zhuǎn)換 | 具有行內(nèi)塊特性情组，比如一行放多個(gè)，有高度和寬度扛吞，如果沒有指定寬度呻惕，則會(huì)根據(jù)內(nèi)容多少撐開。 |
logo 和搜索 header 區(qū)域所用知識(shí)點(diǎn)
網(wǎng)頁(yè)布局穩(wěn)定性
寬度剩余法：
| 知識(shí)點(diǎn) | 說明 |
|---|---|
| 浮動(dòng)元素特性 | 1. 浮動(dòng)可以讓多個(gè)元素同一行顯示 2. 浮動(dòng)的元素是頂部對(duì)齊 |
| logo優(yōu)化 | text-indent: -20000px; 隱藏文字滥比， 背景圖片 |
| 清除浮動(dòng) | 清除浮動(dòng)的目的就是為了解決父親高度為0的問題 |
| 鼠標(biāo)樣式 | cursor: pointer; 小手 cursor: move; 四角箭頭 cursor: text; 插入光標(biāo) cursor: default; 小白 |
| 不允許換行 | white-space: nowrap; |
nav導(dǎo)航欄所用知識(shí)點(diǎn)
| 名稱 | 說明 |
|---|---|
| 邊框底側(cè) | border-bottom: 2px solid #ccc; |
| 定位重點(diǎn) | 絕對(duì)定位不占位置 相對(duì)定位占有位置 |
| 標(biāo)簽語義化dl | dl也是塊級(jí)元素 dt 是 定義標(biāo)題 dd 是定義描述亚脆，dd是圍繞這dt來描述的，也就是說盲泛，dd算是dt 的解釋說明詳細(xì)分解濒持。 |
| 標(biāo)題標(biāo)簽h | 盡量少用h1，可以多用h2和h3等標(biāo)簽 |
頁(yè)面底部所用知識(shí)點(diǎn)
| 名稱 | 說明 |
|---|---|
| 絕對(duì)定位的盒子居中對(duì)齊 | 盒子 left 50% 然后通過 margin 負(fù)值自己的寬度一半（固定定位也是如此） |
固定定位的盒子靠近版心右側(cè)對(duì)齊
跟絕對(duì)定位的盒子居中對(duì)齊原理差不多寺滚。
left 50% 然后 margin-left 版心寬度一半柑营。
學(xué)習(xí)目標(biāo):
掌握京東中間部分制作
理解BFC使用
了解優(yōu)雅降級(jí)和漸進(jìn)增強(qiáng)
-
了解CSS壓縮和驗(yàn)證工具
typora-copy-images-to: media
焦點(diǎn)圖部分所用知識(shí)點(diǎn)
| 名稱 | 說明 |
|---|---|
| 圓角矩形 | border-radius: 左上角 右上角 右下角 左下角。 |
負(fù)值自己的寬度一半（固定定位也是如此）
背景半透明
1.強(qiáng)烈推薦： background: rgba(r,g,b,alpha);
? r,g,b 是紅綠藍(lán)的顏色村视， alpha 是透明度的意思官套，取值范圍是 0~1 之間。
2.了解ie低版本瀏覽器 半透明
filter:Alpha(opacity=50) 蚁孔； // opacity值為0 到 100
但是 此屬性是盒子半透明奶赔，不是背景半透明哦，因?yàn)槔锩娴膬?nèi)容也一起半透明了
因此杠氢，低版本的 ie6.7瀏覽器站刑，我們不需要透明了，直接采用優(yōu)雅降級(jí)的做法鼻百。
background: gary;
background: rgba(0,0,0,.2);
寫上兩句 背景绞旅， 低版本ie只執(zhí)行g(shù)ray摆尝， 其他瀏覽器執(zhí)行 半透明下面這一句。
BFC(塊級(jí)格式化上下文)
BFC(Block formatting context)
直譯為"塊級(jí)格式化上下文"因悲。
元素的顯示模式
我們前面講過 元素的顯示模式 display堕汞。
分為 塊級(jí)元素 行內(nèi)元素 行內(nèi)塊元素 ，其實(shí)囤捻，它還有很多其他顯示模式臼朗。
那些元素會(huì)具有BFC的條件
不是所有的元素模式都能產(chǎn)生BFC，w3c 規(guī)范：
display 屬性為 block, list-item, table 的元素蝎土，會(huì)產(chǎn)生BFC.
大家有么有發(fā)現(xiàn)這個(gè)三個(gè)都是用來布局最為合理的元素视哑，因?yàn)樗麄兙褪怯脕砜梢暬季帧?/p>
注意其他的，display屬性誊涯，比如 line 等等挡毅，他們創(chuàng)建的是 IFC ，我們暫且不研究暴构。
這個(gè)BFC 有著具體的布局特性：
有寬度和高度 跪呈， 有 外邊距margin 有內(nèi)邊距padding 有邊框 border。
就好比取逾，你有了練習(xí)武術(shù)的體格了耗绿。 有潛力
，有資質(zhì)砾隅。
什么情況下可以讓元素產(chǎn)生BFC
以上盒子具有BFC條件了误阻，就是說有資質(zhì)了，但是怎樣觸發(fā)才會(huì)產(chǎn)生BFC晴埂，從而創(chuàng)造這個(gè)封閉的環(huán)境呢究反？
同樣，要給這些元素添加如下屬性就可以觸發(fā)BFC儒洛。
-float屬性不為none
-position為absolute或fixed
-display為inline-block, table-cell, table-caption, flex, inline-flex
-overflow不為visible精耐。
BFC元素所具有的特性
BFC布局規(guī)則特性：
1.在BFC中，盒子從頂端開始垂直地一個(gè)接一個(gè)地排列.
2.盒子垂直方向的距離由margin決定琅锻。屬于同一個(gè)BFC的兩個(gè)相鄰盒子的margin會(huì)發(fā)生重疊
3.在BFC中卦停，每一個(gè)盒子的左外邊緣（margin-left）會(huì)觸碰到容器的左邊緣(border-left)（對(duì)于從右到左的格式來說，則觸碰到右邊緣）恼蓬。
- BFC的區(qū)域不會(huì)與浮動(dòng)盒子產(chǎn)生交集沫浆，而是緊貼浮動(dòng)邊緣。
- 計(jì)算BFC的高度時(shí)滚秩，自然也會(huì)檢測(cè)浮動(dòng)或者定位的盒子高度。
它是一個(gè)獨(dú)立的渲染區(qū)域淮捆，只有Block-level box參與郁油， 它規(guī)定了內(nèi)部的Block-level Box如何布局本股，并且與這個(gè)區(qū)域外部毫不相干。
BFC的主要用途
BFC能用來做什么桐腌？
(1) 清除元素內(nèi)部浮動(dòng)
只要把父元素設(shè)為BFC就可以清理子元素的浮動(dòng)了拄显，最常見的用法就是在父元素上設(shè)置overflow: hidden樣式，對(duì)于IE6加上zoom:1就可以了案站。
主要用到
計(jì)算BFC的高度時(shí)躬审，自然也會(huì)檢測(cè)浮動(dòng)或者定位的盒子高度。</pre>
(2) 解決外邊距合并問題
外邊距合并的問題蟆盐。
主要用到
盒子垂直方向的距離由margin決定承边。屬于同一個(gè)BFC的兩個(gè)相鄰盒子的margin會(huì)發(fā)生重疊
屬于同一個(gè)BFC的兩個(gè)相鄰盒子的margin會(huì)發(fā)生重疊，那么我們創(chuàng)建不屬于同一個(gè)BFC石挂，就不會(huì)發(fā)生margin重疊了博助。
(3) 制作右側(cè)自適應(yīng)的盒子問題
主要用到
普通流體元素BFC后，為了和浮動(dòng)元素不產(chǎn)生任何交集痹愚，順著浮動(dòng)邊緣形成自己的封閉上下文
BFC 總結(jié)
BFC就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器富岳，容器里面的子元素不會(huì)影響到外面的元素。反之也如此拯腮。包括浮動(dòng)窖式，和外邊距合并等等，因此动壤，有了這個(gè)特性萝喘，我們布局的時(shí)候就不會(huì)出現(xiàn)意外情況了。
優(yōu)雅降級(jí)和漸進(jìn)增強(qiáng)
什么是漸進(jìn)增強(qiáng)（progressive enhancement）狼电、優(yōu)雅降級(jí)（graceful degradation）呢蜒灰？
漸進(jìn)增強(qiáng) progressive enhancement：
針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁(yè)面，保證最基本的功能肩碟，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果强窖、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)。
類似 爬山削祈，由低出往高處爬
<b>優(yōu)雅降級(jí) graceful degradation：</b>
一開始就構(gòu)建完整的功能翅溺，然后再針對(duì)低版本瀏覽器進(jìn)行兼容。
類似蹦極髓抑，由高處往低處下落
區(qū)別：漸進(jìn)增強(qiáng)是向上兼容咙崎，優(yōu)雅降級(jí)是向下兼容。
個(gè)人建議： 現(xiàn)在互聯(lián)網(wǎng)發(fā)展很快吨拍， 連微軟公司都拋棄了ie瀏覽器褪猛，轉(zhuǎn)而支持 edge這樣的高版本瀏覽器，我們很多情況下沒有必要再時(shí)刻想著低版本瀏覽器了羹饰，而是一開始就構(gòu)建完整的效果伊滋，根據(jù)實(shí)際情況碳却，修補(bǔ)低版本瀏覽器問題。
CSS W3C 統(tǒng)一驗(yàn)證工具
CssStats 是一個(gè)在線的 CSS 代碼分析工具
網(wǎng)址是： http://www.cssstats.com/
如果你想要更全面的笑旺，這個(gè)神奇昼浦，你值得擁有：
W3C 統(tǒng)一驗(yàn)證工具： http://validator.w3.org/unicorn
因?yàn)樗梢詸z測(cè)本地文件哦！筒主！
CSS 壓縮
通過上面的檢測(cè)沒有錯(cuò)誤关噪，為了提高加載速度和節(jié)約空間（相對(duì)來說，css量很少的情況下乌妙，幾乎沒啥區(qū)別）使兔，可以通過css壓縮工具把css進(jìn)行壓縮。
w3c css壓縮 http://tool.chinaz.com/Tools/CssFormat.aspx網(wǎng)速比較慢
還可以去站長(zhǎng)之家進(jìn)行快速壓縮冠胯。
http://tool.chinaz.com/Tools/CssFormat.aspx
