HTML5+CSS3网页设计与制作案例教程【2025|PDF|Epub|mobi|kindle电子书版本百度云盘下载】

HTML5+CSS3网页设计与制作案例教程PDF格式电子书版下载

注意：本站所有压缩包均有解压码： 点击下载压缩包解压工具

第1章 网页设计基础知识1

1.1 网页相关知识简介2

1.1.1 互联网（internet）、因特网（Internet）、万维网（WWW）2

1.1.2 网站和网页2

1.1.3 网页与HTML3

1.1.4 静态网页和动态网页4

1.1.5 IP地址、域名和URL5

1.1.6 HTTP和FTP6

1.1.7 浏览器6

1.2 网页的基本元素6

1.2.1 网页的基本媒体元素6

1.2.2 网页的基本布局元素8

1.3 网页设计常用技术10

1.3.1 网页标记语言HTML10

1.3.2 网页表现技术CSS10

1.3.3 网页脚本语言JavaScript11

1.3.4 动态网页编程技术ASP.NET、JSP、PHP等11

1.4 网页设计常用工具11

1.4.1 基于文本的编辑器12

1.4.2 所见即所得编辑器13

1.4.3 如何选择工具13

1.5 习题14

1.5.1 单选题14

1.5.2 填空题14

1.5.3 判断题14

1.5.4 简答题15

第2章 HTML5基础17

2.1 认识HTML518

2.1.1 HTML及其发展18

2.1.2 HTML5的新特性18

2.1.3 编写第一个HTML5文件19

2.2 HTML基本语法20

2.2.1 标记与元素20

2.2.2 HTML属性22

2.2.3 全局属性22

2.3 HTML5文档的结构25

2.3.1 HTML5文档的基本结构25

2.3.2 网页标题＜title＞25

2.3.3 定义元数据＜meta＞26

2.3.4 HTML5新增的结构标记29

2.4 综合案例——基本的HTML5网页30

2.5 习题32

2.5.1 填空题32

2.5.2 判断题32

2.5.3 简答题32

第3章 文字与段落33

3.1 基本的文字排版34

3.1.1 段落＜p＞34

3.1.2 控制换行＜br＞35

3.1.3 预先格式化＜pre＞37

3.1.4 水平线＜hr＞38

3.1.5 标题文字＜h1＞～＜h6＞40

3.2 描述文本的语义化、结构化元素41

3.2.1 强调文本＜b＞/＜i＞/＜em＞／＜strong＞41

3.2.2 作品标题＜cite＞43

3.2.3 小型文本＜small＞44

3.2.4 标记文本改变＜ins＞/＜del＞45

3.2.5 文字上下标＜sup＞／＜sub＞46

3.2.6 旁注＜ruby＞/＜rt＞/＜rp＞47

3.2.7 日期时间＜time＞48

3.2.8 其他语义化、结构化元素49

3.3 块级元素与行内元素49

3.4 无语义的容器元素51

3.4.1 ＜div＞元素51

3.4.2 ＜span＞元素53

3.5 使用字符实体表示特殊字符54

3.6 添加注释55

3.7 列表56

3.7.1 无序列表＜ul＞56

3.7.2 有序列表＜ol＞58

3.7.3 描述列表＜dl＞/＜dt＞/＜dd＞60

3.7.4 列表嵌套62

3.8 综合实例——简单文字网页63

3.9 习题66

3.9.1 单选题66

3.9.2 填空题67

3.9.3 判断题67

3.9.4 简答题67

第4章 HTML5中的图像、音频和视频69

4.1 文件路径70

4.1.1 绝对路径70

4.1.2 相对路径70

4.2 在页面中插入图像＜img＞71

4.2.1 网页图像的格式71

4.2.2 插入图像72

4.3 在网页中插入视频＜video＞74

4.3.1 视频格式74

4.3.2 插入视频74

4.4 在网页中插入音频＜audio＞76

4.4.1 音频格式76

4.4.2 插入音频格式77

4.5 使用多种来源的多媒体和备用文本＜source＞78

4.6 插入多媒体文件＜embed＞78

4.7 定义媒介分组和标题＜figure＞/＜figcaption＞80

4.8 综合实例——多媒体页面的设计82

4.9 习题84

4.9.1 单选题84

4.9.2 填空题84

4.9.3 判断题85

4.9.4 简答题85

第5章 超链接87

5.1 超链接概述88

5.2 基本链接88

5.2.1 外部链接88

5.2.2 内部链接90

5.2.3 ＜a＞标记的属性91

5.2.4 超链接的目标类型95

5.2.5 Email链接97

