资源简介

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

展开更多......

收起↑