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

第1章  CSS樣式設(shè)計(jì)基礎(chǔ)
  視頻講解：2小時(shí)38分鐘
1.1  設(shè)計(jì)良好的網(wǎng)頁(yè)結(jié)構(gòu)
1.1.1  選用符合語(yǔ)義的標(biāo)簽
1.1.2  文檔類(lèi)型和瀏覽器模式
1.2  初識(shí)CSS
1.2.1  為什么學(xué)習(xí)CSS
1.2.2  CSS基本語(yǔ)法
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  類(lèi)選擇器
1.3.5  偽類(lèi)和偽對(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  定義字體類(lèi)型
2.1.2  定義字體大小
2.1.3  定義字體顏色
2.1.4  定義字體粗細(xì)
2.1.5  定義斜體字體
2.1.6  定義下劃線、刪除線和頂劃線
2.1.7  定義字體大小寫(xiě)
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ì)單頁(yè)圖文混排版式
第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è)置頁(yè)面背景顏色
4.1.2  設(shè)置背景顏色給頁(yè)面分塊
4.1.3  定義背景圖片
4.1.4  背景圖片的重復(fù)
4.1.5  定義背景圖片的位置
4.1.6  固定背景圖片
4.2  案例實(shí)戰(zhàn)
4.2.1  設(shè)置網(wǎng)頁(yè)背景顏色
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)門(mén)菜單
4.2.7  設(shè)計(jì)燈箱廣告
4.2.8  設(shè)計(jì)博客首頁(yè)效果
第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è)置類(lèi)型指示樣式
8.1.4  定義按鈕樣式
8.1.5  定義已訪問(wèn)樣式
8.1.6  鏈接提示樣式
8.2  案例實(shí)戰(zhàn)
8.2.1  鼠標(biāo)樣式
8.2.2  設(shè)計(jì)菜單樣式
8.2.3  設(shè)計(jì)蘋(píng)果導(dǎo)航菜單
8.2.4  塊狀選項(xiàng)卡
8.2.5  圖片瀏覽
第9章  網(wǎng)頁(yè)排版和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)頁(yè)重構(gòu)
9.2.1  設(shè)置文檔類(lèi)型
9.2.2  選擇標(biāo)簽
9.2.3  案例實(shí)戰(zhàn)：嘗試重構(gòu)禪意花園
9.3  網(wǎng)頁(yè)排版
9.3.1  網(wǎng)頁(yè)排版基本原則
9.3.2  標(biāo)準(zhǔn)網(wǎng)頁(yè)版式基本形式
9.3.3  網(wǎng)頁(yè)排版基本方法
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)頁(yè)布局
  視頻講解：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層疊常見(jiàn)問(wèn)題
10.4  案例實(shí)戰(zhàn)
10.4.1  畫(huà)冊(cè)式網(wǎng)頁(yè)布局
10.4.2  展覽式網(wǎng)頁(yè)布局
10.4.3  浪漫式網(wǎng)頁(yè)布局
第11章  解決CSS設(shè)計(jì)中的常見(jiàn)問(wèn)題
  視頻講解：2小時(shí)
11.1  IE條件語(yǔ)句
11.1.1  認(rèn)識(shí)IE條件語(yǔ)句
11.1.2  IE條件語(yǔ)句基本用法
11.1.3  案例實(shí)戰(zhàn)：設(shè)計(jì)兼容的多級(jí)菜單
11.2  CSS渲染及問(wèn)題
11.2.1  開(kāi)啟和關(guān)閉IE布局特性
11.2.2  設(shè)置Layout特性的方法
11.2.3  問(wèn)題1：不能自動(dòng)展開(kāi)包含框
11.2.4  問(wèn)題2：包含浮動(dòng)布局的問(wèn)題與處理
11.2.5  問(wèn)題3：相鄰浮動(dòng)布局的問(wèn)題與處理
11.2.6  問(wèn)題4：列表布局的問(wèn)題與處理
11.2.7  問(wèn)題5：定位布局的問(wèn)題與處理
11.3  常用瀏覽器解析問(wèn)題和解決方法
11.3.1  兼容IE6版本瀏覽器
11.3.2  兼容IE5系列版本瀏覽器
11.3.3  兼容IE7版本瀏覽器
11.3.4  兼容FF等標(biāo)準(zhǔn)瀏覽器
11.3.5  問(wèn)題1：超鏈接的Bug
11.3.6  問(wèn)題2：內(nèi)容與背景分離的Bug
11.3.7  問(wèn)題3：IE6躲躲貓Bug
11.3.8  問(wèn)題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)站頁(yè)面效果分析
12.1.1  “旅游度假”頁(yè)面效果分析
12.1.2  “預(yù)定酒店”頁(yè)面效果分析
12.2  首頁(yè)策劃設(shè)計(jì)
12.3  網(wǎng)頁(yè)設(shè)計(jì)與重構(gòu)
12.3.1  畫(huà)草圖和設(shè)計(jì)圖
12.3.2  切圖
12.3.3  主體重構(gòu)
12.4  頁(yè)面布局
12.4.1  設(shè)計(jì)頁(yè)面基本樣式
12.4.2  設(shè)計(jì)頁(yè)頭布局和樣式
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è)專(zhuān)題欄樣式
第13章  新聞網(wǎng)站
  視頻講解：1小時(shí)20分鐘
13.1  網(wǎng)站頁(yè)面效果分析
13.1.1  “對(duì)話”頁(yè)面效果分析
13.1.2  環(huán)球看點(diǎn)頁(yè)面效果分析
13.2  首頁(yè)策劃設(shè)計(jì)
13.3  網(wǎng)頁(yè)設(shè)計(jì)與重構(gòu)
13.3.1  畫(huà)草圖和設(shè)計(jì)圖
13.3.2  切圖
13.3.3  主體重構(gòu)
13.4  頁(yè)面布局
13.4.1  設(shè)計(jì)頁(yè)面基本樣式
13.4.2  設(shè)計(jì)頁(yè)頭布局和樣式
13.4.3  設(shè)計(jì)主要新聞區(qū)布局和樣式
13.4.4  設(shè)計(jì)分類(lèi)新聞區(qū)布局和樣式
第14章  使用JavaScript控制CSS樣式
  視頻講解：2小時(shí)47分鐘
14.1  JavaScript基礎(chǔ)
14.1.1  在網(wǎng)頁(yè)中嵌入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  讀寫(xiě)行內(nèi)樣式
14.2.3  讀寫(xiě)樣式表中樣式
14.2.4  訪問(wèn)網(wǎng)頁(yè)實(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)畫(huà)時(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ì)詩(shī)情畫(huà)意圖文效果
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)