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

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