CSS3網(wǎng)頁(yè)樣式與布局案例課堂 版權(quán)信息
- ISBN:9787302477747
- 條形碼:9787302477747 ; 978-7-302-47774-7
- 裝幀:暫無(wú)
- 冊(cè)數(shù):暫無(wú)
- 重量:暫無(wú)
- 所屬分類:>>
CSS3網(wǎng)頁(yè)樣式與布局案例課堂 本書(shū)特色
本書(shū)以零基礎(chǔ)講解為宗旨,用實(shí)例引導(dǎo)讀者深入學(xué)習(xí),采取【基礎(chǔ)入門(mén)→核心技術(shù)→網(wǎng)頁(yè)布局→高級(jí)技能→綜合案例】的講解模式,深入淺出地講解CSS3的各項(xiàng)技術(shù)及實(shí)戰(zhàn)技能。
本書(shū)第1篇主要講解CSS樣式入門(mén)、CSS3樣式的基本語(yǔ)法、CSS3的高級(jí)特性等;第2篇主要講解控制網(wǎng)頁(yè)字體與段落樣式、控制網(wǎng)頁(yè)圖片樣式、控制網(wǎng)頁(yè)背景與邊框樣式、美化網(wǎng)頁(yè)超鏈接和鼠標(biāo)、控制表格和表單樣式、控制列表和菜單樣式、使用濾鏡美化網(wǎng)頁(yè)元素等;第3篇主要講解CSS定位與DIV布局核心技術(shù)、CSS DIV盒子的浮動(dòng)與定位、固定寬度網(wǎng)頁(yè)布局剖析與制作、自動(dòng)縮放網(wǎng)頁(yè)布局剖析與制作等;第4篇主要講解過(guò)渡和動(dòng)畫(huà)效果、2D和3D變幻效果、創(chuàng)建響應(yīng)式頁(yè)面等;第5篇主要講解設(shè)計(jì)商業(yè)門(mén)戶類網(wǎng)頁(yè)、設(shè)計(jì)在線購(gòu)物類網(wǎng)頁(yè)、設(shè)計(jì)企業(yè)門(mén)戶類網(wǎng)頁(yè)、設(shè)計(jì)娛樂(lè)休閑類網(wǎng)頁(yè)、設(shè)計(jì)圖像影音類網(wǎng)頁(yè)。
本書(shū)適合任何想學(xué)習(xí)CSS網(wǎng)頁(yè)設(shè)計(jì)與布局的人員,無(wú)論您是否從事計(jì)算機(jī)相關(guān)行業(yè),無(wú)論您是否接觸過(guò)CSS3,通過(guò)學(xué)習(xí)均可快速掌握CSS3的設(shè)計(jì)方法和技巧。
CSS3網(wǎng)頁(yè)樣式與布局案例課堂 內(nèi)容簡(jiǎn)介
清華大學(xué)出版社“案例課堂”大系
叢書(shū)以案例的形式講解軟件的內(nèi)容,讀者可以在實(shí)踐中熟練掌握軟件的使用方法。
每一個(gè)案例都精挑細(xì)選,同時(shí)配有全程語(yǔ)音講解的視頻文件,方便讀者學(xué)習(xí)。
案例的選材廣泛,涉及到軟件應(yīng)用的各個(gè)領(lǐng)域、各個(gè)行業(yè),學(xué)習(xí)無(wú)死角。
“CG設(shè)計(jì)”系列全彩精印,同等價(jià)位下內(nèi)容更多,同等內(nèi)容下更實(shí)惠。
“網(wǎng)站開(kāi)發(fā)”系列附贈(zèng)超值,全面學(xué)習(xí)無(wú)障礙:
CSS屬性速查表
HTML標(biāo)簽速查表
網(wǎng)頁(yè)布局案例賞析
精彩網(wǎng)站配色方案賞析
精選JavaScript實(shí)例
JavaScript函數(shù)速查手冊(cè)
CSS DIV布局案例賞析
案例源文件與教學(xué)課件
CSS3網(wǎng)頁(yè)樣式與布局案例課堂 目錄
目 錄
第1篇 基 礎(chǔ) 入 門(mén)
第1章 CSS樣式入門(mén) 3
1.1 認(rèn)識(shí)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
長(zhǎng)度單位 9
1.3 編輯和瀏覽CSS 10
1.3.1
手工編寫(xiě)CSS 10
1.3.2
使用Dreamweaver編寫(xiě)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
導(dǎo)入樣式 16
1.5 調(diào)用方法的優(yōu)先級(jí) 17
1.5.1
行內(nèi)樣式和內(nèi)嵌樣式的比較 18
1.5.2
內(nèi)嵌樣式和鏈接樣式的比較 18
1.5.3
鏈接樣式和導(dǎo)入樣式的比較 19
1.6 綜合案例——制作產(chǎn)品銷售統(tǒng)計(jì)表 20
1.7 大神解惑 22
1.8 跟我練練手 22
第2章 CSS3樣式的基本語(yǔ)法 23
2.1
CSS基礎(chǔ)語(yǔ)法 24
2.1.1
CSS構(gòu)造規(guī)則 24
2.1.2
CSS的注釋 24
2.2
CSS的常用選擇器 25
2.2.1
標(biāo)簽選擇器 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的高級(jí)特性 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繼承的運(yùn)用 44
3.4
CSS的層疊特性 45
3.4.1
同一選擇器被多次定義的
處理 45
3.4.2
同一標(biāo)簽運(yùn)用不同類型選擇器
的處理 46
3.5 綜合案例——制作新聞菜單 47
3.6 大神解惑 49
3.7 跟我練練手 50
第II篇 核 心 技 術(shù)
第4章 使用CSS3控制網(wǎng)頁(yè)字體
與段落樣式 53
4.1 通過(guò)CSS控制字體樣式 54
4.1.1
控制字體類型 54
4.1.2
定義字體大小 55
4.1.3
定義字體風(fēng)格 56
4.1.4
控制文字的粗細(xì) 57
4.1.5
將小寫(xiě)字母轉(zhuǎn)換為大寫(xiě)字母 58
4.1.6
設(shè)置字體的復(fù)合屬性 59
4.1.7
定義文字的顏色 59
4.2
CSS3中新增的文本高級(jí)樣式 61
4.2.1
添加文本的陰影效果 61
4.2.2
設(shè)置文本溢出效果 62
4.2.3
控制文本的換行 63
4.2.4
設(shè)置字體尺寸 64
4.3 通過(guò)CSS控制文本間距與對(duì)齊方式 65
4.3.1
設(shè)置單詞之間的間隔 65
4.3.2
設(shè)置字符之間的間隔 66
4.3.3
為文本添加下劃線、上劃線、
刪除線 67
4.3.4
設(shè)置垂直對(duì)齊方式 68
4.3.5
轉(zhuǎn)換文本的大小寫(xiě) 69
4.3.6
設(shè)置文本的水平對(duì)齊方式 70
4.3.7
設(shè)置文本的縮進(jìn)效果 72
4.3.8
設(shè)置文本的行高 73
4.3.9
文本的空白處理 74
4.3.10
文本的反排 75
4.4 綜合案例1——設(shè)置網(wǎng)頁(yè)標(biāo)題 76
4.5 綜合案例2——制作新聞頁(yè)面 78
4.6 大神解惑 79
4.7 跟我練練手 80
第5章 使用CSS控制網(wǎng)頁(yè)圖片樣式 81
5.1 圖片縮放 82
5.1.1
通過(guò)描述標(biāo)記width和height
縮放圖片 82
5.1.2
使用CSS3中的max-width和
max-height縮放圖片 82
5.1.3
使用CSS3中的width和height
縮放圖片 83
5.2 設(shè)置圖片的對(duì)齊方式 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——制作學(xué)校宣傳單 90
5.5 綜合案例2——制作簡(jiǎn)單圖文混排
網(wǎng)頁(yè) 92
5.6 大神解惑 94
5.7 跟我練練手 94
第6章 使用CSS控制網(wǎng)頁(yè)背景
與邊框樣式 95
6.1 使用CSS控制網(wǎng)頁(yè)背景 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)頁(yè)背景屬性 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
指定兩個(gè)圓角半徑 114
6.4.3
繪制4個(gè)不同圓角邊框 115
6.4.4
繪制不同種類的邊框 117
6.5
CSS3中的漸變效果 119
6.5.1
線性漸變效果 119
6.5.2
徑向漸變效果 121
6.6 綜合案例1——制作簡(jiǎn)單公司主頁(yè) 122
6.7 綜合案例2——制作簡(jiǎn)單生活資訊
主頁(yè) 126
6.8 大神解惑 127
6.9 跟我練練手 128
第7章 使用CSS3美化網(wǎng)頁(yè)瀏覽
效果 129
7.1 使用CSS3美化超鏈接 130
7.1.1
改變超級(jí)鏈接基本樣式 130
7.1.2
設(shè)置帶有提示信息的超級(jí)
鏈接 131
7.1.3
設(shè)置超級(jí)鏈接的背景圖 132
7.1.4
設(shè)置超級(jí)鏈接的按鈕效果 133
7.2 使用CSS3美化鼠標(biāo)特效 134
7.2.1
使用CSS3控制鼠標(biāo)箭頭 134
7.2.2
設(shè)置鼠標(biāo)變幻式超鏈接 135
7.2.3
設(shè)置網(wǎng)頁(yè)頁(yè)面滾動(dòng)條 136
7.3 綜合案例1——圖片版本超級(jí)鏈接 138
7.4 綜合案例2——鼠標(biāo)特效 140
7.5 綜合案例3——制作一個(gè)簡(jiǎn)單的
導(dǎo)航欄 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——制作用戶登錄頁(yè)面 155
8.4 綜合案例2——制作用戶注冊(cè)頁(yè)面 156
8.5 大神解惑 159
8.6 跟我練練手 159
第9章 控制列表和菜單樣式 161
9.1
美化項(xiàng)目列表的樣式 162
9.1.1
美化無(wú)序列表 162
9.1.2
美化有序列表 163
9.1.3
美化自定義列表 165
9.1.4
制作圖片列表 166
9.1.5
縮進(jìn)圖片列表 167
9.1.6
列表復(fù)合屬性 168
9.2 使用CSS制作網(wǎng)頁(yè)菜單 169
9.2.1
制作無(wú)須表格的菜單 169
9.2.2
制作水平和垂直菜單 171
9.3 綜合案例1——模擬soso導(dǎo)航欄 173
9.4 綜合案例2——將段落轉(zhuǎn)變成列表 177
9.5 大神解惑 178
9.6 跟我練練手 178
第10章 使用濾鏡美化網(wǎng)頁(yè)元素 179
10.1
濾鏡概述 180
10.2
設(shè)置基本濾鏡效果 181
10.2.1
高斯模糊濾鏡 181
10.2.2
明暗度濾鏡 182
10.2.3
對(duì)比度濾鏡 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
第III篇 網(wǎng) 頁(yè) 布 局
第11章 CSS定位與DIV布局核心
技術(shù) 195
11.1
了解塊級(jí)元素和行內(nèi)級(jí)元素 196
11.1.1
塊級(jí)元素和行內(nèi)級(jí)元素的
應(yīng)用 196
11.1.2
div元素和span元素的區(qū)別 198
11.2
盒子模型 198
11.2.1
盒子模型的概念 198
11.2.2
定義網(wǎng)頁(yè)border區(qū)域 199
11.2.3
定義網(wǎng)頁(yè)padding區(qū)域 200
11.2.4
定義網(wǎng)頁(yè)margin區(qū)域 201
11.3
彈性盒模型 204
11.3.1
定義盒子布局方向 205
11.3.2
定義盒子布局順序 206
11.3.3
定義盒子布局位置 208
11.3.4
定義盒子彈性空間 209
11.3.5
管理盒子空間 211
11.3.6
盒子空間的溢出管理 213
11.4
綜合案例1——圖文排版效果 214
11.5
綜合案例2——淘寶導(dǎo)購(gòu)菜單 217
11.6
大神解惑 219
11.7
跟我練練手 220
第12章 CSS DIV盒子的浮動(dòng)
與定位 221
12.1
定義DIV 222
12.1.1
什么是DIV 222
12.1.2
創(chuàng)建DIV 222
12.2
盒子的定位 223
12.2.1
靜態(tài)定位 223
12.2.2
相對(duì)定位 224
12.2.3
絕對(duì)定位 225
12.2.4
固定定位 226
12.2.5
盒子的浮動(dòng) 227
12.3
其他CSS布局定位方式 229
12.3.1
溢出定位 229
12.3.2
隱藏定位 231
12.3.3
z-index空間定位 233
12.4
新增CSS3多列布局 234
12.4.1
設(shè)置列寬度 234
12.4.2
設(shè)置列數(shù) 236
12.4.3
設(shè)置列間距 237
12.4.4
設(shè)置列邊框樣式 238
12.5
綜合案例1——定位網(wǎng)頁(yè)布局樣式 240
12.6
綜合案例2——制作陰影文字效果 243
12.7
大神解惑 244
12.8
跟我練練手 244
第13章 固定寬度網(wǎng)頁(yè)布局剖析
與制作 245
13.1
CSS排版觀念 246
13.1.1
將頁(yè)面用div分塊 246
13.1.2
設(shè)置各塊位置 246
13.1.3
用CSS定位 247
13.2
固定寬度網(wǎng)頁(yè)剖析與布局 250
13.2.1
網(wǎng)頁(yè)單列布局模式 250
13.2.2
網(wǎng)頁(yè)1-2-1型布局模式 254
13.2.3
網(wǎng)頁(yè)1-3-1型布局模式 258
13.3
大神解惑 261
13.4
跟我練練手 262
第14章 自動(dòng)縮放網(wǎng)頁(yè)布局剖析
與制作 263
14.1
自動(dòng)縮放網(wǎng)頁(yè)1-2-1型布局模式 264
14.1.1
“1-2-1”等比例變寬布局 264
14.1.2
“1-2-1”單列變寬布局 265
14.2
自動(dòng)縮放網(wǎng)頁(yè)1-3-1型布局模式 266
14.2.1
“1-3-1”三列寬度等比例
布局 266
14.2.2
“1-3-1”單側(cè)列寬度固定的
變寬布局 266
14.2.3
“1-3-1”中間列寬度固定的
變寬布局 270
14.2.4
“1-3-1”雙側(cè)列寬度固定的
變寬布局 273
14.2.5
“1-3-1”中列和左側(cè)列寬度
固定的變寬布局 277
14.3
分列布局背景色的使用 280
14.3.1
設(shè)置固定寬度布局的列
背景色 280
14.3.2
設(shè)置特殊寬度變化布局的列
背景色 282
14.4
綜合案例1——單列寬度變化布局 284
14.5
綜合案例2——多列等比例寬度變化
布局 285
14.6
大神解惑 288
14.7
跟我練練手 288
第IV篇 高 級(jí) 技 能
第15章 過(guò)渡和動(dòng)畫(huà)效果 291
15.1
了解過(guò)渡效果 292
15.2
添加過(guò)渡效果 292
15.3
了解動(dòng)畫(huà)效果 295
15.4
添加動(dòng)畫(huà)效果 296
15.5
大神解惑 297
15.6
跟我練練手 298
第16章 2D和3D效果 299
16.1
了解2D轉(zhuǎn)換效果 300
16.2
添加2D轉(zhuǎn)換效果 300
16.2.1
添加2D移動(dòng)效果 300
16.2.2
添加2D旋轉(zhuǎn)效果 301
16.2.3
添加2D縮放效果 302
16.2.4
添加2D傾斜效果 303
16.2.5
添加綜合變幻效果 304
16.3
添加3D轉(zhuǎn)換效果 305
16.4
大神解惑 308
16.5
跟我練練手 308
第17章 創(chuàng)建響應(yīng)式頁(yè)面 309
17.1
了解彈性盒子 310
17.2
使用彈性盒子 310
17.3
設(shè)置彈性子元素的位置 313
17.4
設(shè)置彈性子元素的橫向?qū)R方式 314
17.5
設(shè)置彈性子元素的縱向?qū)R方式 319
17.6
設(shè)置彈性子元素的換行方式 321
17.7
綜合案例——使用彈性盒子創(chuàng)建
響應(yīng)式頁(yè)面 323
17.8
大神解惑 325
17.9
跟我練練手 326
第V篇 綜 合 案 例
第18章 商業(yè)門(mén)戶類網(wǎng)站賞析 329
18.1
整體設(shè)計(jì) 330
18.1.1
顏色應(yīng)用分析 330
18.1.2
架構(gòu)布局分析 331
18.2
主要模塊設(shè)計(jì) 331
18.2.1
網(wǎng)頁(yè)整體樣式插入 331
18.2.2
網(wǎng)頁(yè)局部樣式 333
18.2.3
頂部模塊樣式代碼分析 340
18.2.4
中間主體代碼分析 341
18.2.5
底部模塊分析 344
18.3
網(wǎng)站調(diào)整 345
18.3.1
部分內(nèi)容調(diào)整 345
18.3.2
模塊調(diào)整 345
18.3.3
調(diào)整后預(yù)覽測(cè)試 347
第19章 設(shè)計(jì)在線購(gòu)物類網(wǎng)頁(yè) 349
19.1
整體布局 350
19.1.1
設(shè)計(jì)分析 350
19.1.2
排版架構(gòu) 350
19.2
主要模塊設(shè)計(jì) 351
19.2.1
Logo與導(dǎo)航區(qū) 351
19.2.2
Banner與資訊區(qū) 353
19.2.3
產(chǎn)品類別區(qū)域 354
19.2.4
頁(yè)腳區(qū)域 355
第20章 設(shè)計(jì)企業(yè)門(mén)戶類網(wǎng)頁(yè) 357
20.1
構(gòu)思布局 358
20.1.1
設(shè)計(jì)分析 358
20.1.2
排版架構(gòu) 358
20.2
主要模塊設(shè)計(jì) 359
20.2.1
Logo與導(dǎo)航菜單 359
20.2.2
Banner區(qū) 360
20.2.3
資訊區(qū) 361
20.2.4
版權(quán)信息 363
第21章 設(shè)計(jì)娛樂(lè)休閑類網(wǎng)頁(yè) 365
21.1
整體設(shè)計(jì) 366
21.1.1
應(yīng)用設(shè)計(jì)分析 366
21.1.2
架構(gòu)布局分析 367
21.2
主要模塊設(shè)計(jì) 368
21.2.1
網(wǎng)頁(yè)整體樣式插入 368
21.2.2
頂部模塊代碼分析 369
21.2.3
視頻模塊代碼分析 370
21.2.4
評(píng)論模塊代碼分析 371
21.2.5
熱門(mén)推薦模塊代碼分析 373
21.2.6
底部模塊分析 375
21.3
網(wǎng)頁(yè)調(diào)整 376
21.3.1
部分內(nèi)容調(diào)整 376
21.3.2
調(diào)整后預(yù)覽測(cè)試 377
第22章 設(shè)計(jì)圖像影音類網(wǎng)頁(yè) 379
22.1
整體設(shè)計(jì) 380
22.1.1
顏色應(yīng)用分析 380
22.1.2
架構(gòu)布局分析 381
22.2
主要模塊設(shè)計(jì) 382
22.2.1
樣式代碼分析 382
22.2.2
頂部模塊樣式代碼分析 386
22.2.3
網(wǎng)站主體模塊代碼分析 387
22.2.4
底部模塊分析 391
22.3
網(wǎng)站調(diào)整 392
22.3.1
部分內(nèi)容調(diào)整 392
22.3.2
模塊調(diào)整 392
22.3.3
調(diào)整后預(yù)覽測(cè)試 395
展開(kāi)全部
CSS3網(wǎng)頁(yè)樣式與布局案例課堂 作者簡(jiǎn)介
作者長(zhǎng)期從事網(wǎng)站開(kāi)發(fā)工作,數(shù)年來(lái)承接了大量的項(xiàng)目,具有豐富的實(shí)踐經(jīng)驗(yàn)。