5.3 锚记（书签）链接97

5.4 设置图像映射101

5.5 内联框架＜iftame＞及其链接104

5.5.1 内联框架104

5.5.2 内联框架相关的链接105

5.6 定义基准地址＜base＞107

5.7 综合实例——设置超链接108

5.8 习题112

5.8.1 单选题112

5.8.2 填空题113

5.8.3 判断题113

5.8.4 简答题113

第6章 表格115

6.1 表格简介116

6.2 创建表格116

6.2.1 表格基本结构117

6.2.2 表格边框显示119

6.2.3 带图像的单元格121

6.3 合并单元格122

6.3.1 设置跨列colspan122

6.3.2 设置跨行rowspan124

6.4 表格嵌套126

6.5 表格的按行分组显示＜thead＞/＜tbody＞/＜tfoot＞127

6.6 综合实例——表格应用129

6.7 习题131

6.7.1 单选题131

6.7.2 填空题131

6.7.3 判断题132

6.7.4 简答题132

第7章 表单133

7.1 表单概述134

7.2 建立表单＜form＞135

7.3 表单基本元素135

7.3.1 ＜input＞标记136

7.3.2 多行文字框＜textarea＞143

7.3.3 列表＜select＞/＜option＞/＜datalist＞144

7.4 ＜input＞新增表单高级元素146

7.4.1 url类型147

7.4.2 email类型148

7.4.3 日期和时间149

7.4.4 数字类型150

7.4.5 color类型151

7.4.6 fieldset控件组152

7.4.7 search类型153

7.4.8 tel类型153

7.5 通用的表单属性154

7.5.1 autofocus属性154

7.5.2 multiple属性155

7.5.3 placeholder属性156

7.5.4 required属性157

7.5.5 pattern属性158

7.6 综合实例——表单设计160

7.7 习题162

7.7.1 单选题162

7.7.2 填空题162

7.7.3 简答题163

第8章 CSS基础165

8.1 CSS介绍166

8.1.1 CSS概述166

8.1.2 CSS3167

8.2 CSS的基本语法168

8.3 CSS属性169

8.4 在HTML文档中使用CSS的方法171

8.4.1 行内样式171

8.4.2 内部样式表172

8.4.3 链入外部样式表175

8.4.4 导入外部样式表177

8.5 CSS基本选择器178

8.5.1 标记选择器179

8.5.2 类选择器179

8.5.3 id选择器181

8.5.4 通用选择器183

8.6 其他CSS选择器184

8.6.1 组合选择器184

8.6.2 伪类选择器191

8.6.3 伪对象选择器192

8.6.4 属性选择器192

8.7 综合案例——CSS的简单应用194

8.8 习题197

8.8.1 单选题197

8.8.2 填空题198

8.8.3 判断题198

8.8.4 简答题198

第9章 CSS文本样式199

9.1 颜色color200

9.2 CSS字体属性202

9.2.1 字型font-family203

9.2.2 字体尺寸font-size204

9.2.3 字体粗细font-weight207

9.2.4 字体风格font-style209

9.2.5 小型大写字母font-variant210

9.2.6 字体复合属性font211

9.3 文本格式化213

9.3.1 行高line-height213

9.3.2 水平对齐方式text-align215

9.3.3 文本缩进text-indent216

9.3.4 大小写text-transform218

9.3.5 字符间距letter-spacing219

9.3.6 单词间距word-spacing220

9.3.7 垂直对齐方式vertical-align221

9.3.8 文本修饰text-decoration223

9.3.9 文本阴影text-shadow225

9.3.10 书写模式writing-mode226

9.3.11 断行处理word-wrap和overflow-wrap229

9.3.12 文本相关伪对象231

9.4 CSS列表属性232

9.4.1 列表项目符号list-style-type233

9.4.2 图片符号list-style-image235

9.4.3 列表符号位置list-style-position236

9.4.4 列表复合属性list-style238

9.5 综合实例——基本图文混排网页240

9.6 习题244

9.6.1 单选题244

9.6.2 填空题245

9.6.3 判断题246

9.6.4 简答题246

第10章 CSS盒子模型247

10.1 盒子BOX的基本概念248

10.1.1 盒子的基本形式248

10.1.2 盒子大小的计算width/height250

10.1.3 改变盒子大小的计算方式box-sizing252

10.2 边框的基本属性254

10.2.1 边框样式border-style254

10.2.2 边框厚度border-width256

10.2.3 边框颜色border-color258

10.2.4 边框复合属性260

10.3 边距261

10.3.1 内边距padding261

10.3.2 外边距margin264

