CSS3+DIV網頁樣式與布局從入門到精通（微課精編版）

圖書信息

CSS3+DIV網頁樣式與布局從入門到精通（微課精編版）

作者：前端科技
　　定價：89.80元
印次：1-1
ISBN：9787302501992
出版日期：2018.12.01
印刷日期：2018.11.29

內容簡介

《CSS3+DIV網頁樣式與布局從入門到精通（微課精編版）》從初學者角度出發，通過通俗易懂的語言、豐富多彩的實例，詳細介紹了CSS3+DIV前端開發技術及其套用。本書共16章，包括CSS3基礎、使用CSS3選擇器、使用CSS美化網頁文本、使用CSS美化圖像、使用CSS美化超連結、使用CSS美化列表、使用CSS美化表格、使用CSS美化表單、使用DIV+CSS設計網頁、使用HTML5+CSS3設計網頁、使用CSS3設計彈性布局、使用CSS3設計動態樣式、使用CSS3設計回響式頁面、使用JavaScript 控制CSS樣式、團購類型網站的布局與設計、掘客類型網站的布局與設計等內容。書中所有知識都結合具體實例進行介紹，代碼注釋詳盡，讀者可輕鬆掌握前端技術精髓，提升實際開發能力。

目　錄

第1章　CSS3基礎 1

視頻講解：33分鐘

1.1 CSS發展歷史 2

1.2 使用CSS 3

1.2.1 CSS樣式 3

1.2.2 套用CSS樣式 4

1.2.3 CSS樣式表 8

1.2.4 導入外部樣式表 9

1.2.5 CSS注釋 10

1.3 CSS特性 11

1.3.1 CSS層疊性 11

1.3.2 CSS繼承性 15

1.4 案例實戰 16

1.5 線上練習 20

第2章　使用CSS3選擇器 21

視頻講解：42分鐘

2.1 元素選擇器 22

2.1.1 標籤選擇器 22

2.1.2 類選擇器 22

2.1.3 ID選擇器 24

2.1.4 通配選擇器 25

2.2 關係選擇器 26

2.2.1 包含選擇器 26

2.2.2 子選擇器 27

2.2.3 相鄰選擇器 28

2.2.4 兄弟選擇器 30

2.2.5 分組選擇器 31

2.3 屬性選擇器 32

2.4 偽類選擇器 36

2.4.1 動態偽類 37

2.4.2 結構偽類 40

2.4.3 否定偽類 48

2.4.4 狀態偽類 50

2.4.5 目標偽類 52

2.5 線上練習 53

第3章　使用CSS美化網頁文本 54

視頻講解：1小時59分鐘

3.1 字型基本樣式 55

3.1.1 定義字型類型 55

3.1.2 定義字型大小 56

3.1.3 定義字型顏色 58

3.1.4 定義字型粗細 58

3.1.5定義斜體字型59

3.1.6定義下劃線60

3.1.7定義字型大小寫60

3.2文本基本樣式62

3.2.1定義文本對齊62

3.2.2定義垂直對齊63

3.2.3定義字距和詞距65

3.2.4定義行高66

3.2.5定義縮進69

3.3CSS3文本樣式70

3.3.1定義文本陰影70

3.3.2定義溢出文本72

3.3.3定義文本換行74

3.3.4動態添加文本77

3.3.5自定義字型類型79

3.4案例實戰80

3.4.1設計Logo樣式80

3.4.2設計標題樣式82

3.4.3設計正文樣式85

3.4.4規劃網頁字型大小86

3.4.5設計居中顯示88

3.4.6設計對象垂直對齊90

3.4.7隱藏和截取網頁文字92

3.4.8設計文章版式96

3.5線上練習100

第4章　使用CSS美化圖像101

視頻講解：1小時26分鐘

4.1設定圖像樣式102

4.1.1定義圖像大小102

4.1.2定義圖像框線103

4.1.3定義圖像不透明度106

4.1.4定義圓角圖像107

4.1.5定義陰影圖像108

4.2設計背景圖像樣式110

4.2.1定義背景圖像110

4.2.2定義顯示方式111

4.2.3定義顯示位置112

4.2.4定義固定背景115

4.2.5定義原點116

4.2.6定義裁剪區域118

4.2.7定義大小120

4.2.8定義多背景圖121

4.3定義漸變背景樣式123

4.3.1線性漸變123

4.3.2徑向漸變128

4.4案例實戰132

