CSS+DIV網(wǎng)頁樣式與布局從入門到精通

第1章  CSS樣式設(shè)計(jì)基礎(chǔ)
  視頻講解：2小時(shí)38分鐘
1.1  設(shè)計(jì)良好的網(wǎng)頁結(jié)構(gòu)
1.1.1  選用符合語義的標(biāo)簽
1.1.2  文檔類型和瀏覽器模式
1.2  初識(shí)CSS
1.2.1  為什么學(xué)習(xí)CSS
1.2.2  CSS基本語法
1.2.3  設(shè)計(jì)第一個(gè)實(shí)例
1.3  CSS選擇器
1.3.1  CSS選擇器概述
1.3.2  標(biāo)簽選擇器
1.3.3  ID選擇器
1.3.4  類選擇器
1.3.5  偽類和偽對(duì)象選擇器
1.3.6  子選擇器
1.3.7  相鄰選擇器
1.3.8  屬性選擇器
1.3.9  通用選擇器
1.3.10  包含選擇器
1.3.11  分組選擇器
1.3.12  指定選擇器
1.4  CSS基本特性
1.4.1  層疊和特殊性
1.4.2  繼承
1.5  樣式表規(guī)劃、組織和維護(hù)
1.5.1  對(duì)文檔應(yīng)用樣式
1.5.2  對(duì)代碼進(jìn)行注釋
1.5.3  樣式文檔
1.5.4  組織樣式表以便簡(jiǎn)化維護(hù)
1.6  CSS屬性和屬性值
1.6.1  CSS屬性
1.6.2  CSS單位
1.6.3  設(shè)置顏色
第2章  使用CSS設(shè)置字體和文本樣式
  視頻講解：2小時(shí)12分鐘
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  定義文本對(duì)齊
2.1.9  定義垂直對(duì)齊
2.1.10  定義字間距和行間距
2.1.11  定義行間距
2.1.12  定義縮進(jìn)
2.2  案例實(shí)戰(zhàn)
2.2.1  設(shè)計(jì)百度Logo
2.2.2  設(shè)置標(biāo)題樣式
2.2.3  設(shè)置正文樣式
2.2.4  設(shè)置文本樣式
2.2.5  設(shè)置文本段樣式
2.2.6  設(shè)置段落版式樣式
2.2.7  設(shè)計(jì)單頁圖文混排版式
第3章  使用CSS設(shè)置圖片樣式
  視頻講解：1小時(shí)32分鐘
3.1  圖片樣式設(shè)置基礎(chǔ)
3.1.1  定義圖片邊框
3.1.2  定義圖片大小
3.1.3  定義圖片的橫向?qū)R
3.1.4  定義圖片的縱向?qū)R
3.1.5  設(shè)置文字環(huán)繞效果
3.2  案例實(shí)戰(zhàn)
3.2.1  圖文混排
3.2.2  圖片布局
3.2.3  多圖排列
3.2.4  陰影圖片
3.2.5  圓角圖片
3.2.6  設(shè)計(jì)圓角欄目
第4章  使用CSS控制背景圖像
  視頻講解：1小時(shí)38分鐘
4.1  背景樣式設(shè)置基礎(chǔ)
4.1.1  設(shè)置頁面背景顏色
4.1.2  設(shè)置背景顏色給頁面分塊
4.1.3  定義背景圖片
4.1.4  背景圖片的重復(fù)
4.1.5  定義背景圖片的位置
4.1.6  固定背景圖片
4.2  案例實(shí)戰(zhàn)
4.2.1  設(shè)置網(wǎng)頁背景顏色
4.2.2  設(shè)置帶花紋邊框
4.2.3  設(shè)置永遠(yuǎn)固定的背景
4.2.4  設(shè)置圓潤(rùn)的欄目模塊
4.2.5  設(shè)計(jì)分欄版式
4.2.6  設(shè)計(jì)滑動(dòng)門菜單
4.2.7  設(shè)計(jì)燈箱廣告
4.2.8  設(shè)計(jì)博客首頁效果
第5章  使用CSS控制列表樣式
  視頻講解：55分鐘
