HTML5+CSS3網頁設計案例教程

第1章  HTML5概述   1

1.1  什麼是HTML5   2

1.2  HTML5發展歷程   2

1.3  HTML5文檔結構   5

1.3.1  文檔類型聲明   6

1.3.2  主標簽   6

1.3.3  頭部信息   6

1.3.4  主體內容   10

1.4  HTML5文件的編寫方法   11

1.4.1  手動編寫HTML5文件   11

1.4.2  使用HTML編輯器   12

1.5  案例演練   12

第2章  設計網頁文本   17

2.1  定義標題   18

2.2  定義段落   19

2.2.1  使用段落標簽   19

2.2.2  使用換行標簽   19

2.3  定義文字格式   20

2.3.1  字體   20

2.3.2  字號   21

2.3.3  顏色   22

2.3.4  強調   23

2.3.5  註解   23

2.3.6  備選   24

2.3.7  上下標   24

2.3.8  術語   25

2.3.9  代碼   26

2.3.10  預定義格式   26

2.3.11  縮寫詞   27

2.3.12  編輯提示   27

2.3.13  引用   28

2.3.14  引述   29

2.3.15  換行顯示   29

2.4  定義文字效果   30

2.4.1  高亮   30

2.4.2  進度   31

2.4.3  刻度   31

2.4.4  時間   32

2.4.5  聯系信息   33

2.4.6  顯示方向   34

2.4.7  換行斷點   34

2.4.8  旁註   35

2.5  案例演練   35

第3章  設計網頁圖像   37

3.1  網頁圖像概述   38

3.1.1  網頁支持的圖片格式   38

3.1.2  網頁圖像的路徑   39

3.2  定義圖像   40

3.3  定義流   41

3.4  定義圖標   42

3.5  定義響應式圖像   43

3.6  案例演練   47

第4章  設計超鏈接   49

4.1  超鏈接概述   50

4.1.1  超鏈接的類型   50

4.1.2  超鏈接的路徑   50

4.2  頁間鏈接   51

4.3  塊鏈接   52

4.4  錨記鏈接   53

4.5  目標鏈接   53

4.6  郵件鏈接   54

4.7  下載鏈接   54

4.8  圖像熱點鏈接   55

4.9  框架鏈接   55

4.10  案例演練   56

第5章  CSS3概述   61

5.1  什麼是CSS3   62

5.1.1  CSS歷史   62

5.1.2  CSS3模塊   62

5.1.3  CSS3特性   64

5.2  CSS3基本用法   65

5.2.1  CSS3樣式概述   65

5.2.2  應用CSS3樣式   66

5.2.3  CSS3樣式表   67

5.2.4  CSS3代碼註釋   68

5.2.5  CSS3代碼格式化   68

5.2.6  CSS3繼承性   69

5.2.7  CSS3層疊性   70

5.3  CSS3選擇器   70

5.3.1  標簽選擇器   71

5.3.2  類選擇器   71

5.3.3  ID選擇器   71

5.3.4  包含選擇器   72

5.3.5  子選擇器   73

5.3.6  相鄰選擇器   73

5.3.7  兄弟選擇器   74

5.3.8  屬性選擇器   74

5.3.9  結構偽類選擇器   77

5.3.10  否定偽類選擇器   79

5.3.11  狀態偽類選擇器   79

5.3.12  目標偽類選擇器   81

5.3.13  動態偽類選擇器   81

5.3.14  偽對象選擇器   82

5.4  案例演練   83

第6章  CSS3文本樣式   87

6.1  CSS3文本模塊概述   88

6.2  字體樣式   92

6.2.1  字體   92

6.2.2  大小   92

6.2.3  顏色   93

6.2.4  粗細   93

6.2.5  斜體   94

6.2.6  修飾線   94

6.2.7  變體   95

6.2.8  大小寫   95

6.3  文本格式   95

6.3.1  對齊   95

6.3.2  間距   97

6.3.3  行高   97

6.3.4  縮進   98

6.3.5  換行   98

6.4  書寫模式   100

6.5  特殊值   102

6.6  文本效果   105

6.6.1  文本陰影   105

6.6.2  文本特效   107

6.7  顏色模式   110

6.8  動態內容   115

6.9  自定義字體   118

6.10  案例演練   120

第7章  CSS3圖像樣式   123

7.1  設計圖像   124

7.1.1  圖像大小   124

7.1.2  圖像邊框   125

7.1.3  半透明圖像   126

7.1.4  圓形圖像   126

7.1.5  陰影圖像   127

7.2  圖像背景   128

