第1章 CSS樣式設(shè)計(jì)基礎(chǔ)

視頻講解：27個(gè) 示例：37個(gè)

1.1 網(wǎng)頁設(shè)計(jì)需要學(xué)什么

1.1.1 學(xué)習(xí)HTML

1.1.2 掌握DIV布局

1.1.3 學(xué)習(xí)CSS

1.1.4 學(xué)習(xí)JavaScript

1.2 設(shè)計(jì)良好的結(jié)構(gòu)

1.2.1 一個(gè)簡單的文檔必須包含的
內(nèi)容

1.2.2 認(rèn)識標(biāo)簽

1.2.3 選用標(biāo)簽

1.2.4 使用div和span

1.2.5 使用id和class

1.2.6 設(shè)置文檔類型

1.2.7 認(rèn)識顯示模式

1.3 初識CSS

1.3.1 CSS發(fā)展歷史

1.3.2 CSS優(yōu)勢

1.3.3 CSS樣式

1.3.4 應(yīng)用CSS樣式

1.3.5 CSS樣式表

1.3.6 導(dǎo)入樣式表

1.3.7 CSS注釋和格式化

1.3.8 設(shè)計(jì)第一個(gè)樣式示例

1.4 CSS選擇器

1.4.1 認(rèn)識CSS選擇器

1.4.2 標(biāo)簽選擇器

1.4.3 ID選擇器

1.4.4 類選擇器

1.4.5 指定選擇器

1.4.6 包含選擇器

1.4.7 子選擇器

1.4.8 相鄰選擇器

1.4.9 兄弟選擇器

1.4.10 分組選擇器

1.4.11 偽選擇器

1.4.12 屬性選擇器

1.4.13 通用選擇器

1.5 CSS特性

1.5.1 層疊性

1.5.2 繼承性

第2章 使用CSS設(shè)置字體和文本樣式

視頻講解：19個(gè) 示例：21個(gè)

2.1 字體和文本樣式基礎(chǔ)

2.1.1 字體類型

2.1.2 字體大小

2.1.3 字體顏色

2.1.4 字體粗細(xì)

2.1.5 斜體字體

2.1.6 裝飾線

2.1.7 字體大小寫

2.1.8 文本水平對齊

2.1.9 文本垂直對齊

2.1.10 字間距和詞間距

2.1.11 行高

2.1.12 首行縮進(jìn)

2.2 實(shí)戰(zhàn)案例

2.2.1 模擬百度Logo樣式

2.2.2 定義標(biāo)題樣式

2.2.3 定義正文樣式

2.2.4 設(shè)計(jì)文本塊樣式

2.2.5 設(shè)計(jì)新聞版面

2.2.6 設(shè)計(jì)圖文版面

2.2.7 設(shè)計(jì)單頁版式

第3章 使用CSS設(shè)置圖片樣式

視頻講解：14個(gè) 示例：11個(gè)

3.1 圖片樣式基礎(chǔ)

3.1.1 圖片邊框

3.1.2 圖片大小

3.1.3 圖片對齊

3.1.4 半透明圖片

3.1.5 圓角圖片

3.1.6 陰影圖片

3.2 實(shí)戰(zhàn)案例

3.2.1 設(shè)計(jì)鑲邊效果

3.2.2 設(shè)計(jì)水印效果

3.2.3 圖文混排

3.2.4 圖片布局

3.2.5 多圖版式

3.2.6 圓角欄目

3.2.7 設(shè)計(jì)個(gè)人簡歷1

3.2.8 設(shè)計(jì)個(gè)人簡歷2

第4章 使用CSS控制背景圖像

視頻講解：15個(gè) 示例：13個(gè)

4.1 背景樣式基礎(chǔ)

4.1.1 背景顏色

4.1.2 版塊配色

4.1.3 設(shè)置背景圖像

4.1.4 背景平鋪

4.1.5 背景定位

4.1.6 固定背景

4.1.7 定位參考

4.1.8 背景裁剪

4.1.9 背景大小

4.1.10 多背景圖

4.2 實(shí)戰(zhàn)案例

4.2.1 設(shè)計(jì)帶花紋的網(wǎng)頁邊框

4.2.2 設(shè)計(jì)圓邊頁面

4.2.3 設(shè)計(jì)分欄版式

4.2.4 設(shè)計(jì)滑動門菜單

4.2.5 設(shè)計(jì)焦點(diǎn)圖

第5章 使用CSS定義鏈接樣式

視頻講解：12個(gè) 示例：11個(gè)

5.1 鏈接樣式基礎(chǔ)

