CSS3網(wǎng)頁樣式與布局案例課堂

第1篇 基 礎(chǔ) 入 門
第1章 CSS樣式入門 3
1.1 認識CSS 4
1.1.1 CSS的功能 4
1.1.2 瀏覽器與CSS 4
1.1.3 CSS的發(fā)展歷史 5
1.2 CSS常用單位 5
1.2.1 顏色單位 5
1.2.2 長度單位 9
1.3 編輯和瀏覽CSS 10
1.3.1 手工編寫CSS 10
1.3.2 使用Dreamweaver編寫CSS 11
1.4 在HTML中調(diào)用CSS的方法 13
1.4.1 行內(nèi)樣式 13
1.4.2 內(nèi)嵌樣式 14
1.4.3 鏈接樣式 15
1.4.4 導入樣式 16
1.5 調(diào)用方法的優(yōu)先級 17
1.5.1 行內(nèi)樣式和內(nèi)嵌樣式的比較 18
1.5.2 內(nèi)嵌樣式和鏈接樣式的比較 18
1.5.3 鏈接樣式和導入樣式的比較 19
1.6 綜合案例——制作產(chǎn)品銷售統(tǒng)計表 20
1.7 大神解惑 22
1.8 跟我練練手 22
第2章 CSS3樣式的基本語法 23
2.1 CSS基礎(chǔ)語法 24
2.1.1 CSS構(gòu)造規(guī)則 24
2.1.2 CSS的注釋 24
2.2 CSS的常用選擇器 25
2.2.1 標簽選擇器 25
2.2.2 類選擇器 26
2.2.3 ID選擇器 27
2.2.4 選擇器的聲明 27
2.3 綜合案例——制作炫彩網(wǎng)站Logo 28
2.4 大神解惑 31
2.5 跟我練練手 31
第3章 CSS3的高級特性 33
3.1 復(fù)合選擇器 34
3.1.1 全局選擇器 34
3.1.2 交集選擇器 35
3.1.3 并集選擇器 35
3.1.4 繼承選擇器 36
3.2 CSS3新增的選擇器 37
3.2.1 屬性選擇器 37
3.2.2 結(jié)構(gòu)偽類選擇器 39
3.2.3 UI元素狀態(tài)偽類選擇器 40
3.2.4 偽類選擇器 42
3.3 CSS的繼承特性 43
3.3.1 繼承關(guān)系 43
3.3.2 CSS繼承的運用 44
3.4 CSS的層疊特性 45
3.4.1 同一選擇器被多次定義的
處理 45
3.4.2 同一標簽運用不同類型選擇器
的處理 46
3.5 綜合案例——制作新聞菜單 47
3.6 大神解惑 49
3.7 跟我練練手 50