10.4 边框的其他属性267

10.4.1 圆角边框border-radius267

10.4.2 图像边框border-image270

10.4.3 盒子阴影box-shadow275

10.5 综合案例——盒子布局排版278

10.6 习题284

10.6.1 单选题284

10.6.2 填空题286

10.6.3 判断题286

10.6.4 简答题286

第11章 CSS背景287

11.1 CSS背景概述288

11.2 背景颜色288

11.2.1 背景颜色background-color288

11.2.2 用背景色给页面分块290

11.3 背景图像294

11.3.1 页面背景图像background-image294

11.3.2 背景图像重复background-repeat296

11.3.3 背景图像滚动background-attachment298

11.3.4 背景图像位置background-position300

11.3.5 背景参考原点background-origin302

11.3.6 背景图像尺寸background-size304

11.3.7 背景图像裁剪区域background-clip306

11.3.8 线性渐变背景图像308

11.4 背景复合属性和多背景311

11.4.1 背景复合属性background311

11.4.2 多背景311

11.5 定义不透明度314

11.6 综合实例——设置背景315

11.7 习题323

11.7.1 单选题323

11.7.2 填空题324

11.7.3 判断题324

11.7.4 简答题324

第12章 CSS美化表格与表单325

12.1 CSS美化表格326

12.1.1 表格边框颜色设置326

12.1.2 盒子阴影327

12.1.3 表格隔行变色329

12.1.4 表格交互变色332

12.2 CSS美化表单333

12.2.1 美化表单文本框334

12.2.2 美化表单元素背景颜色335

12.2.3 美化注册表单元素例子337

第13章 CSS盒子布局和定位341

13.1 CSS定位属性342

13.1.1 正常流向342

13.1.2 定位偏移属性top、bottom、right、left344

13.1.3 定位方式position344

13.1.4 分层呈现z-index353

13.1.5 裁切clip354

13.2 CSS布局属性356

13.2.1 可见性visibility356

13.2.2 溢出overflow358

13.2.3 显示display361

13.2.4 浮动float364

13.2.5 清除clear367

13.3 综合案例——幼儿园页面设计369

13.4 习题380

13.4.1 单选题380

13.4.2 填空题380

13.4.3 判断题380

13.4.4 简答题381

第14章 网页布局383

14.1 网页布局方法384

14.1.1 网页布局基本思想384

14.1.2 DIV+CSS布局384

14.1.3 DIV+CSS分块方法385

14.2 设计超链接样式389

14.2.1 超链接样式变换389

14.2.2 按钮式超链接394

14.2.3 使用列表制作菜单397

14.3 布局版式401

14.3.1 版心和布局流程401

14.3.2 单列布局403

14.3.3 两列布局408

14.3.4 三列布局416

14.3.5 通栏布局429

14.4 习题439

14.4.1 单选题439

14.4.2 填空题439

14.4.3 判断题439

14.4.4 简答题439

第15章 综合案例——旅游网站441

15.1 网页布局概述442

15.2 页面的设计442

15.3 全局样式设定454

15.4 网页首部（top）454

15.4.1 链接菜单（link）455

15.4.2 导航菜单（menu）456

15.4.3 网站的横幅广告（bannerwrap）457

15.5 主内容区（main）458

15.5.1 登录区（lon）459

15.5.2 左边内容区（left）460

15.5.3 中间上部内容区（centertop）462

15.5.4 中间底部内容区（centerbottom）464

15.5.5 右边内容区（rigth）466

15.6 页尾区（footer）469

第16章 综合案例——婚戒网站471

16.1 网站总体设计472

16.2 首页设计473

16.2.1 首页页面效果473

16.2.2 首页版式布局475

16.2.3 首页HTML代码实现476

16.2.4 公用的CSS代码实现480

16.2.5 首页CSS代码实现481

16.3 “品牌文化”页面设计485

16.3.1 “品牌文化”页面效果485

16.3.2 “品牌文化”页面版式布局488

16.3.3 “品牌文化”页面HTML代码实现489

16.3.4 “品牌文化”页面CSS代码实现493

16.4 “排行榜”页面设计496

16.4.1 “排行榜”页面效果496

16.4.2 “排行榜”页面版式布局499

16.4.3 “排行榜”页面HTML代码实现499

16.4.4 “排行榜”页面CSS代码实现503

16.5 “爱的社区”页面设计504

16.5.1 “爱的社区”页面效果504

16.5.2 “爱的社区”页面版式布局506

16.5.3 “爱的社区”页面HTML代码实现508

16.5.4 “爱的社区”页面CSS代码实现511

附录513