5.1  列表樣式設(shè)置基礎(chǔ)
5.1.1  設(shè)置列表項(xiàng)符號(hào)
5.1.2  定義項(xiàng)目的圖片符號(hào)
5.1.3  列表的橫豎轉(zhuǎn)換
5.2  案例實(shí)戰(zhàn)
5.2.1  設(shè)計(jì)新聞欄目
5.2.2  設(shè)計(jì)導(dǎo)航菜單
5.2.3  設(shè)計(jì)多級(jí)菜單
5.2.4  列表排版的應(yīng)用
5.2.5  使用列表實(shí)現(xiàn)圖文混排效果
第6章  使用CSS設(shè)計(jì)表格樣式
  視頻講解：45分鐘
6.1  表格樣式設(shè)置基礎(chǔ)
6.1.1  設(shè)置表格顏色
6.1.2  設(shè)置表格邊框
6.2  案例實(shí)戰(zhàn)
6.2.1  美化表格
6.2.2  設(shè)計(jì)高效的表格
6.2.3  讓表格更易用
6.2.4  表格布局
第7章  使用CSS設(shè)計(jì)表單樣式
  視頻講解：1小時(shí)45分鐘
7.1  表單樣式設(shè)置基礎(chǔ)
7.1.1  表單基本結(jié)構(gòu)
7.1.2  設(shè)置基本樣式
7.1.3  定義字體樣式
7.1.4  定義邊框樣式
7.1.5  定義背景樣式
7.2  案例實(shí)戰(zhàn)
7.2.1  設(shè)計(jì)多彩下拉菜單樣式
7.2.2  設(shè)計(jì)注冊(cè)表單
7.2.3  設(shè)計(jì)調(diào)查表
7.2.4  設(shè)計(jì)反饋表
第8章  使用CSS定義鏈接樣式
  視頻講解：1小時(shí)12分鐘
8.1  鏈接樣式設(shè)置基礎(chǔ)
8.1.1  設(shè)置鏈接樣式
8.1.2  設(shè)計(jì)下劃線樣式
8.1.3  設(shè)置類型指示樣式
8.1.4  定義按鈕樣式
8.1.5  定義已訪問樣式
8.1.6  鏈接提示樣式
8.2  案例實(shí)戰(zhàn)
8.2.1  鼠標(biāo)樣式
8.2.2  設(shè)計(jì)菜單樣式
8.2.3  設(shè)計(jì)蘋果導(dǎo)航菜單
8.2.4  塊狀選項(xiàng)卡
8.2.5  圖片瀏覽
第9章  網(wǎng)頁排版和DIV+CSS布局
  視頻講解：2小時(shí)47分鐘
9.1  CSS盒模型
9.1.1  認(rèn)識(shí)盒模型
9.1.2  外邊距
9.1.3  內(nèi)邊距
9.1.4  邊框
9.1.5  寬和高
9.2  網(wǎng)頁重構(gòu)
9.2.1  設(shè)置文檔類型
9.2.2  選擇標(biāo)簽
9.2.3  案例實(shí)戰(zhàn)：嘗試重構(gòu)禪意花園
9.3  網(wǎng)頁排版
9.3.1  網(wǎng)頁排版基本原則
9.3.2  標(biāo)準(zhǔn)網(wǎng)頁版式基本形式
9.3.3  網(wǎng)頁排版基本方法
9.4  DIV+CSS布局
9.4.1  布局空間
9.4.2  布局位置
9.4.3  布局環(huán)繞
9.4.4  清除浮動(dòng)
9.4.5  布局嵌套
9.4.6  調(diào)整布局間距
9.5  案例實(shí)戰(zhàn)
9.5.1  兩列布局
9.5.2  三列布局
第10章  用CSS定位控制網(wǎng)頁布局
  視頻講解：1小時(shí)53分鐘
