HTML+CSS网页设计实践教程

本书详细介绍了如何使用HTML 5和CSS 3技术制作漂亮美观的网页。全书共分为14章，包括HTML 5的基础知识，新增的结构元素、块级语义元素、行内语义元素、交互元素；新增的表单元素、表单类型、表单属性和表单验证，以及文件操作、用Web Storage和Web SQL数据库进行数据存储、Canvas API实现图形和图像绘制、多媒体元素的播放、离线缓存、Web Sockets通信、跨文档消息传输、线程、Geolocation API等内容，还介绍了CSS 3的概念和新增特性、颜色和文本样式、@font-face规则、新增的选择器、弹性盒模型、多列类布局，用户界面布局、以及边框、背景、渐变等知识。最后，通过一个综合的网页案例对前面的内容进行总结。 本书适合HTML 5和CSS 3技术的初学者阅读参考，也可以作为非计算机专业学生学习的参考资料等。

本书详细介绍了如何使用HTML 5和CSS 3技术制作漂亮美观的网页。全书共分为14章，包括HTML 5的基础知识，新增的结构元素、块级语义元素、行内语义元素、交互元素；新增的表单元素、表单类型、表单属性和表单验证，以及文件操作、用Web Storage和Web SQL数据库进行数据存储、Canvas API实现图形和图像绘制、多媒体元素的播放、离线缓存、Web Sockets通信、跨文档消息传输、线程、Geolocation API等内容，还介绍了CSS 3的概念和新增特性、颜色和文本样式、@font-face规则、新增的选择器、弹性盒模型、多列类布局，用户界面布局、以及边框、背景、渐变等知识。最后，通过一个综合的网页案例对前面的内容进行总结。 本书适合HTML 5和CSS 3技术的初学者阅读参考，也可以作为非计算机专业学生学习的参考资料等。