4.4.1設計圖文混排版式132

4.4.2設計按鈕134

4.4.3設計花框線136

4.4.4設計圖片鑲邊特效137

4.4.5設計發光的球體138

4.4.6設計圖示138

4.4.7設計圖片水印141

4.5線上練習142

第5章　使用CSS美化超連結143

視頻講解：23分鐘

5.1超連結基本樣式144

5.2案例實戰146

5.2.1設計下劃線樣式146

5.2.2設計動態下劃線樣式149

5.2.3設計按鈕樣式150

5.2.4設計背景圖像交換樣式151

5.2.5設計滑鼠指針樣式153

5.2.6設計圖片按鈕樣式155

5.2.7　設計滑動背景樣式156

5.2.8　設計超連結類型樣式158

5.3線上練習160

第6章　使用CSS美化列表161

視頻講解：50分鐘

6.1列表基本樣式162

6.1.1定義項目符號162

6.1.2自定義項目符號163

6.1.3使用背景圖像設計

項目符號164

6.2案例實戰166

6.2.1設計堆疊樣式166

6.2.2設計水平排列樣式167

6.2.3設計選單樣式170

6.2.4設計導航條171

6.2.5設計下拉選單174

6.2.6設計摺疊導航面板177

6.2.7設計帶提示信息的選單180

6.2.8設計排行榜182

6.2.9設計圖文列表欄目185

6.2.10設計選項卡188

6.2.11設計多級選單191

6.3線上練習194

第7章　使用CSS美化表格195

視頻講解：55分鐘

7.1設定屬性196

7.1.1設定表格屬性196

7.1.2設定單元格屬性198

7.2表格基本樣式199

7.2.1設計表格框線線200

7.2.2定義單元格間距和空隙202

7.2.3隱藏空單元格203

7.2.4定義標題樣式204

7.3案例實戰206

7.3.1設計斑馬線表格206

7.3.2設計粗線框表格209

7.3.3設計淺色風格表格211

7.3.4設計清新風格表格214

7.3.5設計圓潤框線表格215

7.3.6設計數據分組表格218

7.3.7設計單線表格221

7.3.8設計日曆表222

7.4線上練習226

第8章　使用CSS美化表單227

視頻講解：40分鐘

8.1HTML5表單基礎228

8.2案例實戰230

8.2.1設計登錄表單230

8.2.2設計信息登記表231

8.2.3設計易用表單236

8.2.4設計註冊表單239

8.2.5設計聯繫表單241

8.2.6設計高亮樣式244

8.2.7設計圖示表單246

8.2.8設計反饋表248

8.2.9設計搜尋表單253

8.3線上練習256

第9章　使用DIV+CSS設計網頁257

視頻講解：1小時48分鐘

9.1設計文檔結構258

9.1.1定義文檔結構258

9.1.2使用div和span259

9.1.3使用id和class260

9.1.4設定文檔類型261

9.1.5認識顯示模式262

9.2CSS布局基礎264

9.2.1CSS盒模型結構265

9.2.2盒子大小266

9.2.3盒子框線267

9.2.4盒子邊界269

9.2.5盒子補白271

9.2.6認識顯示類型273

9.3浮動布局275

9.3.1定義浮動顯示275

9.3.2清除浮動278

9.3.3浮動嵌套280

9.3.4混合浮動布局282

9.4定位顯示287

9.4.1定義定位顯示287

9.4.2定位框290

9.4.3相對定位292

9.4.4定位層疊293

9.4.5混合定位布局295

9.5案例實戰297

9.5.1設計固寬+彈性頁面298

9.5.2設計兩欄彈性頁面299

9.5.3設計兩欄浮動頁面301

9.5.4設計三欄彈性頁面302

9.5.5設計兩列固寬+單列

彈性頁面305

9.5.6設計兩列彈性+單列

固定頁面308

9.6線上練習310

第10章　使用HTML5+CSS3

設計網頁311

視頻講解：1小時6分鐘

10.1HTML5文檔基礎312

10.1.1文檔變化312

10.1.2標籤用法313

10.1.3編寫HTML5文檔314

10.1.4設計文章塊315

10.1.5設計區塊317

10.1.6設計導航條320

10.1.7設計輔助欄322

10.1.8設計主要區域323

10.1.9設計標題欄324

10.1.10設計標題組325

10.1.11設計頁腳欄326

10.2CSS3增強的界面特性327

10.2.1定義顯示方式327

