项目十一 HTML5 新增标签的使用（课件）《电子商务网页设计与制作》（中国劳动保障出版社）

11 html5 新增标签的使用 667 667 任务 1 制作支付成功网页 任务 2 制作查看订单网页 668 项目十一 html5 新增标签的使用 668 制作支付成功网页 任务 1 669 669 ● 掌握 html5 新增 bdi 标签的用法。 670 项目十一 html5 新增标签的使用 670 本任务将通过使用 CSS 设置支付成功图文信息的样式，利用 html5 新增 bdi 标签共同完成支付成功网页，网页效果如图所示。 671 支付成功网页效果 项目十一 html5 新增标签的使用 671 672 步骤： 制作支付成功网页。使用 div 盒子进行嵌套布局，在制作收件人信息部分使用了 bdi 标签，用于隔离父元素样式对子元素样式的影响。具体 html 代码如图所示。 项目十一 html5 新增标签的使用 672 673 支付成功网页结构布局 项目十一 html5 新增标签的使用 673 674 接着设置 CSS 代码。这里需要注意，用 background 设置背景图像时，scroll 表示窗口内容滚动时图片也会跟着滚动，即图片与其他内容相对静止，一般此处默认值为 scroll。如果想让图片不随窗口的滚动而跟着变化，此处需设置为 fixed。图所示为用 CSS 设置支付成功网页样式的代码。 用 CSS 设置支付成功网页样式的代码 项目十一 html5 新增标签的使用 674 675 用 CSS 设置支付成功网页样式的代码 项目十一 html5 新增标签的使用 675 676 用 CSS 设置支付成功网页样式的代码 项目十一 html5 新增标签的使用 676 677 bdi 标签是 html5 中的新标签。bdi 标签指的是 bidi 隔离。bdi 标签允许设计者设置一段文本，使其脱离其父元素的文本方向设置。在发布用户评论或其他无法完全控制的内容时，建议使用该标签。 bdi 标签的常用属性及描述见表。 bdi 标签的属性及描述 项目十一 html5 新增标签的使用 677 制作查看订单网页 任务2 678 678 ● 掌握 html5 新增 header 标签、footer 标签的用法。 679 项目十一 html5 新增标签的使用 679 html5 吸取了 xhtml2 的一些优点，为了使文档的结构更加清晰、明确，html5 又新增了一些改善文档结构的元素，如 header、footer、article、aside、section 等，从而使网页开发人员能够更加语义化地创建文档。而在之前的 html4 中，开发者都将 div 标签作为网页的主要容器。本任务使用 header、footer 语义化标签和其他传统标签共同制作了查看订单网页，效果如图所示。 680 项目十一 html5 新增标签的使用 680 681 查看订单网页效果 项目十一 html5 新增标签的使用 681 682 步骤一： 先制作左侧主菜单部分，它主要通过一个 ul 无序列表嵌套四个子 ul 无序列表来实现布局。具体 html 代码如图所示。 左侧主菜单部分结构布局 项目十一 html5 新增标签的使用 682 683 左侧主菜单部分结构布局 项目十一 html5 新增标签的使用 683 684 左侧主菜单部分结构布局 项目十一 html5 新增标签的使用 684 685 接着设置 CSS 代码，这里应注意，当设置 color 颜色的值是用十六进制来表示时，如果每两位的值相同，则可缩写一半，例如，“ color：#FF6699”可简写为“ color：#F69”。用CSS 设置左侧主菜单部分样式的代码如图所示。 用 CSS 设置左侧主菜单部分样式的代码 项目十一 html5 新增标签的使用 685 686 用 CSS 设置左侧主菜单部分样式的代码 项目十一 html5 新增标签的使用 686 687 运行代码，效果如图所示。 制作完左侧主菜单的网页效果 项目十一 html5 新增标签的使用 687 688 步骤二： 制作买家订单流程进度图。流程进度图使用 div 标签制作，每一个节点的圆圈使用 em标签制作，圆圈中的图标使用 i 标签制作。具体 html 代码如图所示。 买家订单流程进度图结构布局 项目十一 html5 新增标签的使用 688 689 买家订单流程进度图结构布局 项目十一 html5 新增标签的使用 689 690 设置 CSS 代码，这里注意“ text-align:justify”的含义表示该元素包含的内容实行两端对齐，即其子元素均分水平方向的间隔。这里的“ letter-spacing”和“ word-spacing”分别表示字间距和词间距，都用来控制文字横向之间的间隔。用 CSS 设置买家订单流程进度图样式的代码如图所示。 用 CSS 设置买家订单流程进度图样式的代码 项目十一 html5 新增标签的使用 690 691 用 CSS 设置买家订单流程进度图样式的代码 项目十一 html5 新增标签的使用 691 692 用 CSS 设置买家订单流程进度图样式的代码 项目十一 html5 新增标签的使用 692 693 用 CSS 设置买家订单流程进度图样式的代码 项目十一 html5 新增标签的使用 693 694 用 CSS 设置买家订单流程进度图样式的代码 项目十一 html5 新增标签的使用 694 695 运行代码，效果如图所示。 制作完成买家订单流程进度的网页效果 项目十一 html5 新增标签的使用 695 696 步骤三： 制作物流信息更新展示部分，其主要布局与之前项目十任务 1 中的布局类似，具体 html代码如图所示。 物流信息更新展示部分结构布局 项目十一 html5 新增标签的使用 696 697 物流信息更新展示部分结构布局 项目十一 html5 新增标签的使用 697 698 用 CSS 设置物流信息更新展示部分样式的代码如图所示。 用 CSS 设置物流信息更新展示部分样式的代码 项目十一 html5 新增标签的使用 698 699 用 CSS 设置物流信息更新展示部分样式的代码 项目十一 html5 新增标签的使用 699 700 用 CSS 设置物流信息更新展示部分样式的代码 项目十一 html5 新增标签的使用 700 701 用 CSS 设置物流信息更新展示部分样式的代码 项目十一 html5 新增标签的使用 701 702 运行代码，效果如图所示。 制作完物流信息更新展示部分的网页效果 项目十一 html5 新增标签的使用 702 703 步骤四： 制作订单信息显示部分。与之前项目十任务 2 中的订单布局类似，具体 html 代码如图所示。 订单信息显示部分结构布局 项目十一 html5 新增标签的使用 703 704 订单信息显示部分结构布局 项目十一 html5 新增标签的使用 704 705 订单信息显示部分结构布局 项目十一 html5 新增标签的使用 705 706 订单信息显示部分结构布局 项目十一 html5 新增标签的使用 706 707 订单信息显示部分结构布局 项目十一 html5 新增标签的使用 707 708 订单信息显示部分结构布局 项目十一 html5 新增标签的使用 708 709 订单信息显示部分结构布局 项目十一 html5 新增标签的使用 709 710 订单信息显示部分结构布局 项目十一 html5 新增标签的使用 710 711 用 CSS 设置订单信息显示部分的代码，如图所示。 用 CSS 设置订单信息显示部分的代码 项目十一 html5 新增标签的使用 711 712 用 CSS 设置订单信息显示部分的代码 项目十一 html5 新增标签的使用 712 713 用 CSS 设置订单信息显示部分的代码 项目十一 html5 新增标签的使用 713 714 用 CSS 设置订单信息显示部分的代码 项目十一 html5 新增标签的使用 714 715 用 CSS 设置订单信息显示部分的代码 项目十一 html5 新增标签的使用 715 716 用 CSS 设置订单信息显示部分的代码 项目十一 html5 新增标签的使用 716 717 一、header 标签 header 标签用于定义文档或者文档一部分区域的页眉，可以作为介绍内容或者导航列表的容器。在一个文档中可以定义多个 header 标签。header 标签具体使用代码如图所示。 项目十一 html5 新增标签的使用 717 718 head 标签 项目十一 html5 新增标签的使用 718 719 二、footer 标签 footer 标签用于定义整个网页或网页中一个内容区块的页脚，可以作为一个区块的尾部内容，通常包括一些附加信息。footer 标签具体使用代码如图所示。 footer 标签 项目十一 html5 新增标签的使用 719 $$