HTML5+CSS3 Web开发案例教程 在线实训版

丛书特色： （1）编排丰富实战案例，可扫前言二维码进行快速预览。 （2）提供在线实训平台（http://code.artech.cn），支撑随时开展全书案例实战演练。 （3）开源分阶实战项目（http://www.geekfun.website），助力不同层次读者（学生）获取企业实战项目开发能力。 （4）配套多类教辅资源，包含文本类、视频类（微课视频）、案例类、平台类等。 （5）建立教师服务与交流群（QQ群号：368845661），立体化服务院校教师教学。 特别说明： 为了使本书中的案例作用最大化，我们专门为其提供了“在线实训平台”（http://code.artech.cn）。该平台的具体功能介绍如下。 【在线实训平台】功能： （1）教师可以利用该平台，在上课过程中直接演练（展示）书中的所有案例，并可通过实时的运行结果同步讲解相关知识点和技能。 （2）师生可以通过该平台观看全书导学、原理讲解、案例讲解等视频，配合实操演练，随时随地进行学习，支持开展线上线下混合式教学。 （3）学生可以在课前或课后通过该平台，实操练习书中的所有案例，实时查看代码运行结果，而且所有案例代码均支持复制与还原。 （4）学生还可以通过该平台实操练习各章课后的实操题，并可通过微信分享功能，将实操的结果分享给其他人，如分享给老师进行审阅。 说明：扫描“从书序中的二维码”可以了解该平台的具体使用方法，教师也可通过“教师用书指导手册”了解该平台的具体操作步骤。

本书紧密围绕前端开发工程师在工作中会遇到的实际问题和相应的解决方法与技术层层展开，全面介绍使用HTML5和CSS3进行前端开发的知识内容和实战技巧。 本书共17章：第1～4章介绍了HTML5和CSS3的基础知识；第5～10章介绍CSS3的盒子模型和应用CSS3对各种网页元素进行样式设计的方法；第11～14章介绍了几种进行页面整体布局的方法，包括使用传统div布局、CSS3引入的网格布局和弹性盒子布局，特别是在第14章介绍了响应式布局的方法；第15章介绍了CSS3中引入的过渡与动画等知识；第16章介绍了前端开发工程化方面的知识；第17章用一个综合实例完整地讲述了一个中型网站的开发全过程。 全书遵循Web标准，强调“表现”与“内容”的分离，规范、全面、系统地介绍了网页设计与制作的方法和技巧。书中给出了大量详细的实例，并对实例进行了分析，便于读者在理解的基础上直接修改后使用。本书作者具备丰富的实践技术和教育培训经验，行文细腻，对每一个技术细节和每一个实际工作中可能遇到的难点与错误，都进行了详细的说明和提示，大大降低了读者的学习门槛。 本书可以作为高等院校相关专业的网页设计与制作、前端开发等课程的教材，也可供网页设计、制作和开发人员参考使用。读者可以在学习并掌握本书所讲内容之后做出精美的网页。

温谦： ## 全栈工程师，前沿科技创始人，现从事企业大型软件系统的分析与开发工作，拥有超20年的软件开发经验，主持并成功开发了多个复杂系统，项目实战经验丰富。 ## 常销书作者，毕业于华中科技大学计算机专业，主编网页设计与软件开发相关领域图书共12本，图书编写经验颇丰，其中《HTML+CSS网页设计与布局从入门到精通》《网页设计与布局项目化教程（HTML+CSS+DIV）》等图书常销10余年，被百余所高校选作教材。