10.2.2定義可控大小327

10.2.3定義輪廓329

10.2.4設定輪廓樣式331

10.2.5定義框線背景335

10.3案例實戰339

10.3.1設計HTML5文檔

居中顯示339

10.3.2設計HTML5文檔

彈性顯示343

10.3.3調整HTML5欄目

顯示順序344

10.3.4禁止HTML5欄目

錯行顯示348

10.3.5設計HTML5多欄

等高顯示349

10.4線上練習353

第11章　使用CSS3設計彈性布局354

視頻講解：32分鐘

11.1多列布局355

11.1.1設定列寬355

11.1.2設定列數356

11.1.3設定間距357

11.1.4設定列框線357

11.1.5設定跨列顯示358

11.1.6設定列高度360

11.2舊版伸縮盒360

11.2.1啟動伸縮盒360

11.2.2　設定寬度361

11.2.3設定順序363

11.2.4設定方向364

11.2.5設定對齊方式366

11.3新版伸縮盒368

11.3.1認識Flexbox系統368

11.3.2啟動伸縮盒369

11.3.3設定主軸方向370

11.3.4設定行數371

11.3.5設定對齊方式372

11.3.6設定伸縮項目375

11.4伸縮盒版本比較和兼容378

11.4.1版本比較和兼容方法378

11.4.2案例：設計3欄頁面382

11.4.3案例：設計3行3列

套用386

11.5線上練習389

第12章　使用CSS3設計動態樣式390

視頻講解：1小時4分鐘

12.1CSS3變形391

12.1.1認識Transform391

12.1.2設定原點391

12.1.32D旋轉393

12.1.42D縮放394

12.1.52D平移394

12.1.62D傾斜395

12.1.72D矩陣396

12.1.8設定變形類型397

12.1.9設定透視距離和原點398

12.1.103D平移402

12.1.113D縮放403

12.1.123D旋轉404

12.1.13透視函式405

12.1.14變形原點406

12.1.15背景可見406

12.2過渡動畫407

12.2.1設定過渡屬性408

12.2.2設定過渡時間408

12.2.3設定延遲過渡時間409

12.2.4設定過渡動畫類型410

12.2.5設定過渡觸發動作410

12.3幀動畫416

12.3.1設定關鍵幀416

12.3.2設定動畫屬性418

12.4案例實戰421

12.4.1設計圖形421

12.4.2設計冒泡背景按鈕424

12.4.3設計動畫效果選單426

12.4.4設計照片特效428

12.4.5設計立體盒子429

12.4.6旋轉盒子432

12.4.7設計翻轉廣告434

12.4.8設計跑步效果435

12.4.9設計摺疊面板437

12.5線上練習439

第13章　使用CSS3設計回響式頁面440

視頻講解：21分鐘

13.1媒體查詢基礎441

13.1.1媒體類型和媒體查詢441

13.1.2使用@media442

13.1.3套用@media445

13.2案例實戰449

13.2.1判斷顯示螢幕寬度449

13.2.2設計回響式版式451

13.2.3設計回響式選單454

13.2.4設計自動隱藏布局455

13.2.5設計自適應手機頁面458

13.3線上練習462

第14章　使用JavaScript控制CSS

樣式463

視頻講解：1小時14分鐘

14.1在網頁中使用JavaScript

腳本464

14.1.1使用<script>標籤464

14.1.2比較腳本樣式與CSS

樣式466

14.2獲取網頁對象468

14.2.1獲取元素468

14.2.2使用CSS選擇器

匹配元素470

14.3操作類樣式471

14.3.1獲取類樣式471

14.3.2添加類樣式473

14.3.3刪除類樣式474

14.4操作CSS樣式476

14.4.1使用style對象476

14.4.2使用styleSheets對象482

14.4.3訪問樣式483

14.4.4編輯樣式486

14.5案例實戰486

14.5.1設計顯示和隱藏486

14.5.2設計不透明度488

14.5.3設計運動對象489

14.5.4設計漸變效果490

14.5.5設計摺疊面板491

14.5.6設計工具提示493

14.6線上練習497

第15章　團購類型網站的布局與設計498

15.1產品策劃499

15.2畫板和設計499

15.3切圖和輸出502

15.4網站重構504

15.5網站布局506

第16章　掘客類型網站的布局與設計518

16.1產品策劃519

16.2畫板和設計519

16.3切圖和輸出522

16.4網站重構524

16.5網站布局528