5.1.1 設(shè)置鏈接樣式

5.1.2 定義下劃線樣式

5.1.3 定義類型標(biāo)識樣式

5.1.4 定義按鈕樣式

5.1.5 案例：基本鏈接樣式應(yīng)用

5.2 實(shí)戰(zhàn)案例

5.2.1 鼠標(biāo)光標(biāo)樣式

5.2.2 文檔類型提示

5.2.3 工具提示樣式

5.2.4 立體菜單欄

5.2.5 設(shè)計(jì)CSS Sprites導(dǎo)航欄

5.2.6 選項(xiàng)卡

5.2.7 瀏覽大圖

第6章 使用CSS設(shè)計(jì)列表樣式

視頻講解：12個(gè) 示例：6個(gè)

6.1 列表樣式基礎(chǔ)

6.1.1 設(shè)置項(xiàng)目符號

6.1.2 自定義項(xiàng)目圖標(biāo)

6.1.3 定義列表項(xiàng)目的版式

6.2 實(shí)戰(zhàn)案例

6.2.1 設(shè)計(jì)新聞欄目

6.2.2 設(shè)計(jì)導(dǎo)航菜單

6.2.3 設(shè)計(jì)多級菜單

6.2.4 設(shè)計(jì)列表版式

6.2.5 使用列表設(shè)計(jì)圖文混排頁面

6.2.6 設(shè)計(jì)水平滑動菜單

6.2.7 設(shè)計(jì)垂直滑動菜單

6.2.8 設(shè)計(jì)Tab面板

6.2.9 設(shè)計(jì)下拉式面板

第7章 使用CSS設(shè)計(jì)表格樣式

視頻講解：9個(gè) 示例：7個(gè)

7.1 表格樣式基礎(chǔ)

7.1.1 設(shè)置表格背景色和前景色

7.1.2 設(shè)置表格邊框

7.1.3 設(shè)置單元格邊距

7.1.4 設(shè)置表格標(biāo)題的位置

7.1.5 隱藏空單元格

7.2 實(shí)戰(zhàn)案例

7.2.1 設(shè)計(jì)課程表

7.2.2 設(shè)計(jì)通訊錄

7.2.3 設(shè)計(jì)月歷

7.2.4 設(shè)計(jì)分組表格

第8章 使用CSS設(shè)計(jì)表單樣式

視頻講解：8個(gè) 示例：11個(gè)

8.1 表單樣式基礎(chǔ)

8.1.1 定義表單字體樣式

8.1.2 定義表單邊框和邊距樣式

8.1.3 定義表單背景樣式

8.2 實(shí)戰(zhàn)案例

8.2.1 定義表單樣式

8.2.2 設(shè)計(jì)下拉菜單樣式

8.2.3 設(shè)計(jì)注冊表

8.2.4 設(shè)計(jì)調(diào)查表

8.2.5 設(shè)計(jì)反饋表

第9章 使用DIV CSS布局網(wǎng)頁

視頻講解：14個(gè) 示例：14個(gè)

9.1 CSS盒模型

9.1.1 定義邊界

9.1.2 定義補(bǔ)白

9.1.3 定義邊框

9.1.4 定義尺寸

9.2 CSS布局基礎(chǔ)

9.2.1 定義顯示類型

9.2.2 定義顯示模式

9.2.3 網(wǎng)頁布局樣式

9.2.4 設(shè)置浮動顯示

9.2.5 清除浮動

9.2.6 浮動嵌套

9.2.7 網(wǎng)頁布局方法

9.3 實(shí)戰(zhàn)案例

9.3.1 網(wǎng)站重構(gòu)

9.3.2 設(shè)計(jì)兩列網(wǎng)頁

9.3.3 設(shè)計(jì)三列網(wǎng)頁

第10章 使用CSS定位

視頻講解：12個(gè) 示例：13個(gè)

10.1 CSS定位基礎(chǔ)

10.1.1 設(shè)置定位顯示

10.1.2 靜態(tài)定位

10.1.3 絕對定位

10.1.4 相對定位

10.1.5 固定定位

10.1.6 定位包含框

10.1.7 設(shè)置定位偏移

10.1.8 設(shè)置層疊順序

10.1.9 層疊上下文

10.2 實(shí)戰(zhàn)案例

10.2.1 畫冊式網(wǎng)頁定位

10.2.2 展廳式網(wǎng)頁定位

10.2.3 書簽式網(wǎng)頁定位

第11章 網(wǎng)頁版式設(shè)計(jì)與實(shí)戰(zhàn)