第II篇 核 心 技 術(shù)
第4章 使用CSS3控制網(wǎng)頁字體
與段落樣式 53
4.1 通過CSS控制字體樣式 54
4.1.1 控制字體類型 54
4.1.2 定義字體大小 55
4.1.3 定義字體風格 56
4.1.4 控制文字的粗細 57
4.1.5 將小寫字母轉(zhuǎn)換為大寫字母 58
4.1.6 設(shè)置字體的復(fù)合屬性 59
4.1.7 定義文字的顏色 59
4.2 CSS3中新增的文本高級樣式 61
4.2.1 添加文本的陰影效果 61
4.2.2 設(shè)置文本溢出效果 62
4.2.3 控制文本的換行 63
4.2.4 設(shè)置字體尺寸 64
4.3 通過CSS控制文本間距與對齊方式 65
4.3.1 設(shè)置單詞之間的間隔 65
4.3.2 設(shè)置字符之間的間隔 66
4.3.3 為文本添加下劃線、上劃線、
刪除線 67
4.3.4 設(shè)置垂直對齊方式 68
4.3.5 轉(zhuǎn)換文本的大小寫 69
4.3.6 設(shè)置文本的水平對齊方式 70
4.3.7 設(shè)置文本的縮進效果 72
4.3.8 設(shè)置文本的行高 73
4.3.9 文本的空白處理 74
4.3.10 文本的反排 75
4.4 綜合案例1——設(shè)置網(wǎng)頁標題 76
4.5 綜合案例2——制作新聞頁面 78
4.6 大神解惑 79
4.7 跟我練練手 80
第5章 使用CSS控制網(wǎng)頁圖片樣式 81
5.1 圖片縮放 82
5.1.1 通過描述標記width和height
縮放圖片 82
5.1.2 使用CSS3中的max-width和
max-height縮放圖片 82
5.1.3 使用CSS3中的width和height
縮放圖片 83
5.2 設(shè)置圖片的對齊方式 84
5.2.1 設(shè)置圖片橫向?qū)R 84
5.2.2 設(shè)置圖片縱向?qū)R 85
5.3 圖文混排 87
5.3.1 設(shè)置文字環(huán)繞效果 87
5.3.2 設(shè)置圖片與文字的間距 88
5.4 綜合案例1——制作學校宣傳單 90
5.5 綜合案例2——制作簡單圖文混排
網(wǎng)頁 92
5.6 大神解惑 94
5.7 跟我練練手 94
第6章 使用CSS控制網(wǎng)頁背景
與邊框樣式 95
6.1 使用CSS控制網(wǎng)頁背景 96
6.1.1 設(shè)置背景顏色 96
6.1.2 設(shè)置背景圖片 97
6.1.3 背景圖片重復(fù) 98
6.1.4 背景圖片顯示 100
6.1.5 背景圖片位置 101
6.2 CSS3中新增控制網(wǎng)頁背景屬性 102
6.2.1 背景圖片大小 102
6.2.2 背景顯示區(qū)域 104
6.2.3 背景圖片裁剪區(qū)域 105
6.2.4 背景復(fù)合屬性 107
6.3 使用CSS控制邊框樣式 108
6.3.1 設(shè)置邊框樣式 108
6.3.2 設(shè)置邊框顏色 109
6.3.3 設(shè)置邊框線寬 110
6.3.4 設(shè)置邊框復(fù)合屬性 112
6.4 CSS3中新增邊框圓角效果 113
6.4.1 設(shè)置圓角邊框 113
6.4.2 指定兩個圓角半徑 114
6.4.3 繪制4個不同圓角邊框 115
6.4.4 繪制不同種類的邊框 117
6.5 CSS3中的漸變效果 119
6.5.1 線性漸變效果 119
6.5.2 徑向漸變效果 121
6.6 綜合案例1——制作簡單公司主頁 122
6.7 綜合案例2——制作簡單生活資訊
主頁 126
6.8 大神解惑 127
6.9 跟我練練手 128
第7章 使用CSS3美化網(wǎng)頁瀏覽
效果 129
7.1 使用CSS3美化超鏈接 130
7.1.1 改變超級鏈接基本樣式 130
7.1.2 設(shè)置帶有提示信息的超級
鏈接 131
7.1.3 設(shè)置超級鏈接的背景圖 132
7.1.4 設(shè)置超級鏈接的按鈕效果 133
7.2 使用CSS3美化鼠標特效 134
7.2.1 使用CSS3控制鼠標箭頭 134
7.2.2 設(shè)置鼠標變幻式超鏈接 135
7.2.3 設(shè)置網(wǎng)頁頁面滾動條 136
7.3 綜合案例1——圖片版本超級鏈接 138
7.4 綜合案例2——鼠標特效 140
7.5 綜合案例3——制作一個簡單的
導航欄 142
7.6 大神解惑 144
7.7 跟我練練手 144
第8章 使用CSS控制表格
和表單樣式 145
8.1 美化表格樣式 146
8.1.1 設(shè)置表格邊框樣式 146
8.1.2 設(shè)置表格邊框?qū)挾? 148
8.1.3 設(shè)置表格邊框顏色 149
8.2 美化表單樣式 150
8.2.1 美化表單中的元素 150
8.2.2 美化提交按鈕 152
8.2.3 美化下拉菜單 153
8.3 綜合案例1——制作用戶登錄頁面 155
8.4 綜合案例2——制作用戶注冊頁面 156
8.5 大神解惑 159
8.6 跟我練練手 159
第9章 控制列表和菜單樣式 161
9.1 美化項目列表的樣式 162
9.1.1 美化無序列表 162
9.1.2 美化有序列表 163
9.1.3 美化自定義列表 165
9.1.4 制作圖片列表 166
9.1.5 縮進圖片列表 167
9.1.6 列表復(fù)合屬性 168
9.2 使用CSS制作網(wǎng)頁菜單 169
9.2.1 制作無須表格的菜單 169
9.2.2 制作水平和垂直菜單 171
9.3 綜合案例1——模擬soso導航欄 173
9.4 綜合案例2——將段落轉(zhuǎn)變成列表 177
9.5 大神解惑 178
9.6 跟我練練手 178
第10章 使用濾鏡美化網(wǎng)頁元素 179
10.1 濾鏡概述 180
10.2 設(shè)置基本濾鏡效果 181
10.2.1 高斯模糊濾鏡 181
10.2.2 明暗度濾鏡 182
10.2.3 對比度濾鏡 183
10.2.4 陰影濾鏡 184
10.2.5 灰度濾鏡 185
10.2.6 反相濾鏡 186
10.2.7 透明度濾鏡 187
10.2.8 飽和度濾鏡 188
10.2.9 深褐色濾鏡 189
10.3 使用復(fù)合濾鏡效果 190
10.4 大神解惑 191
10.5 跟我練練手 192