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

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