7.2.1  定義背景圖像   128

7.2.2  背景原點/位置/裁剪   129

7.2.3  控制大小   131

7.2.4  固定顯示   132

7.3  漸變背景   132

7.3.1  線性漸變與重復線性漸變   133

7.3.2  徑向漸變與重復徑向漸變   135

7.4  案例演練   137

第8章  CSS3盒子模型   149

8.1  顯示方式   150

8.2  可控大小   151

8.3  內容溢出   152

8.4  輪廓線   153

8.5  圓角邊框   155

8.6  圖像邊框   156

8.7  盒子陰影   158

8.8  佈局方式   166

8.8.1  流動佈局   166

8.8.2  浮動佈局   167

8.8.3  定位佈局   168

8.9  案例演練   170

第9章  CSS3移動佈局   173

9.1  多列佈局   174

9.1.1  定義列寬   174

9.1.2  定義列數   175

9.1.3  定義列間距   175

9.1.4  定義列邊框   176

9.1.5  定義跨列顯示   177

9.1.6  定義列的高度   178

9.2  盒佈局模型   178

9.2.1  定義寬度   179

9.2.2  定義順序   180

9.2.3  定義方向   181

9.2.4  自適應大小   182

9.2.5  消除空白   183

9.2.6  定義對齊方式   185

9.3  彈性盒佈局   186

9.3.1  定義彈性盒   186

9.3.2  定義伸縮方向   187

9.3.3  定義行數   188

9.3.4  定義對齊方式   189

9.3.5  定義伸縮項目   190

9.4  媒體查詢   191

9.5  案例演練   193

第10章  CSS3變形和動畫   197

10.1  CSS3變形   198

10.1.1  2D旋轉   198

10.1.2  2D縮放   199

10.1.3  2D移動   200

10.1.4  2D傾斜   201

10.1.5  2D矩陣   202

10.1.6  變形原點   204

10.1.7  3D變形   205

10.1.8  3D位移   207

10.1.9  3D縮放   208

10.1.10  3D旋轉   209

10.2  過渡樣式   211

10.2.1  定義過渡   211

10.2.2  定義過渡時間   212

10.2.3  定義延遲   212

10.2.4  定義動畫效果   213

10.2.5  定義觸發時機   213

10.3  關鍵幀動畫   215

10.3.1  定義關鍵幀   216

10.3.2  定義關鍵幀動畫   216

10.4  案例演練   218

第11章  設計表格   221

11.1  定義表格   222

11.1.1  簡單表格   222

11.1.2  列標題   222

11.1.3  表格的標題   222

11.1.4  行分組   223

11.1.5  列分組   223

11.2  設置表格   224

11.2.1  內/外框線   224

11.2.2  單元格間距   225

11.2.3  細線邊框   225

11.2.4  內容摘要   226

11.3  設置單元格   226

11.3.1  跨單元格顯示   226

11.3.2  表頭單元格   226

11.3.3  綁定表頭   227

11.3.4  信息縮寫   227

11.3.5  單元格分類   228

11.4  設置表格樣式   228

11.5  案例演練   232

第12章  設計表單   239

12.1  定義表單   240

12.1.1  設計表單結構   240

12.1.2  組織表單結構   240

12.1.3  添加提示文本   241

12.2  定義表單控件   242

12.2.1  文本框   242

12.2.2  密碼框   245

12.2.3  文本區域   246

12.2.4  單選按鈕和復選框   247

12.2.5  選擇框   249

12.2.6  文件域和隱藏域   250

12.2.7  按鈕   250

12.2.8  數據列表   251

12.2.9  密鑰生成器   252

12.2.10  輸出結果   252

12.3  設置表單屬性   253

12.3.1  名稱和值   253

12.3.2  布爾型屬性   253

12.3.3  必填屬性   255

12.3.4  禁止驗證   256

12.3.5  多選屬性   257

12.3.6  自動完成   257

12.3.7  自動獲取焦點   258

12.3.8  所屬表單   259

12.3.9  表單重寫   259

12.3.10  高度和寬度   260

12.3.11  最小值/最大值/步長   260

12.3.12  匹配模式   261

12.3.13  替換文本   261

12.4  設計表單樣式   262

12.5  定製表單   267

12.6  案例演練   270

第13章  設計多媒體   275

13.1  使用audio元素   276

13.2  使用video元素   277

13.3  設置媒體屬性   278

13.4  使用媒體方法   282

13.5  使用媒體事件   283

13.6  使用<embed>標簽   286

13.7  使用<object>標簽   286

13.8  案例演練   287