项目十一 html5 新增标签的使用

11html5新增标签的使用667任务1制作支付成功网页任务2制作查看订单网页668制作支付成功网页任务1669●掌握html5新增bdi标签的用法。670本任务将通过使用CSS设置支付成功图文信息的样式，利用html5新增bdi标签共同完成支付成功网页，网页效果如图所示。671支付成功网页效果672步骤：制作支付成功网页。使用div盒子进行嵌套布局，在制作收件人信息部分使用了bdi标签，用于隔离父元素样式对子元素样式的影响。具体html代码如图所示。673支付成功网页结构布局674接着设置CSS代码。这里需要注意，用background设置背景图像时，scroll表示窗口内容滚动时图片也会跟着滚动，即图片与其他内容相对静止，一般此处默认值为scroll。如果想让图片不随窗口的滚动而跟着变化，此处需设置为fixed。图所示为用CSS设置支付成功网页样式的代码。用CSS设置支付成功网页样式的代码675用CSS设置支付成功网页样式的代码676用CSS设置支付成功网页样式的代码677bdi标签是html5中的新标签。bdi标签指的是bidi隔离。bdi标签允许设计者设置一段文本，使其脱离其父元素的文本方向设置。在发布用户评论或其他无法完全控制的内容时，建议使用该标签。bdi标签的常用属性及描述见表。bdi标签的属性及描述制作查看订单网页任务2

678●掌握html5新增header标签、footer标签的用法。679html5吸取了xhtml2的一些优点，为了使文档的结构更加清晰、明确，html5又新增了一些改善文档结构的元素，如header、footer、article、aside、section等，从而使网页开发人员能够更加语义化地创建文档。而在之前的html4中，开发者都将div标签作为网页的主要容器。本任务使用header、footer语义化标签和其他传统标签共同制作了查看订单网页，效果如图所示。680681查看订单网页效果682步骤一：先制作左侧主菜单部分，它主要通过一个ul无序列表嵌套四个子ul无序列表来实现布局。具体html代码如图所示。左侧主菜单部分结构布局683左侧主菜单部分结构布局684左侧主菜单部分结构布局685接着设置CSS代码，这里应注意，当设置color颜色的值是用十六进制来表示时，如果每两位的值相同，则可缩写一半，例如，“color：#FF6699”可简写为“color：#F69”。用CSS设置左侧主菜单部分样式的代码如图所示。用CSS设置左侧主菜单部分样式的代码686用CSS设置左侧主菜单部分样式的代码687运行代码，效果如图所示。制作完左侧主菜单的网页效果688步骤二：制作买家订单流程进度图。流程进度图使用div标签制作，每一个节点的圆圈使用em标签制作，圆圈中的图标使用i标签制作。具体html代码如图所示。买家订单流程进度图结构布局689买家订单流程进度图结构布局690设置CSS代码，这里注意“text-align:justify”的含义表示该元素包含的内容实行两端对齐，即其子元素均分水平方向的间隔。这里的“letter-spacing”和“word-spacing”分别表示字间距和词间距，都用来控制文字横向之间的间隔。用CSS设置买家订单流程进度图样式的代码如图所示。用CSS设置买家订单流程进度图样式的代码691用CSS设置买家订单流程进度图样式的代码692用CSS设置买家订单流程进度图样式的代码693用CSS设置买家订单流程进度图样式的代码694用CSS设置买家订单流程进度图样式的代码695运行代码，效果如图所示。制作完成买家订单流程进度的网页效果696步骤三：制作物流信息更新展示部分，其主要布局与之前项目十任务1中的布局类似，具体html代码如图所示。物流信息更新展示部分结构布局697物流信息更新展示部分结构布局698用CSS设置物流信息更新展示部分样式的代码如图所示。用CSS设置物流信息更新展示部分样式的代码699用CSS设置物流信息更新展示部分样式的代码700用CSS设置物流信息更新展示部分样式的代码701用CSS设置物流信息更新展示部分样式的代码702运行代码，效果如图所示。制作完物流信息更新展示部分的网页效果703步骤四：制作订单信息显示部分。与之前项目十任务2中的订单布局类似，具体html代码如图所示。订单信息显示部分结构布局704订单信息显示部分结构布局705订单信息显示部分结构布局706订单信息显示部分结构布局707订单信息显示部分结构布局708订单信息显示部分结构布局709订单信息显示部分结构布局710订单信息显示部分结构布局711用CSS设置订单信息显示部分的代码，如图所示。用CSS设置订单信息显示部分的代码712用CSS设置订单信息显示部分的代码713用CSS设置订单信息显示部分的代码714用CSS设置订单信息显示部分的代码715用CSS设置订单信息显示部分的代码716用CSS设置订单信息显示部分的代码717一、header标签header标签用于定义文档或者文档一部分区域的页眉，可以作为介绍内容或者导航列表的容器。在一个文档中可以定义多个header标签。header标签具