視頻講解：14個(gè) 示例：4個(gè)

11.1 HTML結(jié)構(gòu)重構(gòu)

11.1.1 設(shè)計(jì)基本結(jié)構(gòu)

11.1.2 SEO結(jié)構(gòu)優(yōu)化

11.2 單列版式

11.3 兩列版式

11.3.1 彈性版式

11.3.2 固寬版式

11.3.3 混合版式

11.4 三列版式

11.4.1 彈性版式

11.4.2 固寬版式

11.4.3 混合版式

11.4.4 多列等高

11.5 實(shí)戰(zhàn)案例

11.5.1 設(shè)計(jì)單列固寬網(wǎng)頁

11.5.2 設(shè)計(jì)單列彈性框架網(wǎng)頁

11.5.3 設(shè)計(jì)兩列彈性網(wǎng)頁

11.5.4 設(shè)計(jì)三列彈性網(wǎng)頁

第12章 使用CSS3布局網(wǎng)頁

視頻講解：15個(gè) 示例：15個(gè)

12.1 多列流動布局

12.1.1 設(shè)置列寬

12.1.2 設(shè)置列數(shù)

12.1.3 設(shè)置列間距

12.1.4 設(shè)置列邊框樣式

12.1.5 設(shè)置跨列顯示

12.1.6 設(shè)置列高度

12.2 彈性盒布局

12.2.1 定義Flexbox

12.2.2 定義伸縮方向

12.2.3 定義行數(shù)

12.2.4 定義對齊方式

12.2.5 定義伸縮項(xiàng)目

12.3 實(shí)戰(zhàn)案例

12.3.1 比較三種布局方式

12.3.2 設(shè)計(jì)可伸縮網(wǎng)頁模板

12.3.3 設(shè)計(jì)多列網(wǎng)頁

12.3.4 設(shè)計(jì)HTML5應(yīng)用網(wǎng)頁模板

第13章 使用CSS3設(shè)計(jì)動畫

視頻講解：23個(gè) 示例：29個(gè)

13.1 設(shè)計(jì)2D變換

13.1.1 定義旋轉(zhuǎn)

13.1.2 定義縮放

13.1.3 定義移動

13.1.4 定義傾斜

13.1.5 定義矩陣

13.1.6 定義變換原點(diǎn)

13.2 設(shè)計(jì)3D變換

13.2.1 定義位移

13.2.2 定義縮放

13.2.3 定義旋轉(zhuǎn)

13.3 設(shè)計(jì)過渡動畫

13.3.1 設(shè)置過渡屬性

13.3.2 設(shè)置過渡時(shí)間

13.3.3 設(shè)置延遲時(shí)間

13.3.4 設(shè)置過渡動畫類型

13.3.5 設(shè)置觸發(fā)方式

13.4 設(shè)計(jì)幀動畫

13.4.1 設(shè)置關(guān)鍵幀

13.4.2 設(shè)置動畫屬性

13.5 實(shí)戰(zhàn)案例

13.5.1 設(shè)計(jì)掛圖

13.5.2 設(shè)計(jì)高亮顯示

13.5.3 設(shè)計(jì)3D幾何體

13.5.4 設(shè)計(jì)旋轉(zhuǎn)的盒子

13.5.5 設(shè)計(jì)可折疊面板

13.5.6 設(shè)計(jì)翻轉(zhuǎn)廣告

13.5.7 設(shè)計(jì)跑步動畫

第14章 設(shè)計(jì)可響應(yīng)的移動網(wǎng)頁

視頻講解：9個(gè) 示例：7個(gè)

14.1 響應(yīng)式設(shè)計(jì)基礎(chǔ)

14.1.1 響應(yīng)式設(shè)計(jì)流程

14.1.2 設(shè)計(jì)響應(yīng)式圖片

14.1.3 定義媒體類型

14.1.4 使用@media

14.1.5 在中定義媒體查詢

14.1.6 設(shè)計(jì)響應(yīng)式布局

14.2 實(shí)戰(zhàn)案例

14.2.1 根據(jù)設(shè)備控制顯示內(nèi)容

14.2.2 設(shè)計(jì)伸縮菜單

14.2.3 設(shè)計(jì)可響應(yīng)網(wǎng)頁模板

14.2.4 設(shè)計(jì)響應(yīng)式網(wǎng)站首頁

第15章 使用JavaScript控制CSS樣式

視頻講解：39個(gè) 示例：73個(gè)

15.1 在網(wǎng)頁中使用JavaScript

15.1.1 使用

您的姓名	驗(yàn)證碼：
留言內(nèi)容