第1章 寫(xiě)在前面
1.1 本書(shū)約定
1.2 在線查看示例效果
1.3 前后端開(kāi)發(fā)
1.3.1 前端開(kāi)發(fā)是怎么回事？
1.3.2 JavaScript和前端開(kāi)發(fā)是什么關(guān)系？
1.3.4 后端開(kāi)發(fā)是怎么回事
1.4 一張網(wǎng)頁(yè)的是怎么加載出來(lái)的？
1.5 服務(wù)器端和客戶端
1.5.1 服務(wù)器端
1.5.2 客戶端
1.6 HTML和CSS的關(guān)系
1.6.1 HTML是骨架
1.6.2 CSS是皮膚
.
.
........HTML篇
.
第2章 HTML語(yǔ)法
2.1 元素——構(gòu)成網(wǎng)頁(yè)的基本單位
2.2 元素的屬性——元素自身攜帶的功能和特性
2.3 注釋——給代碼添加的備注信息
2.4 本章小結(jié)
.
第3章 布局類(lèi)元素——房子的樓板、柱子和大梁
3.1 布局元素必要的基礎(chǔ)
3.1.1 ＜html＞——最外層的元素，包含網(wǎng)頁(yè)的全部?jī)?nèi)容
3.1.2 ＜head＞——包含給機(jī)器看的內(nèi)容
3.1.3 ＜body＞——包含給人看的內(nèi)容
3.2 其他布局元素
3.2.1 ＜div＞——結(jié)構(gòu)級(jí)別的容器
3.2.2 ＜main＞——用于包裹頁(yè)面的主體內(nèi)容
3.2.3 ＜nav＞——導(dǎo)航欄
3.2.4 ＜header＞——概述
3.2.5 ＜section＞——用于包裹有明確主題的區(qū)域
3.2.6 ＜aside＞——用于包裹非主體的內(nèi)容
3.10 ＜footer＞——頁(yè)腳
3.11 本章小結(jié)
.
第4章 功能類(lèi)元素——房子的門(mén)、窗、水管和電氣
4.1 ＜a＞——鏈接
4.2 ＜h1＞…＜h6＞——標(biāo)題
4.3 ＜img＞——圖片
4.4 ＜p＞——段落
4.5 ＜input＞——單行文本輸入框
4.6 ＜textarea＞——多行文字輸入框
4.7 ＜select＞——下拉菜單
4.8 ＜button＞——按鈕
4.9 ＜form＞——表單
4.10 ＜span＞——文字級(jí)別的容器
4.11 ＜strong＞——強(qiáng)調(diào)
4.12 ＜o(jì)l＞——有序列表
4.13 ＜ul＞——無(wú)序列表
4.14 表格類(lèi)元素
4.15 ＜iframe＞——網(wǎng)頁(yè)里套嵌的網(wǎng)頁(yè)
4.16 本章小結(jié)
.
.
........CSS篇
.
第5章 CSS基礎(chǔ)
5.1 為啥不直接在HTML代碼中寫(xiě)樣式
5.2 了解CSS的語(yǔ)法
5.3 引入CSS
5.3.1 用＜style＞元素引入CSS
5.3.2 用＜link＞元素引入CSS
5.3.3 用@import指令引入CSS
5.3.4 用style屬性嵌入行內(nèi)樣式
5.6 本章小結(jié)
.
第6章 選擇器——確定樣式的作用范圍
6.1 選擇器的類(lèi)型
6.1.1 元素選擇器——div
6.1.2 類(lèi)選擇器——.class
6.1.3 ID選擇器——#id
6.1.4 屬性選擇器——[prop=value]
6.1.5 全局選擇器
6.2 選擇器的組合使用
6.2.1 分組選擇——多個(gè)選擇，一套樣式
6.2.2 多條件選擇——多個(gè)選擇，同一個(gè)元素
6.2.3 后代選擇——通過(guò)“先人”找“后人”
6.2.4 子選擇——通過(guò)“爸爸”找“兒子”
6.2.5 相鄰兄弟選擇——找“弟弟”
6.2.6 通用兄弟選擇——找所有“弟弟”
6.3 偽類(lèi)——按元素狀態(tài)指定樣式
6.4 偽元素——不是元素，勝似元素
6.14 本章小結(jié)
.
第7章 權(quán)重——樣式發(fā)生沖突時(shí)怎么辦
7.1 了解權(quán)重的級(jí)別
7.2 幾種選擇器的權(quán)重
7.2.1 全局選擇器的權(quán)重
7.2.2 ID選擇器和包含ID的屬性選擇器的權(quán)重
7.2.3 權(quán)重最高的關(guān)鍵詞——!important
7.3 繼承
7.4 本章小結(jié)
.
第8章 給文字加樣式
8.1 塊方向和行內(nèi)方向
8.2 text-indent——文字縮進(jìn)
8.3 text-align——文字對(duì)齊
8.4 line-height——行高
8.5 vertical-align——文字垂直對(duì)齊
8.6 字距和詞距
8.7 text-decoration——文字裝飾
8.9 white-space——空白字符
8.10 word-break——換行和斷詞
8.11 本章小結(jié)
.
第9章 字體
9.1 字體族（字體家族）
9.2 font-family——為文字指定字體
9.3 @font-face——為文字指定確切的字體
9.4 font-weight——為字體指定粗細(xì)
9.5 font-size——為字體指定大小
9.6 本章小結(jié)
.
第10章 框模型——所有元素都有四個(gè)框
10.1 識(shí)框模型
10.2 內(nèi)容區(qū)
10.3 padding——內(nèi)邊距
10.4 border——邊框
10.5 margin——外邊距
10.6 本章小結(jié)
.
第11章 框的其他相關(guān)樣式
11.1 outline——輪廓
11.2 color——文字顏色
11.3 background——背景
11.4 box-sizing——框尺寸
11.5 box-shadow——框陰影
11.6 overflow——溢出
11.7 本章小結(jié)
.
第12章 顯示方式——元素怎么顯示
12.1 none——不顯示
12.2 block——占據(jù)母元素的整個(gè)寬
12.3 inline——寬度由內(nèi)容的多少?zèng)Q定
12.4 inline-block——結(jié)合了前兩種顯示方式
12.5 本章小結(jié)
.
第13章 定位方式——元素該顯式在什么位置
13.1 static——往網(wǎng)頁(yè)的左上角流動(dòng)
13.2 relative（相對(duì)定位）
13.3 absolute（絕對(duì)定位）
13.4 fixed（固定定位）——與窗口同步
13.5 sticky（粘滯定位）——自動(dòng)“掛住”
13.6 本章小結(jié)
.
第14章 元素層疊順序
14.1 默認(rèn)情況下的層疊順序
14.2 通過(guò)非static定位方式展示層疊
14.3 通過(guò)z-index手動(dòng)調(diào)整層疊
14.4 本章小結(jié)
.
第15章 值和單位
15.1 關(guān)鍵詞
15.2 字符串
15.3 URL資源地址
15.4 數(shù)字和百分比
15.5 長(zhǎng)度
15.6 計(jì)算值
15.7 顏色
15.8 本章小結(jié)
.
第16章 浮動(dòng)
16.1 理解浮動(dòng)
16.2 單元素浮動(dòng)的顯示方式
16.3 多元素浮動(dòng)的顯示方式
16.3.1 浮動(dòng)容器
16.3.2 多元素浮動(dòng)的關(guān)系
16.4 浮動(dòng)思維模型
16.5 清除浮動(dòng)
16.6 本章小結(jié)
.
第17章 響應(yīng)式布局
17.1 媒體的類(lèi)型
17.2 媒體的特性
17.3 規(guī)則組合
17.4 添加媒體查詢的常見(jiàn)方式
17.5 本章小結(jié)
.
第18章 彈性布局
18.1 彈性盒（Flexbox）
18.2 了解Flex（軸）
18.3 Flex的屬性
18.3.1 flex-direction——控制主軸方向
18.3.2 flex-wrap——子項(xiàng)是否可以換行
18.3.3 flex-flow——同時(shí)指定方向和換行模式
18.3.4 justify-content——主軸方向排列方式
18.3.5 align-items——交叉軸方向排列方式
18.3.6 align-content——行列排列方式
18.3.7 align-self——交叉軸例外排列
18.3.8 flex-grow——侵略剩余空間的胃口
18.3.9 flex-shrink——在空間不足時(shí)做出讓步的“意愿”
18.3.10 flex-basis——彈性子項(xiàng)的基礎(chǔ)尺寸
18.4 本章小結(jié)
.
第19章 網(wǎng)格布局
19.1 一切無(wú)外乎行和列
19.2 容器和子項(xiàng)
19.3 行與列
19.4 網(wǎng)格線
19.5 定義方式網(wǎng)格模板
19.6 調(diào)整網(wǎng)格間距
19.7 調(diào)整子項(xiàng)的位置
19.8 調(diào)整網(wǎng)格中的區(qū)域
19.9 網(wǎng)格排列方式
19.10 本章小結(jié)
.
第20章 動(dòng)畫(huà)
20.1 transition——過(guò)渡
20.2 animation——?jiǎng)赢?huà)
20.3 本章小結(jié)