第一篇 基础篇
第1章 Web前端开发基础知识
1.1 基础概念 2
1.2 网页与HTML 4
1.3 Web标准：结构、表现与行为 4
1.3.1 标准的重要性 4
1.3.2 “Web标准”概述 5
1.4 初步理解网页设计与开发的过程 6
1.4.1 基本任务与角色 7
1.4.2 明确网站定位 7
1.4.3 收集信息和素材 7
1.4.4 策划栏目内容 8
1.4.5 设计页面方案 8
1.4.6 制作页面 8
1.4.7 实现后台功能 8
1.4.8 整合与测试网站 9
1.4.9 页面设计相关技术的基础知识 9
本章小结 11
习题1 11
第2章 HTML5基础
2.1 HTML5基础知识 13
2.1.1 HTML文件结构 13
2.1.2 简单的HTML实例 14
2.1.3 网页源文件的获取 17
2.2 实例：利用VS Code快速建立基本文件 19
2.2.1 创建新的空白文件 19
2.2.2 编写基础的HTML文件 20
2.3 文本标记 20
2.3.1 实现段落与段内换行（p和br标记） 20
2.3.2 设置标题（h1～h6标记） 22
2.3.3 使文字水平居中（center标记） 23
2.3.4 设置文字段落的缩进（blockquote标记） 24
2.4 HTML标记与HTML属性 25
2.4.1 用align属性控制段落的水平位置 25
2.4.2 用bgcolor属性设置背景颜色 26
2.4.3 设置文字的特殊样式 27
2.4.4 设置文字的字体、大小和颜色（font标记） 28
2.4.5 网页中的特殊文字符号 29
2.5 在网页中使用图片（img标记） 30
2.5.1 网页中的图片格式 30
2.5.2 一个插入了图片的简单网页 31
2.5.3 使用路径 32
2.5.4 用alt属性为图片设置替换文本 34
2.6 再谈HTML5 35
2.6.1 追根溯源 35
2.6.2 HTML5的优势与特点 36
2.6.3 HTML5新增标记 37
2.7 实例：创建一个简单的网页 38
本章小结 39
习题2 39
第3章 CSS3基础
3.1 入门知识 41
3.1.1 CSS标准 41
3.1.2 传统HTML的缺点 42
3.1.3 CSS引入 43
3.1.4 如何编写CSS 44
3.2 理解CSS规则 45
3.3 基本CSS选择器 46
3.3.1 标记选择器 46
3.3.2 类别选择器 47
3.3.3 ID选择器 50
3.4 在HTML中使用CSS的方法 51
3.4.1 行内样式 51
3.4.2 内嵌式 52
3.4.3 链接式 52
3.4.4 导入样式 53
3.4.5 各种方式的优先级问题 55
本章小结 57
习题3 57
第4章 CSS3选择器
4.1 复合选择器 59
4.1.1 交集选择器 60
4.1.2 并集选择器 61
4.1.3 后代选择器 63
4.2 CSS的继承和层叠特性 65
4.2.1 继承关系 65
4.2.2 CSS继承的运用 67
4.2.3 CSS的层叠特性 68
4.3 关系选择器 70
4.3.1 后代选择器 71
4.3.2 子元素选择器 72
4.3.3 相邻兄弟选择器 72
4.3.4 相邻兄弟组选择器 73
4.4 属性选择器 73
4.4.1 属性存在选择器 74
4.4.2 属性等于选择器 74
4.4.3 属性包含选择器 75
4.5 结构伪类选择器 75
4.6 伪元素选择器 77
本章小结 78
习题4 78
第二篇 样式篇
第5章 用CSS设置文字样式
5.1 长度单位 81
5.1.1 相对类型 81
5.1.2 绝对类型 82
5.2 颜色定义 82
5.3 实例：通过文字样式美化页面 83
5.3.1 准备页面 83
5.3.2 设置文字的字体 84
5.3.3 设置文字的倾斜效果 85
5.3.4 设置文字的加粗效果 86
5.3.5 英文字母大小写转换 87
5.3.6 控制文字的大小 87
5.3.7 设置文字的装饰效果 89
5.4 实例：通过段落样式美化页面 89
5.4.1 设置段落首行缩进 89
5.4.2 设置字词间距 91
5.4.3 设置段落内部的文字行高 91
5.4.4 设置段落之间的距离 92
5.4.5 控制文字的水平位置 93
5.4.6 设置文字与背景的颜色 94
5.4.7 设置文字的特效 94
本章小结 95
习题5 96
第6章 用CSS设置图片效果
6.1 设置图片边框 97
6.1.1 基本属性 97
6.1.2 为不同的边框分别设置样式 99
6.2 图片缩放 100
6.3 图文混排 101
6.3.1 文字环绕 101
6.3.2 设置图片与文字的间距 102
6.4 实例：制作八大行星科普网页 103
6.5 设置图片与文字的对齐方式 106
6.5.1 横向对齐 106
6.5.2 纵向对齐 107
本章小结 108
习题6 108
第7章 盒子模型
7.1 “盒子”与“模型”的概念探究 111
7.2 设置边框（border） 112
7.2.1 设置边框样式（border-style） 113
7.2.2 属性值的简写形式 113
7.3 设置内边距（padding） 115
7.4 设置外边距（margin） 116
7.5 盒子之间的关系 117
7.5.1 HTML与DOM 118
7.5.2 标准流 120
7.5.3 div标记与span标记 122
7.6 盒子在标准流中的定位原则 124
7.6.1 行内元素之间的水平外边距 124
7.6.2 块级元素之间的竖直外边距 125
7.6.3 嵌套盒子之间的外边距 126
7.6.4 margin属性可以被设置为负数 127
7.7 实例：盒子模型计算思考题 128
7.8 盒子模型相关的常用样式属性 131
7.8.1 背景 131
7.8.2 圆角 136
7.8.3 阴影 138
7.8.4 渐变 139
本章小结 141
习题7 142
第8章 用CSS设置链接与导航菜单
8.1 超链接标记 144
8.2 丰富的超链接特效 146
8.3 创建按钮式超链接 148
8.4 实例：制作荧光灯效果的菜单 149
8.4.1 HTML框架 149
8.4.2 设置容器的CSS样式 150
8.4.3 设置菜单项的CSS样式 151
8.5 控制鼠标指针 152
8.6 设置项目列表样式 153
8.6.1 列表符号 153
8.6.2 图片符号 155
8.7 实例：创建简单的导航菜单 157
本章小结 160
习题8 160
第9章 用CSS设置表格样式
9.1 控制表格 161
9.1.1 表格中的标记 161
9.1.2 设置表格的边框 163
9.1.3 确定表格的宽度 166
9.1.4 合并单元格 166
9.1.5 其他与表格相关的标记 168
9.2 美化表格 169
9.2.1 搭建HTML结构 169
9.2.2 整体设置 170
9.2.3 设置单元格样式 171
9.2.4 实现斑马纹效果 172
9.2.5 设置列样式 172
9.3 实例：制作日历 173
9.3.1 搭建HTML结构 173
9.3.2 设置整体样式和表头样式 174
9.3.3 设置日历单元格样式 176
本章小结 179
习题9 179
第10章 用CSS设置表单
10.1 表单的用途和原理 180
10.2 表单输入类型 181
10.2.1 文本输入框 181
10.2.2 单选按钮 182
10.2.3 复选按钮 182
10.2.4 密码输入框 183
10.2.5 按钮 183
10.2.6 多行文本框 184
10.2.7 下拉列表框和列表框 185
10.3 CSS与表单 186
10.4 实例：制作“数独”游戏网页 188
10.4.1 搭建基本表格 188
10.4.2 设置表格样式 189
10.4.3 加入文本输入框 191
10.4.4 设置文本输入框的样式 191
本章小结 193
习题10 193
第三篇 布局篇
第11章 经典div+CSS网页布局方法
11.1 向报纸学习排版 195
11.2 CSS排版观念 197
11.2.1 两列布局 198
11.2.2 三列布局 198
11.2.3 多列布局 199
11.3 元素的浮动 200
11.3.1 浮动的方式 201
11.3.2 使用clear属性清除浮动的影响 203
11.3.3 扩展盒子的高度 204
11.4 元素的定位 205
11.4.1 静态定位（static） 206
11.4.2 相对定位（relative） 207
11.4.3 绝对定位（absolute） 209
11.4.4 固定定位（fixed） 211
11.5 z-index空间位置 211
11.6 制作经典两列布局 212
11.6.1 准备工作 212
11.6.2 绝对定位法 214
11.6.3 浮动定位法 216
本章小结 217
习题11 217
第12章 网格布局
12.1 基础概念 219
12.1.1 网格容器和网格项 220
12.1.2 网格线 220
12.1.3 行、列、单元格和网格区域 220
12.2 准备代码 220
12.3 划分网格 222
12.4 放置网格项 223
12.4.1 使用网格区域名称定位 224
12.4.2 使用网格线数字定位 225
12.4.3 使用网格线名称定位 225
12.4.4 自动定位 226
12.5 设置网格项的对齐方式 227
12.6 设置行间隔和列间隔 229
12.7 实例：用网格实现经典三列布局 231
12.8 实例：制作计算器 233
12.8.1 建立基础的HTML结构 233
12.8.2 添加基础样式 234
12.8.3 使用网格布局定位 236
12.8.4 调整细节 237
本章小结 238
习题12 238
第13章 弹性盒子布局
13.1 基础概念 240
13.2 弹性容器 241
13.3 弹性的核心基础 244
13.3.1 弹性三要素（flex-grow、flex-shrink和flex-basis属性） 244
13.3.2 设置换行 246
13.3.3 实例：用弹性盒子实现Bootstrap的栅格系统 247
13.4 设置对齐方式 250
13.5 实例：用弹性盒子创建嵌套的留言布局 254
13.5.1 搭建框架 255
13.5.2 用弹性盒子布局 255
13.5.3 头像放右侧 256
13.5.4 实现布局的嵌套 256
本章小结 257
习题13 258
第14章 响应式布局
14.1 响应式概述 259
14.2 弹性布局 260
14.3 媒体查询 262
14.3.1 实例：用网格布局实现手机端页面 263
14.3.2 断点 265
14.4 实例：实现Bootstrap响应式栅格系统 266
14.4.1 建立基础框架 266
14.4.2 适配小型设备 267
14.4.3 适配中型设备 268
14.4.4 适配大型设备 268
14.5 元视口标记 269
14.6 弹性媒体 271
14.7 实例：制作仿苹果官网的响应式页头 271
14.7.1 搭建框架 272
14.7.2 适配计算机端 274
14.7.3 适配平板电脑端 279
14.7.4 适配手机端 279
本章小结 285
习题14 286
第四篇 扩展篇
第15章 变换、过渡与动画
15.1 变换 289
15.1.1 旋转（rotate） 289
15.1.2 缩放（scale） 290
15.1.3 平移（translate） 291
15.1.4 倾斜（skew） 292
15.1.5 变换原点（transform-origin） 293
15.2 过渡 295
15.3 关键帧动画 296
本章小结 299
习题15 299
第16章 前端CSS的工程化
16.1 CSS预处理器Sass 300
16.1.1 嵌套写法 301
16.1.2 定义变量 301
16.1.3 模块系统 302
16.1.4 混入 303
16.1.5 继承 305
16.2 使用webpack构建系统 305
16.2.1 安装Node.js环境 306
16.2.2 准备项目文件 307
16.2.3 安装webpack及其相关组件 308
16.2.4 预览与调试 310
16.2.5 打包 311
本章小结 313
习题16 313
第17章 综合实例：Web前端开发工作流程
17.1 Web前端开发概述 314
17.2 实例概述 315
17.3 网站结构与页面内容分析 316
17.4 HTML结构设计 318
17.5 原型设计 320
17.6 页面方案设计 321
17.7 页面制作 322
17.8 遵从Web标准的设计流程 324
本章小结 324
习题17 324