10.1  CSS定位
10.1.1  認(rèn)識(shí)position
10.1.2  靜態(tài)定位
10.1.3  絕對(duì)定位
10.1.4  相對(duì)定位
10.1.5  固定定位
10.2  定位參照
10.2.1  參照對(duì)象
10.2.2  坐標(biāo)值
10.2.3  定位的特殊性
10.3  定位層疊
10.3.1  層疊順序
10.3.2  嵌套層疊順序
10.3.3  CSS層疊框
10.3.4  CSS層疊常見問題
10.4  案例實(shí)戰(zhàn)
10.4.1  畫冊(cè)式網(wǎng)頁布局
10.4.2  展覽式網(wǎng)頁布局
10.4.3  浪漫式網(wǎng)頁布局
第11章  解決CSS設(shè)計(jì)中的常見問題
  視頻講解：2小時(shí)
11.1  IE條件語句
11.1.1  認(rèn)識(shí)IE條件語句
11.1.2  IE條件語句基本用法
11.1.3  案例實(shí)戰(zhàn)：設(shè)計(jì)兼容的多級(jí)菜單
11.2  CSS渲染及問題
11.2.1  開啟和關(guān)閉IE布局特性
11.2.2  設(shè)置Layout特性的方法
11.2.3  問題1：不能自動(dòng)展開包含框
11.2.4  問題2：包含浮動(dòng)布局的問題與處理
11.2.5  問題3：相鄰浮動(dòng)布局的問題與處理
11.2.6  問題4：列表布局的問題與處理
11.2.7  問題5：定位布局的問題與處理
11.3  常用瀏覽器解析問題和解決方法
11.3.1  兼容IE6版本瀏覽器
11.3.2  兼容IE5系列版本瀏覽器
11.3.3  兼容IE7版本瀏覽器
11.3.4  兼容FF等標(biāo)準(zhǔn)瀏覽器
11.3.5  問題1：超鏈接的Bug
11.3.6  問題2：內(nèi)容與背景分離的Bug
11.3.7  問題3：IE6躲躲貓Bug
11.3.8  問題4：IE6多余字符Bug
11.4  案例實(shí)戰(zhàn)
11.4.1  3列等高布局
11.4.2  3列浮動(dòng)布局
第12章  旅游酒店網(wǎng)站
  視頻講解：2小時(shí)18分鐘
12.1  網(wǎng)站頁面效果分析
12.1.1  “旅游度假”頁面效果分析
12.1.2  “預(yù)定酒店”頁面效果分析
12.2  首頁策劃設(shè)計(jì)
12.3  網(wǎng)頁設(shè)計(jì)與重構(gòu)
12.3.1  畫草圖和設(shè)計(jì)圖
12.3.2  切圖
12.3.3  主體重構(gòu)
12.4  頁面布局
12.4.1  設(shè)計(jì)頁面基本樣式
12.4.2  設(shè)計(jì)頁頭布局和樣式
12.4.3  設(shè)計(jì)搜索和幻燈區(qū)布局和樣式
12.4.4  設(shè)計(jì)左側(cè)引導(dǎo)區(qū)布局和樣式
12.4.5  設(shè)計(jì)內(nèi)容區(qū)樣式
12.4.6  設(shè)計(jì)右側(cè)專題欄樣式
第13章  新聞網(wǎng)站
  視頻講解：1小時(shí)20分鐘
13.1  網(wǎng)站頁面效果分析
13.1.1  “對(duì)話”頁面效果分析
13.1.2  環(huán)球看點(diǎn)頁面效果分析
13.2  首頁策劃設(shè)計(jì)
13.3  網(wǎng)頁設(shè)計(jì)與重構(gòu)
13.3.1  畫草圖和設(shè)計(jì)圖
13.3.2  切圖
13.3.3  主體重構(gòu)
13.4  頁面布局
13.4.1  設(shè)計(jì)頁面基本樣式
13.4.2  設(shè)計(jì)頁頭布局和樣式
13.4.3  設(shè)計(jì)主要新聞區(qū)布局和樣式
13.4.4  設(shè)計(jì)分類新聞區(qū)布局和樣式
第14章  使用JavaScript控制CSS樣式
  視頻講解：2小時(shí)47分鐘
