新手學(xué)CSS+DIV

第1篇 CSS技術(shù)基礎(chǔ)
第1章 網(wǎng)頁(yè)制作入門(mén)
1.1 了解瀏覽器和網(wǎng)頁(yè)文檔的關(guān)系
1.2 初識(shí)HTML和XHTML
1.2.1 HTML
1.2.2 XHTML
1.2.3 XHTML語(yǔ)法
1.3 初識(shí)CSS的作用
1.4 選擇一個(gè)合適的開(kāi)發(fā)工具
1.4.1 CSS專業(yè)開(kāi)發(fā)編輯器TopStyle
1.4.2 網(wǎng)頁(yè)開(kāi)發(fā)編輯器Dreamweaver
1.5 常見(jiàn)面試題
1.6 小結(jié)
1.7 習(xí)題
第2章 CSS初體驗(yàn)——編寫(xiě)一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)文檔
2.1 編寫(xiě)XHTML文檔
2.1.1 使用Dreamweaver新建XHTML框架文檔
2.1.2 手工編寫(xiě)XHTML文檔
2.2 使CSS在XHTML文檔中生效
2.2.1 在標(biāo)簽中加入CSS樣式
2.2.2 在(style）（／style）標(biāo)簽中加入樣式
2.2.3 鏈入外部CSS樣式表
2.2.4 導(dǎo)入樣式
2.2.5 優(yōu)先級(jí)問(wèn)題
2.3 初探CSS語(yǔ)句的結(jié)構(gòu)和工作原理
2.3.1 CSS語(yǔ)句的結(jié)構(gòu)
2.3.2 CSS語(yǔ)句的工作原理
2.4 CSS的注釋
2.5 實(shí)例——從無(wú)到有建網(wǎng)頁(yè)
2.6 常見(jiàn)面試題
2.7 小結(jié)
2.8 習(xí)題
第3章 CSS的基本語(yǔ)法
3.1 選擇器
3.1.1 標(biāo)簽選擇器
3.1.2 類選擇器
3.1.3 ID選擇器
3.1.4 全局選擇器
3.1.5 組合選擇器
3.1.6 繼承選擇器
3.1.7 偽類
3.2 聲明
3.2.1 多重聲明
3.2.2 集體聲明
3.3 CSS的層疊原理
3.3.1 CSS樣式來(lái)源
3.3.2 選擇器的優(yōu)先級(jí)
3.3.3 1important語(yǔ)句
3.3.4 順序優(yōu)先級(jí)
3.3.5 CSS的層疊規(guī)則
3.4 實(shí)例——制作簡(jiǎn)單的豎形菜單
3.5 常見(jiàn)面試題
3.6 小結(jié)
3.7 習(xí)題
第4章 CSS的單位
4.1 顏色單位
4.1.1 顏色名稱
4.1.2 百分比顏色
4.1.3 數(shù)字顏色
4.1.4 十六進(jìn)制顏色
4.2 長(zhǎng)度單位
4.2.1 絕對(duì)單位
4.2.2 相對(duì)單位
4.3 常見(jiàn)面試題
4.4 小結(jié)
4.5 習(xí)題
第2篇 使用CSS控制頁(yè)面樣式
第5章 用CSS控制文本樣式
5.1 字體
5.2 文字大小概述
5.2.1 設(shè)置文字大小
5.2.2 定義文字的相對(duì)大小
5.2.3 定義文字的絕對(duì)大小
5.3 文字顏色
5.4 文字粗細(xì)
5.5 斜體
5.6 下劃線、頂劃線和刪除線
5.7 英文字母大小寫(xiě)
5.8 屬性的縮寫(xiě)法
5.9 用段落屬性改變文字的段落樣式
5.9.1 段落的水平對(duì)齊方式
5.9.2 段落的垂直對(duì)齊方式
5.9.3 首行縮進(jìn)
5.9.4 行間距與字間距
5.10 實(shí)例——簡(jiǎn)單的文章 頁(yè)面
5.11 常見(jiàn)面試題
5.12 小結(jié)
5.13 習(xí)題
第6章 用CSS設(shè)置圖片樣式
6.1 用CSS設(shè)置圖片的樣式
6.1.1 在網(wǎng)頁(yè)中插入圖片
6.1.2 控制圖片的大小
6.1.3 給圖片添加邊框的技巧
6.1.4 圖片不顯示的解決辦法
6.1.5 給圖片增加鏈接
6.2 實(shí)例——文字環(huán)繞
6.3 實(shí)例——制作簡(jiǎn)單相冊(cè)
6.4 常見(jiàn)面試題
6.5 小結(jié)
6.6 習(xí)題
第7章 用CSS設(shè)置背景
7.1 設(shè)置背景顏色
7.2 設(shè)置背景圖片
7.2.1 為元素添加背景圖案
7.2.2 背景圖的重復(fù)
7.2.3 背景圖的位置
7.2.4 滾動(dòng)和固定背景圖
7.2.5 背景屬性縮寫(xiě)
7.3 實(shí)例——制作圓角
7.4 常見(jiàn)面試題
7.5 小結(jié)
7.6 習(xí)題
第8章 用CSS控制超鏈接樣式
8.1 改變超鏈接的基本樣式
8.2 豐富超鏈接的表現(xiàn)形式
8.2.1 超鏈接背景圖的巧妙運(yùn)用
8.2.2 超鏈接翻轉(zhuǎn)效果
8.3 實(shí)例——制作實(shí)用工具欄
8.4 常見(jiàn)面試題
8.5 小結(jié)
8.6 習(xí)題
第9章 用CSS控制列表樣式
9.1 列表的類型
9.1.1 無(wú)序列表
9.1.2 有序列表
9.1.3 定義列表
9.2 改變列表符的樣式
9.2.1 使用自帶的列表符
9.2.2 用背景圖片改變列表符
9.2.3 改變列表符的位置
9.2.4 列表屬性的速寫(xiě)法
9.3 實(shí)例——制作帶時(shí)間顯示的新聞列表
9.4 實(shí)例——制作WEB2.0風(fēng)格導(dǎo)航
9.5 常見(jiàn)面試題
9.6 小結(jié)
9.7 習(xí)題
第10章 用CSS美化表格
10.1 表格的基本頁(yè)面元素
10.2 使用CSS控制表格元素
10.2.1 設(shè)置表格元素寬度
10.2.2 設(shè)置表格元素邊框
10.3 實(shí)例——制作日歷
10.4 常見(jiàn)面試題
10.5 小結(jié)
10.6 習(xí)題
第11章 用CSS控制表單樣式
11.1 了解表單元素
11.1.1 form標(biāo)簽和fieldset標(biāo)簽
11.1.2 表單域和表單按鈕
11.2 使用CSS美化表單元素
11.2.1 美化fieldset標(biāo)簽
11.2.2 美化表單域
11.3 實(shí)例——制作整潔的用戶登錄框
11.4 實(shí)例——制作簡(jiǎn)單的留言板
11.5 常見(jiàn)面試題
11.6 小結(jié)
11.7 習(xí)題
第12章 (2SS濾鏡的應(yīng)用
12.1 濾鏡概述
12.2 透明層次濾鏡(alpha)
12.3 顏色透明濾鏡(chroma)
12.4 模糊濾鏡(blur)
12.5 固定陰影濾鏡(dropshadow)
12.6 移動(dòng)陰影濾鏡(shadow)
12.7 光暈濾鏡(glow)
12.8 灰度濾鏡(gray)
12.9 反色濾鏡(invert)
12.10 鏡像濾鏡(flip)
12.11 遮罩濾鏡(mask)
12.12 X射線濾鏡(x-ray)
12.13 波紋濾鏡(wave)
12.14 常見(jiàn)面試題
12.15 小結(jié)
12.16 習(xí)題
第13章 CSS代碼的編寫(xiě)規(guī)范
13.1 使用語(yǔ)義明確的標(biāo)記
13.2 使用有意義的CSS命名
13.3 CSS代碼的縮寫(xiě)
13.4 合理的CSS注釋
13.5 常見(jiàn)面試題
13.6 小結(jié)
13.7 習(xí)題
第3篇 DIV+CSS布局
第14章 DIV+CSS布局基礎(chǔ)
14.1 初識(shí)DIV+CSS布局的流程
14.2 了解盒模型
14.2.1 div標(biāo)簽的盒模型舉例
14.2.2 基本盒模型
14.2.3 邊距
14.2.4 補(bǔ)白
14.2.5 邊框
14.3 頁(yè)面元素的布局
14.3.1 塊級(jí)元素與行內(nèi)元素
14.3.2 CSS布局方式——常規(guī)流
14.4 CSS布局方式——浮動(dòng)
14.4.1 兩個(gè)元素的浮動(dòng)應(yīng)用
14.4.2 多個(gè)元素的浮動(dòng)應(yīng)用
14.4.3 清除浮動(dòng)
14.4.4 解決火狐瀏覽器的計(jì)算高度問(wèn)題
14.5 CSS布局方式——相對(duì)定位
14.5.1 單個(gè)元素的相對(duì)定位
14.5.2 兩個(gè)元素的相對(duì)定位
14.6 CSS布局方式——絕對(duì)定位
14.6.1 單個(gè)元素的絕對(duì)定位
14.6.2 兩個(gè)元素的絕對(duì)定位
14.7 實(shí)例——制作歌曲專輯列表
14.8 實(shí)例——給圖片加入信息
14.9 常見(jiàn)面試題
14.10 小結(jié)
14.11 習(xí)題
第15章 CSS頁(yè)面基本排版技術(shù)
15.1 固定寬度布局
15.1.1 一列的水平居中布局
15.1.2 兩列浮動(dòng)布局
15.1.3 三列浮動(dòng)布局
15.2 自適應(yīng)寬度布局
15.2.1 兩列布局——兩列自適應(yīng)寬度
15.2.2 兩列布局——左列固定右列自適應(yīng)
15.2.3 三列布局——中間列自適應(yīng)
15.3 復(fù)雜的頁(yè)面排版
15.3.1 復(fù)雜的頁(yè)面排版——垂直布局
15.3.2 復(fù)雜的頁(yè)面排版——水平布局
15.4 常見(jiàn)面試題
15.5 小結(jié)
15.6 習(xí)題
第16章 CSS的過(guò)濾器和HACK
16.1 CSS的過(guò)濾器和HACK概述
16.2 常用的HACK技術(shù)
16.2.1 全局選擇器html
16.2.2 Limporrant和下劃線
16.2.3 區(qū)分IE6、IE7和火狐瀏覽器的HACK技術(shù)
16.3 修復(fù)瀏覽器中常見(jiàn)的bug
16.3.1 修正浮動(dòng)元素的雙倍邊距
16.3.2 修正IE6的消隱
16.3.3 修正IE6的重復(fù)字符
16.3.4 讓火狐瀏覽器自動(dòng)計(jì)算容器高度
16.3.5 實(shí)現(xiàn)容器的最小高度
16.4 常見(jiàn)面試題
16.5 小結(jié)
16.6 習(xí)題
第17章 了解WEB標(biāo)準(zhǔn)和重構(gòu)
17.1 網(wǎng)頁(yè)的組成
17.1.1 結(jié)構(gòu)
17.1.2 表現(xiàn)
17.1.3 行為
17.2 了解WEB標(biāo)準(zhǔn)
17.2.1 什么是WEB標(biāo)準(zhǔn)
17.2.2 什么是W3C
17.2.3 使用WEB標(biāo)準(zhǔn)的必要性
17.3 如何建立標(biāo)準(zhǔn)WEB網(wǎng)頁(yè)
17.3.1 正確書(shū)寫(xiě)網(wǎng)頁(yè)文檔頭部
17.3.2 遵循XHTTML語(yǔ)法
17.4 常見(jiàn)面試題
17.5 小結(jié)
17.6 習(xí)題
第4篇精彩案例剖析
第18章 DIV+CSS頁(yè)面布局實(shí)例：制作個(gè)人網(wǎng)站首頁(yè)
18.1 個(gè)人網(wǎng)站首頁(yè)構(gòu)架分析
18.2 分塊制作個(gè)人網(wǎng)站首頁(yè)
18.2.1 制作個(gè)人網(wǎng)站首頁(yè)的總體布局
18.2.2 實(shí)現(xiàn)左中右浮動(dòng)布局
18.2.3 制作個(gè)人網(wǎng)站首頁(yè)的左邊欄目(leftCol)
18.2.4 制作個(gè)人網(wǎng)站首頁(yè)的中間欄目(midCol)
18.2.5 制作個(gè)人網(wǎng)站首頁(yè)的右邊欄目(rightCol)
18.3 小結(jié)
第19章 DIV+CSS頁(yè)面布局實(shí)例：制作個(gè)人博客
19.1 個(gè)人博客網(wǎng)站構(gòu)架分析
19.2 個(gè)人博客首頁(yè)的總體布局
19.2.1 建立網(wǎng)站文件夾以及構(gòu)建整體網(wǎng)頁(yè)的結(jié)構(gòu)
19.2.2 構(gòu)建整體網(wǎng)頁(yè)的布局
19.2.3 實(shí)現(xiàn)mian容器中欄目的左中右浮動(dòng)布局
19.3 制作個(gè)人博客的首頁(yè)頭部(]aeader)
19.4 制作個(gè)人客的首頁(yè)左邊欄目(leftCol)
19.4.1 制作左邊欄中網(wǎng)文的結(jié)構(gòu)
19.4.2 制作左邊欄中網(wǎng)文的樣式
19.4.3 完成leftCol其余部分的布局
19.5 制作個(gè)人博客首頁(yè)的中間欄目(midCol)
19.6 制作個(gè)人博客額的白邊欄目(rightCol)
19.7 制作個(gè)人博客分頁(yè)
19.7.1 制作個(gè)人博客網(wǎng)站的文章頁(yè)(aIticle.html)分頁(yè)
19.7.2 制作個(gè)人博客網(wǎng)站的留言板(guestbook.html)分頁(yè)
19.7.3 制作個(gè)人博客網(wǎng)站的主題頁(yè)(archives.html)分頁(yè)
19.3.4 制作個(gè)人博客關(guān)于(about.html)分頁(yè)
19.8 小結(jié)
第20章 DIV+CSS頁(yè)面布局實(shí)例：制作服飾商城
20.1 服飾商城構(gòu)架分析
20.2 制作服飾商城首頁(yè)的總體布局
20.2.1 建立網(wǎng)站文件夾以及構(gòu)建整體網(wǎng)頁(yè)的結(jié)構(gòu)
20.2.2 構(gòu)建整體網(wǎng)頁(yè)的布局
20.3 制作服飾商城首頁(yè)頭部(header)
20.4 制作服飾商城導(dǎo)航(nav)
20.5 制作服飾商城第一欄(firstCol)
……
第21章 DIV+CSS頁(yè)面布局實(shí)例：制作門(mén)戶網(wǎng)站