第1章 HTML 5概述 1 1.1 了解HTML 5 1 1.1.1 HTML 5简介 1 1.1.2 HTML 5的组织 2 1.1.3 HTML 5的特性 2 1.1.4 HTML 5的优点 4 1.1.5 HTML 5的发展趋势 4 1.2 HTML 5与其他技术的区别 4 1.2.1 与XHTML的区别 5 1.2.2 与Silverlight和Flash 的区别 6 1.3 HTML 5与HTML 4的区别 7 1.3.1 语法的改变 7 1.3.2 新增元素和废除元素 10 1.3.3 新增属性和废除属性 14 1.3.4 全局属性 17 1.4 HTML 5的浏览器支持情况 19 1.4.1 支持HTML 5的浏览器 说明 20 1.4.2 在线测试当前浏览器的 支持情况 21 1.5 实验指导1-1：简单安装傲游 浏览器 24 1.6 常用的浏览器内核 25 思考与练习 26 第2章 HTML 5中的新增元素 28 2.1 新增的结构元素 28 2.1.1 header元素 28 2.1.2 article元素 29 2.1.3 section元素 30 2.1.4 nav元素 33 2.1.5 footer元素 35 2.1.6 address元素 36 2.1.7 hgroup元素 37 2.2 新增的块级语义元素 38 2.2.1 aside元素 38 2.2.2 figure元素 40 2.2.3 dialog元素 41 2.3 新增的行内语义元素 42 2.3.1 mark元素 42 2.3.2 cite元素 43 2.3.3 time元素 44 2.3.4 meter元素 45 2.3.5 progress元素 47 2.4 新增的交互元素 48 2.4.1 details元素 48 2.4.2 menu元素 50 2.4.3 command元素 52 2.4.4 datagrid元素 53 2.5 改良HTML 4元素的功能 54 2.5.1 ul元素 54 2.5.2 ol元素 55 2.5.3 嵌套列表 57 2.6 实验指导2-1：使用新增元素构建 网页 58 思考与练习 64 第3章 HTML 5中的表单应用 66 3.1 认识和创建HTML表单 66 3.1.1 认识HTML表单 66 3.1.2 input元素的基本类型 67 3.1.3 其他输入元素 70 3.2 新增的表单元素 70 3.2.1 datalist元素 71 3.2.2 output元素 72 3.2.3 keygen元素 73 3.2.4 optgroup元素 74 3.3 新增的表单类型 76 3.3.1 email类型 76 3.3.2 url类型 78 3.3.3 number类型 78 3.3.4 range类型 79 3.3.5 tel类型 80 3.3.6 color类型 81 3.3.7 search类型 82 3.3.8 日期和时间类型 82 3.4 新增的表单属性 86 3.4.1 form属性 86 3.4.2 表单重写属性 88 3.4.3 placeholder属性 89 3.4.4 required属性 90 3.4.5 pattern属性 91 3.4.6 autocomplete属性 92 3.4.7 autofocus属性 93 3.5 表单验证 93 3.5.1 自动验证 93 3.5.2 显式验证 94 3.5.3 自定义验证 96 3.5.4 验证事件 97 3.5.5 取消验证 98 3.6 实验指导3-1：会员资料注册 99 思考与练习 102 第4章 HTML 5中的文件应用 103 4.1 选择文件 103 4.1.1 选择单个文件 103 4.1.2 选择多个文件 105 4.1.3 限制选择文件类型 107 4.2 实验指导4-1：将文件上传到 服务器端 109 4.3 读取文件 111 4.3.1 认识FileReader接口 112 4.3.2 读取二进制文件 115 4.3.3 显示预览图像 116 4.3.4 读取文本文件 118 4.4 错误处理方案 120 4.4.1 产生错误的原因 120 4.4.2 FileError接口 121 4.4.3 错误处理练习 121 4.5 文件拖放API和常用对象 123 4.5.1 拖放API 123 4.5.2 认识DataTransfer对象 125 4.5.3 DataTransfer对象的方法 126 4.5.4 DataTransfer对象的属性 127 4.6 实验指导4-2：拖动文字到网页的 指定区域 129 4.7 实验指导4-3：拖放实现带进度条 的文件上传 130 思考与练习 138 第5章 HTML 5中的多媒体元素 140 5.1 HTML 5多媒体概述 140 5.1.1 HTML 4中的多媒体应用 140 5.1.2 HTML 5中的多媒体 141 5.2 多媒体元素的属性 144 5.2.1 audio和video的共同属性 144 5.2.2 audio元素显示音频文件 146 5.2.3 video元素显示视频文件 149 5.3 向多媒体元素中添加source元素 152 5.3.1 认识source元素 152 5.3.2 source元素常用的支持 格式 152 5.3.3 多媒体元素添加source 元素 153 5.3.4 视频文件添加source元素 154 5.4 多媒体元素的方法 155 5.5 多媒体元素的事件 157 5.5.1 audio和video的共同事件 157 5.5.2 video元素添加事件 159 5.6 认识embed元素 162 5.7 实验指导5-1：制作绚丽的音乐 播放器 164 思考与练习 172 第6章 数据存储 174 6.1 认识Web Storage 174 6.1.1 Web Storage介绍 174 6.1.2 Web Storage的优缺点 175 6.2 localStorage对象 175 6.2.1 判断浏览器是否支持 176 6.2.2 localStorage的常用方法 176 6.2.3 统计访问人数 177 6.2.4 及时更新访问人数 179 6.3 sessionStorage对象 182 6.3.1 与localStorage对象的 不同 182 6.3.2 判断浏览器是否支持 183 6.3.3 方法和事件 183 6.4 JSON对象操作数据 185 6.5 认识Web SQL 191 6.5.1 Web SQL介绍 191 6.5.2 Web SQL API操作 191 6.5.3 数据的简单操作 193 6.6 实验指导6-1：基于Web SQL 的留言簿 196 思考与练习 202 第7章 Canvas API动态绘图 204 7.1 认识canvas元素 204 7.1.1 canvas基础知识 204 7.1.2 canvas API的基本使用 206 7.1.3 与SVG的简单区别 208 7.2 通过路径绘图 209 7.2.1 基本方法 209 7.2.2 绘制直线 210 7.2.3 绘制圆形 212 7.2.4 绘制三角形 215 7.3 实验指导7-1：绘制复杂图形 215 7.4 贝塞尔曲线 217 7.4.1 二次方曲线 217 7.4.2 三次方曲线 219 7.5 绘制渐变图形 221 7.5.1 了解渐变 221 7.5.2 线性渐变 221 7.5.3 径向渐变 224 7.6 高级绘图操作 225 7.6.1 绘图状态 225 7.6.2 坐标变换 226 7.6.3 矩阵变换 233 7.6.4 合成图形 235 7.7 实验指导7-2：实现时钟的动画 效果 237 7.8 图像操作 240 7.8.1 创建图像 240 7.8.2 绘制图像 241 7.8.3 缩放图像 242 7.8.4 裁剪图像 244 7.8.5 输出图像 245 7.9 文字和阴影效果 246 7.9.1 绘制文字 247 7.9.2 阴影特效 247 思考与练习 248 第8章 离线缓存 250 8.1 离线应用程序概述 250 8.1.1 认识离线应用程序 250 8.1.2 离线缓存与浏览器缓存 251 8.1.3 创建离线缓存应用 252 8.2 Cache Manifest文件 255 8.2.1 认识Cache Manifest文件 255 8.2.2 Cache Manifest的组成 255 8.2.3 向manifest文件添加注释 257 8.2.4 Cache Mainifest的遵循 原则 258 8.2.5 配置IIS服务器 258 8.3 离线访问系统当前时间 260 8.4 浏览器与服务器的交互过程 263 8.4.1 首次载入页面 263 8.4.2 再次载入页面 263 8.5 离线存储对象：applicationCache 264 8.5.1 认识applicationCache 264 8.5.2 检测本地缓存状态 265 8.5.3 检测在线状态 266 8.5.4 本地缓存更新 269 8.5.5 事件执行顺序 270 8.6 实验指导8-1：制作离线使用的 日程备忘录 273 思考与练习 277 第9章 通信API和地理位置获取 279 9.1 跨文档消息传输 279 9.1.1 Message API概述 279 9.1.2 跨域获取传递消息 280 9.2 Web Sockets通信 283 9.2.1 Web Sockets API概述 284 9.2.2 使用Web Sockets API 284 9.2.3 向.NET端发送数据 286 9.3 Web Workers线程 290 9.3.1 线程概述 290 9.3.2 Worker对象 291 9.3.3 计算数字结果 293 9.3.4 线程嵌套处理 297 9.4 Geolocatin API概述 299 9.4.1 getCurrentPosition()方法 300 9.4.2 watchCurrentPosition()方法 301 9.4.3 clearWatch()方法 302 9.5 Position对象显示当前位置 302 9.6 实验指导9-1：Google地图锁定 当前位置 305 思考与练习 308 第10章 CSS 3和新增颜色及 文本样式 310 10.1 了解CSS 3 310 10.1.1 什么是CSS 3 310 10.1.2 CSS 3的支持情况 311 10.1.3 CSS 3的新增特性 312 10.2 新增颜色 316 10.2.1 RGBA 316 10.2.2 HSL 318 10.2.3 HSLA 320 10.2.4 opaticy 321 10.3 文本样式 322 10.3.1 text-overflow属性 322 10.3.2 text-shadow属性 326 10.3.3 word-wrap属性 329 10.4 字体样式规则：@font-face 331 10.4.1 语法规则 331 10.4.2 基本练习 332 10.4.3 字体与字体样式 334 10.4.4 注意事项 336 10.5 实验指导10-1：定义文章的标题 和内容样式 336 思考与练习 339 第11章 CSS 3中的新增选择器 340 11.1 属性选择器 340 11.1.1 E[att^="val"]选择器 340 11.1.2 E[att$="val"]选择器 342 11.1.3 E[att*="val"]选择器 343 11.2 结构化伪类选择器 345 11.2.1 E:root选择器 345 11.2.2 E:nth-child(n)选择器 347 11.2.3 E:nth-last-child(n)选择器 348 11.2.4 E:nth-of-type(n)和E:nth- last-of-type(n)选择器 351 11.2.5 E:last-child选择器 354 11.2.6 E:first-of-type和E:last-of- type选择器 355 11.2.7 E:only-child选择器 357 11.2.8 E:only-of-type选择器 357 11.2.9 E:empty选择器 358 11.3 UI元素状态伪类选择器 360 11.3.1 E:enabled选择器 360 11.3.2 E:disabled选择器 362 11.3.3 E:checked选择器 363 11.3.4 E::selection选择器 364 11.4 其他新增选择器 366 11.4.1 否定伪类选择器： E:not(s) 366 11.4.2 目标伪类选择器： E:target 367 11.4.3 通用兄弟元素选择器： E~F 368 11.5 新增内容属性：content 370 11.5.1 基本语法 370 11.5.2 插入图像 371 11.5.3 插入项目编码 372 11.5.4 插入嵌套符号 374 11.5.5 编号嵌套 375 11.6 实验指导11-1：结构化的数据 表格设计 376 思考与练习 379 第12章 弹性盒模型与样式布局 381 12.1 新增的盒模型属性 381 12.1.1 box-orient属性 381 12.1.2 box-direction属性 384 12.1.3 box-ordinal-group属性 385 12.1.4 box-flex属性 387 12.1.5 box-flex-group属性 389 12.1.6 box-pack属性 390 12.1.7 box-align属性 392 12.1.8 box-lines属性 393 12.2 多列类布局属性 394 12.2.1 columns属性 394 12.2.2 column-width属性 396 12.2.3 column-count属性 397 12.2.4 column-gap属性 397 12.2.5 column-rule属性 399 12.2.6 column-span属性 400 12.2.7 column-fill属性 401 12.2.8 分列打印属性 401 12.3 用户界面布局 402 12.3.1 box-sizing属性 402 12.3.2 resize属性 404 12.3.3 zoom属性 406 12.3.4 outline-offset属性 407 12.3.5 nav-index属性 408 12.3.6 定义方向键控制顺序 410 12.4 实验指导12-1：简单设计 博客网页 411 思考与练习 413 第13章 边框、背景和渐变 415 13.1 边框设计 415 13.1.1 border-radius属性 415 13.1.2 border-image属性 417 13.1.3 box-shadow属性 421 13.1.4 border-colors属性 423 13.2 背景样式 424 13.2.1 变更属性 424 13.2.2 background-origin属性 427 13.2.3 background-clip属性 428 13.2.4 background-size属性 430 13.3 渐变特效 431 13.3.1 WebKit引擎实现渐变 431 13.3.2 Gecko引擎实现渐变 433 13.3.3 重复渐变 435 13.4 实验指导13-1：制作下拉 导航菜单 436 思考与练习 439 第14章 HTML 5+CSS 3制作 旅游网页 440 14.1 旅游网站分析 440 14.1.1 产生背景 440 14.1.2 发展趋势 441 14.1.3 基本结构 441 14.2 设计首页 442 14.2.1 网页效果 442 14.2.2 添加头部 443 14.2.3 添加底部 446 14.2.4 添加内容 446 14.3 设计关于我们网页 448 14.3.1 网页效果 448 14.3.2 关于我们 448 14.3.3 最新公告 449 14.4 设计国内旅游网页 450 14.4.1 网页效果 450 14.4.2 国内旅游 451 14.4.3 其他内容 451 14.5 设计出境旅游网页 452 14.6 设计留言咨询网页 453 14.6.1 网页效果 453 14.6.2 清空留言 453 14.6.3 提交留言 454 14.6.4 查看位置 455 附录 思考与练习答案 459                               第1章 HTML 5概述 1 1.1 了解HTML 5 1 1.1.1 HTML 5简介 1 1.1.2 HTML 5的组织 2 1.1.3 HTML 5的特性 2 1.1.4 HTML 5的优点 4 1.1.5 HTML 5的发展趋势 4 1.2 HTML 5与其他技术的区别 4 1.2.1 与XHTML的区别 5 1.2.2 与Silverlight和Flash 的区别 6 1.3 HTML 5与HTML 4的区别 7 1.3.1 语法的改变 7 1.3.2 新增元素和废除元素 10 1.3.3 新增属性和废除属性 14 1.3.4 全局属性 17 1.4 HTML 5的浏览器支持情况 19 1.4.1 支持HTML 5的浏览器 说明 20 1.4.2 在线测试当前浏览器的 支持情况 21 1.5 实验指导1-1：简单安装傲游 浏览器 24 1.6 常用的浏览器内核 25 思考与练习 26 第2章 HTML 5中的新增元素 28 2.1 新增的结构元素 28 2.1.1 header元素 28 2.1.2 article元素 29 2.1.3 section元素 30 2.1.4 nav元素 33 2.1.5 footer元素 35 2.1.6 address元素 36 2.1.7 hgroup元素 37 2.2 新增的块级语义元素 38 2.2.1 aside元素 38 2.2.2 figure元素 40 2.2.3 dialog元素 41 2.3 新增的行内语义元素 42 2.3.1 mark元素 42 2.3.2 cite元素 43 2.3.3 time元素 44 2.3.4 meter元素 45 2.3.5 progress元素 47 2.4 新增的交互元素 48 2.4.1 details元素 48 2.4.2 menu元素 50 2.4.3 command元素 52 2.4.4 datagrid元素 53 2.5 改良HTML 4元素的功能 54 2.5.1 ul元素 54 2.5.2 ol元素 55 2.5.3 嵌套列表 57 2.6 实验指导2-1：使用新增元素构建 网页 58 思考与练习 64 第3章 HTML 5中的表单应用 66 3.1 认识和创建HTML表单 66 3.1.1 认识HTML表单 66 3.1.2 input元素的基本类型 67 3.1.3 其他输入元素 70 3.2 新增的表单元素 70 3.2.1 datalist元素 71 3.2.2 output元素 72 3.2.3 keygen元素 73 3.2.4 optgroup元素 74 3.3 新增的表单类型 76 3.3.1 email类型 76 3.3.2 url类型 78 3.3.3 number类型 78 3.3.4 range类型 79 3.3.5 tel类型 80 3.3.6 color类型 81 3.3.7 search类型 82 3.3.8 日期和时间类型 82 3.4 新增的表单属性 86 3.4.1 form属性 86 3.4.2 表单重写属性 88 3.4.3 placeholder属性 89 3.4.4 required属性 90 3.4.5 pattern属性 91 3.4.6 autocomplete属性 92 3.4.7 autofocus属性 93 3.5 表单验证 93 3.5.1 自动验证 93 3.5.2 显式验证 94 3.5.3 自定义验证 96 3.5.4 验证事件 97 3.5.5 取消验证 98 3.6 实验指导3-1：会员资料注册 99 思考与练习 102 第4章 HTML 5中的文件应用 103 4.1 选择文件 103 4.1.1 选择单个文件 103 4.1.2 选择多个文件 105 4.1.3 限制选择文件类型 107 4.2 实验指导4-1：将文件上传到 服务器端 109 4.3 读取文件 111 4.3.1 认识FileReader接口 112 4.3.2 读取二进制文件 115 4.3.3 显示预览图像 116 4.3.4 读取文本文件 118 4.4 错误处理方案 120 4.4.1 产生错误的原因 120 4.4.2 FileError接口 121 4.4.3 错误处理练习 121 4.5 文件拖放API和常用对象 123 4.5.1 拖放API 123 4.5.2 认识DataTransfer对象 125 4.5.3 DataTransfer对象的方法 126 4.5.4 DataTransfer对象的属性 127 4.6 实验指导4-2：拖动文字到网页的 指定区域 129 4.7 实验指导4-3：拖放实现带进度条 的文件上传 130 思考与练习 138 第5章 HTML 5中的多媒体元素 140 5.1 HTML 5多媒体概述 140 5.1.1 HTML 4中的多媒体应用 140 5.1.2 HTML 5中的多媒体 141 5.2 多媒体元素的属性 144 5.2.1 audio和video的共同属性 144 5.2.2 audio元素显示音频文件 146 5.2.3 video元素显示视频文件 149 5.3 向多媒体元素中添加source元素 152 5.3.1 认识source元素 152 5.3.2 source元素常用的支持 格式 152 5.3.3 多媒体元素添加source 元素 153 5.3.4 视频文件添加source元素 154 5.4 多媒体元素的方法 155 5.5 多媒体元素的事件 157 5.5.1 audio和video的共同事件 157 5.5.2 video元素添加事件 159 5.6 认识embed元素 162 5.7 实验指导5-1：制作绚丽的音乐 播放器 164 思考与练习 172 第6章 数据存储 174 6.1 认识Web Storage 174 6.1.1 Web Storage介绍 174 6.1.2 Web Storage的优缺点 175 6.2 localStorage对象 175 6.2.1 判断浏览器是否支持 176 6.2.2 localStorage的常用方法 176 6.2.3 统计访问人数 177 6.2.4 及时更新访问人数 179 6.3 sessionStorage对象 182 6.3.1 与localStorage对象的 不同 182 6.3.2 判断浏览器是否支持 183 6.3.3 方法和事件 183 6.4 JSON对象操作数据 185 6.5 认识Web SQL 191 6.5.1 Web SQL介绍 191 6.5.2 Web SQL API操作 191 6.5.3 数据的简单操作 193 6.6 实验指导6-1：基于Web SQL 的留言簿 196 思考与练习 202 第7章 Canvas API动态绘图 204 7.1 认识canvas元素 204 7.1.1 canvas基础知识 204 7.1.2 canvas API的基本使用 206 7.1.3 与SVG的简单区别 208 7.2 通过路径绘图 209 7.2.1 基本方法 209 7.2.2 绘制直线 210 7.2.3 绘制圆形 212 7.2.4 绘制三角形 215 7.3 实验指导7-1：绘制复杂图形 215 7.4 贝塞尔曲线 217 7.4.1 二次方曲线 217 7.4.2 三次方曲线 219 7.5 绘制渐变图形 221 7.5.1 了解渐变 221 7.5.2 线性渐变 221 7.5.3 径向渐变 224 7.6 高级绘图操作 225 7.6.1 绘图状态 225 7.6.2 坐标变换 226 7.6.3 矩阵变换 233 7.6.4 合成图形 235 7.7 实验指导7-2：实现时钟的动画 效果 237 7.8 图像操作 240 7.8.1 创建图像 240 7.8.2 绘制图像 241 7.8.3 缩放图像 242 7.8.4 裁剪图像 244 7.8.5 输出图像 245 7.9 文字和阴影效果 246 7.9.1 绘制文字 247 7.9.2 阴影特效 247 思考与练习 248 第8章 离线缓存 250 8.1 离线应用程序概述 250 8.1.1 认识离线应用程序 250 8.1.2 离线缓存与浏览器缓存 251 8.1.3 创建离线缓存应用 252 8.2 Cache Manifest文件 255 8.2.1 认识Cache Manifest文件 255 8.2.2 Cache Manifest的组成 255 8.2.3 向manifest文件添加注释 257 8.2.4 Cache Mainifest的遵循 原则 258 8.2.5 配置IIS服务器 258 8.3 离线访问系统当前时间 260 8.4 浏览器与服务器的交互过程 263 8.4.1 首次载入页面 263 8.4.2 再次载入页面 263 8.5 离线存储对象：applicationCache 264 8.5.1 认识applicationCache 264 8.5.2 检测本地缓存状态 265 8.5.3 检测在线状态 266 8.5.4 本地缓存更新 269 8.5.5 事件执行顺序 270 8.6 实验指导8-1：制作离线使用的 日程备忘录 273 思考与练习 277 第9章 通信API和地理位置获取 279 9.1 跨文档消息传输 279 9.1.1 Message API概述 279 9.1.2 跨域获取传递消息 280 9.2 Web Sockets通信 283 9.2.1 Web Sockets API概述 284 9.2.2 使用Web Sockets API 284 9.2.3 向.NET端发送数据 286 9.3 Web Workers线程 290 9.3.1 线程概述 290 9.3.2 Worker对象 291 9.3.3 计算数字结果 293 9.3.4 线程嵌套处理 297 9.4 Geolocatin API概述 299 9.4.1 getCurrentPosition()方法 300 9.4.2 watchCurrentPosition()方法 301 9.4.3 clearWatch()方法 302 9.5 Position对象显示当前位置 302 9.6 实验指导9-1：Google地图锁定 当前位置 305 思考与练习 308 第10章 CSS 3和新增颜色及 文本样式 310 10.1 了解CSS 3 310 10.1.1 什么是CSS 3 310 10.1.2 CSS 3的支持情况 311 10.1.3 CSS 3的新增特性 312 10.2 新增颜色 316 10.2.1 RGBA 316 10.2.2 HSL 318 10.2.3 HSLA 320 10.2.4 opaticy 321 10.3 文本样式 322 10.3.1 text-overflow属性 322 10.3.2 text-shadow属性 326 10.3.3 word-wrap属性 329 10.4 字体样式规则：@font-face 331 10.4.1 语法规则 331 10.4.2 基本练习 332 10.4.3 字体与字体样式 334 10.4.4 注意事项 336 10.5 实验指导10-1：定义文章的标题 和内容样式 336 思考与练习 339 第11章 CSS 3中的新增选择器 340 11.1 属性选择器 340 11.1.1 E[att^="val"]选择器 340 11.1.2 E[att$="val"]选择器 342 11.1.3 E[att*="val"]选择器 343 11.2 结构化伪类选择器 345 11.2.1 E:root选择器 345 11.2.2 E:nth-child(n)选择器 347 11.2.3 E:nth-last-child(n)选择器 348 11.2.4 E:nth-of-type(n)和E:nth- last-of-type(n)选择器 351 11.2.5 E:last-child选择器 354 11.2.6 E:first-of-type和E:last-of- type选择器 355 11.2.7 E:only-child选择器 357 11.2.8 E:only-of-type选择器 357 11.2.9 E:empty选择器 358 11.3 UI元素状态伪类选择器 360 11.3.1 E:enabled选择器 360 11.3.2 E:disabled选择器 362 11.3.3 E:checked选择器 363 11.3.4 E::selection选择器 364 11.4 其他新增选择器 366 11.4.1 否定伪类选择器： E:not(s) 366 11.4.2 目标伪类选择器： E:target 367 11.4.3 通用兄弟元素选择器： E~F 368 11.5 新增内容属性：content 370 11.5.1 基本语法 370 11.5.2 插入图像 371 11.5.3 插入项目编码 372 11.5.4 插入嵌套符号 374 11.5.5 编号嵌套 375 11.6 实验指导11-1：结构化的数据 表格设计 376 思考与练习 379 第12章 弹性盒模型与样式布局 381 12.1 新增的盒模型属性 381 12.1.1 box-orient属性 381 12.1.2 box-direction属性 384 12.1.3 box-ordinal-group属性 385 12.1.4 box-flex属性 387 12.1.5 box-flex-group属性 389 12.1.6 box-pack属性 390 12.1.7 box-align属性 392 12.1.8 box-lines属性 393 12.2 多列类布局属性 394 12.2.1 columns属性 394 12.2.2 column-width属性 396 12.2.3 column-count属性 397 12.2.4 column-gap属性 397 12.2.5 column-rule属性 399 12.2.6 column-span属性 400 12.2.7 column-fill属性 401 12.2.8 分列打印属性 401 12.3 用户界面布局 402 12.3.1 box-sizing属性 402 12.3.2 resize属性 404 12.3.3 zoom属性 406 12.3.4 outline-offset属性 407 12.3.5 nav-index属性 408 12.3.6 定义方向键控制顺序 410 12.4 实验指导12-1：简单设计 博客网页 411 思考与练习 413 第13章 边框、背景和渐变 415 13.1 边框设计 415 13.1.1 border-radius属性 415 13.1.2 border-image属性 417 13.1.3 box-shadow属性 421 13.1.4 border-colors属性 423 13.2 背景样式 424 13.2.1 变更属性 424 13.2.2 background-origin属性 427 13.2.3 background-clip属性 428 13.2.4 background-size属性 430 13.3 渐变特效 431 13.3.1 WebKit引擎实现渐变 431 13.3.2 Gecko引擎实现渐变 433 13.3.3 重复渐变 435 13.4 实验指导13-1：制作下拉 导航菜单 436 思考与练习 439 第14章 HTML 5+CSS 3制作 旅游网页 440 14.1 旅游网站分析 440 14.1.1 产生背景 440 14.1.2 发展趋势 441 14.1.3 基本结构 441 14.2 设计首页 442 14.2.1 网页效果 442 14.2.2 添加头部 443 14.2.3 添加底部 446 14.2.4 添加内容 446 14.3 设计关于我们网页 448 14.3.1 网页效果 448 14.3.2 关于我们 448 14.3.3 最新公告 449 14.4 设计国内旅游网页 450 14.4.1 网页效果 450 14.4.2 国内旅游 451 14.4.3 其他内容 451 14.5 设计出境旅游网页 452 14.6 设计留言咨询网页 453 14.6.1 网页效果 453 14.6.2 清空留言 453 14.6.3 提交留言 454 14.6.4 查看位置 455 附录 思考与练习答案 459