14.1  JavaScript基礎(chǔ)
14.1.1  在網(wǎng)頁中嵌入JavaScript腳本
14.1.2  JavaScript腳本在文檔中的位置
14.1.3  解決JavaScript腳本與CSS樣式?jīng)_突
14.2  CSS腳本化傳統(tǒng)控制方法
14.2.1  認(rèn)識(shí)Style對(duì)象
14.2.2  讀寫行內(nèi)樣式
14.2.3  讀寫樣式表中樣式
14.2.4  訪問網(wǎng)頁實(shí)際樣式
14.3  控制CSS腳本的標(biāo)準(zhǔn)方法
14.3.1  CSSStyleSheet接口
14.3.2  CSSStyleRule接口
14.3.3  CSSStyleDeclaration接口
14.4  使用JavaScript控制元素大小
14.4.1  讀取元素的長(zhǎng)寬樣式值
14.4.2  使用offsetWidth和offsetHeight屬性讀取元素的尺寸
14.4.3  讀取復(fù)雜結(jié)構(gòu)中的元素尺寸
14.4.4  讀取瀏覽器窗口大小
14.5  使用JavaScript定位
14.5.1  在窗口中的位置
14.5.2  相對(duì)父元素的位置
14.5.3  相對(duì)包含塊的位置
14.5.4  定義偏移位置
14.5.5  定義相對(duì)位置
14.5.6  確定光標(biāo)位置
14.5.7  確定光標(biāo)的相對(duì)位置
14.5.8  確定滾動(dòng)條的位置
14.5.9  定義滾動(dòng)條的位置
14.6  使用JavaScript設(shè)置顯隱效果
14.6.1  設(shè)置顯隱效果
14.6.2  設(shè)置透明度
14.6.3  控制動(dòng)畫時(shí)長(zhǎng)
14.6.4  設(shè)計(jì)滑動(dòng)效果
第15章  使用CSS設(shè)計(jì)XML文檔樣式
  視頻講解：43分鐘
15.1  XML基礎(chǔ)
15.1.1  XML文檔基本結(jié)構(gòu)
15.1.2  聲明
15.1.3  處理指令
15.1.4  注釋
15.1.5  標(biāo)簽
15.1.6  屬性
15.2  設(shè)置XML文檔樣式
15.2.1  CSS樣式表
15.2.2  XSL樣式表
15.3  CSS與XML文檔關(guān)聯(lián)
15.3.1  直接嵌入CSS樣式
15.3.2  導(dǎo)入外部CSS樣式表文件
15.3.3  @ import
15.4  案例實(shí)戰(zhàn)
15.4.1  設(shè)計(jì)詩情畫意圖文效果
15.4.2  設(shè)計(jì)新聞版面效果
第16章  使用CSS濾鏡
  視頻講解：43小時(shí)分鐘
16.1  CSS濾鏡概述
16.1.1  基本用法
16.1.2  恰當(dāng)選用濾鏡
16.2  常用CSS濾鏡
16.2.1  通道（Alpha）
16.2.2  模糊（Blur）
16.2.3  運(yùn)動(dòng)模糊（MotionBlur）
16.2.4  透明色（Chroma）
16.2.5  翻轉(zhuǎn)（Flip）
16.2.6  光暈（Glow）
16.2.7  灰度（Gray）
16.2.8  反色（Invert）
16.2.9  遮罩（Mask）
16.2.10  陰影（Shadow）
16.2.11  X射線（Xray）
16.2.12  浮雕（Emboss）
16.2.13  波浪（Wave）
16.3  案例實(shí)戰(zhàn)