人人都能學(xué)懂的前端開發(fā)

前言
第1章 準(zhǔn)備工作
1.1什么是前端
1.1.1一道經(jīng)典的面試題
1.1.2前端后端怎么區(qū)分
1.1.3一些小問題
1.2網(wǎng)頁為什么叫HTML
1.2.1常見瀏覽器介紹
1.2.2瀏覽器的規(guī)范與W3C
1.3編寫第一個(gè)網(wǎng)頁
1.4開發(fā)前的準(zhǔn)備工作
1.4.1使用開發(fā)工具
1.4.2代碼基本規(guī)范
補(bǔ)給1：什么是IP
補(bǔ)給2：什么是DNS
補(bǔ)給3：你了解域名嗎
補(bǔ)給4：什么是服務(wù)器
補(bǔ)給5：修改文件擴(kuò)展名
補(bǔ)給6：何為綠色軟件
第2章 準(zhǔn)備工作
2.1寫一篇博客
2.2制作百度新聞列表
2.2.1無序列表
2.2.2有序列表
2.3向網(wǎng)頁中添加圖片
2.3.1圖片的排列方式
2.3.2百分比大小
2.4如何獲取自己喜歡的圖片
2.4.1圖片另存為
2.4.2開發(fā)者工具
2.5先搞懂路徑問題
2.5.1相對路徑與絕對路徑的區(qū)分
2.5.2圖片引入練習(xí)
2.6來模擬個(gè)百度云盤
2.7批量的數(shù)據(jù)展示
2.8個(gè)人簡歷制作
2.9QQ登錄表單
2.10其他屬性
補(bǔ)給1：表單的密碼管理
補(bǔ)給2：常見的圖片格式
第3章 樣式基礎(chǔ)與布局
3.1認(rèn)識(shí)CSS
3.1.1結(jié)構(gòu)表現(xiàn)分離
3.1.2感受樣式的作用
3.1.3提取自己想要的顏色
3.2容器的作用
3.2.1給一篇文章排版
3.2.2div容器
3.2.3span容器
3.3樣式選擇器
3.4樣式為什么會(huì)重疊
3.5優(yōu)先級(jí)可以精確的計(jì)算嗎
3.5.1選擇器的權(quán)重值
3.5.2頭條新聞列表
補(bǔ)給1：顏色為什么用十六進(jìn)制表示
補(bǔ)給2：什么是ID
補(bǔ)給3：代碼注釋的重要性
補(bǔ)給4：什么是權(quán)重值
第4章 圖文的基本處理與混排
4.1文本樣式的處理
4.1.1字體基礎(chǔ)樣式
4.1.2字體排列方式
4.2添加背景圖
4.2.1背景圖與img標(biāo)簽的區(qū)別
4.2.2背景圖的平鋪
4.2.3背景圖的定位
4.2.4平鋪的巧妙利用
4.3浮動(dòng)布局
4.3.1文字環(huán)繞
4.3.2水平排列
4.3.3高度塌陷
4.3.4清除浮動(dòng)影響
4.4完成一個(gè)聊天對話框
4.5浮動(dòng)的進(jìn)階
4.5.1浮動(dòng)元素的排列原則
4.5.2右浮動(dòng)的順序問題
4.5.3浮動(dòng)元素的重疊問題
4.6為什么需要盒模型
4.6.1外邊距margin
4.6.2填充padding
4.6.3邊框border
4.7完成一個(gè)更復(fù)雜的布局
4.8命令的簡寫形式
4.8.1背景background
4.8.2邊框border
4.8.3font字體
4.8.4margin邊距
4.8.5color顏色
4.8.6padding填充
補(bǔ)給1：瀏覽器中的坐標(biāo)系
補(bǔ)給2：控制面板的使用
第5章 頁面布局與基本交互
5.1了解元素類型
5.1.1block與inline
5.1.2水平排列的差異
5.2精準(zhǔn)的定位元素
5.2.1相對定位與絕對定位
5.2.2坐標(biāo)體系
5.2.3固定定位
5.2.4如何確定參考系
5.3鼠標(biāo)的hover效果
5.4濾鏡相冊
5.5精靈圖
補(bǔ)給：制作精靈圖片
第6章 智能表單與BFC規(guī)則
6.1語義化標(biāo)簽
6.1.1語義化的作用
6.1.2常見標(biāo)簽
6.2智能表單制作
6.3其他屬性
6.3.1關(guān)于resize屬性
6.3.2關(guān)于outline屬性
6.4overflow的作用
6.5適當(dāng)了解一下BFC
補(bǔ)給1：什么是URL
補(bǔ)給2：程序漏洞為什么叫BUG
第7章 高級(jí)選擇器與動(dòng)畫
7.1文件圖標(biāo)的添加
7.1.1nth-child(n)
7.1.2屬性選擇器
7.1.3nth-of-type(n)
7.2電影IMDB排行
7.3如何學(xué)習(xí)不常見的CSS選擇器
7.4一個(gè)精致的開關(guān)
7.4.1陰影的概念
7.4.2偽元素
7.4.3背景過渡
7.4.4盒子陰影
7.4.5復(fù)選框的:checked狀態(tài)
7.5過渡效果
7.5.1幀和幀率的概念
7.5.2transition屬性
7.5.3升級(jí)照片墻
7.6綜合練習(xí)
7.7字體圖標(biāo)
補(bǔ)給1：什么是Unicode
補(bǔ)給2：計(jì)算機(jī)為什么會(huì)采用二進(jìn)制
補(bǔ)給3：硬盤為什么會(huì)縮水
第8章 變形與3D
8.1元素也能變形
8.1.1定位與過渡的結(jié)合
8.1.2位移
8.1.3縮放
8.1.4旋轉(zhuǎn)
8.1.5綜合練習(xí)
8.2高級(jí)擴(kuò)展
8.2.1透視與3D效果
8.2.23D翻轉(zhuǎn)菜單
8.2.3自定義幀動(dòng)畫
第9章 移動(dòng)端布局
9.1什么叫響應(yīng)式網(wǎng)頁
9.1.1響應(yīng)式網(wǎng)頁布局
9.1.2媒介查詢
9.2PC端與移動(dòng)端的差別
9.3移動(dòng)端網(wǎng)頁適配
9.4viewport
9.5進(jìn)階技巧
補(bǔ)給：什么是像素
第10章 布局神器flex
10.1彈性盒模型
10.1.1display:flex
10.1.2flex的布局特性
10.1.3水平垂直居中
10.1.4強(qiáng)大的彈性盒模型
10.2移動(dòng)端網(wǎng)頁綜合練習(xí)
第11章 項(xiàng)目實(shí)戰(zhàn)：制作個(gè)人站點(diǎn)
11.1為什么需要個(gè)人網(wǎng)站
11.2動(dòng)手之前先學(xué)點(diǎn)設(shè)計(jì)
11.2.1擬物化與扁平化
11.2.2復(fù)雜的動(dòng)畫如何處理
11.3需要花錢買服務(wù)器嗎
11.4項(xiàng)目的開發(fā)過程
11.5常見特效的實(shí)現(xiàn)
11.5.1動(dòng)態(tài)背景
11.5.2banner圖切換
11.5.3時(shí)間軸效果
11.5.4美化卡片列表
11.5.5打字機(jī)效果
11.6如何添加音頻和視頻
11.6.1添加音頻
11.6.2添加視頻
補(bǔ)給1：世界上第一個(gè)程序員是誰
補(bǔ)給2：藍(lán)光高清與1080P的區(qū)別是什么
附錄A單詞匯總
附錄B知識(shí)點(diǎn)索引