资源简介

(共65张PPT)
10html5 新增结构元素和属性任务 1 制作订单支付网页地址区任务 2 制作订单支付网页制作订单支付网页地址区任务 1● 掌握 html5 新增结构元素的用法。为了使文档的结构更加清晰、明确，html5 新增加了一些可以改善文档结构的元素，如header、footer、article、aside、section 等。这些结构元素能够让网页设计者更加语义化地创建文档。而在之前的 html4 中，设计者要实现这些语义化的功能，需要使用 div 标签的额外属性，且由于设计者编码习惯不同，很难做到统一。本任务主要使用 section 元素实现网页语义化，并用 nav 标签设置导航栏来制作缤购乐食电子商务网站订单支付网页地址。网页效果如图所示。订单支付网页地址区效果图步骤一：在 body 标签中插入一个大的 section 模块，里面包含两个小 section 模块，第二个 section模块包含一个 ul 无序列表。网页的导航列表主要用 ul 无序列表来布局，为了更加语义化地表达网页内容，在 ul 外层包裹一组 nav 标签。在导航列表下方使用 div 标签和 span 标签的嵌套来完成“收货地址”区域的布局。具体 html 代码如图所示。支付网页导航列表结构布局支付网页导航列表结构布局支付网页导航列表结构布局支付网页导航列表结构布局支付网页导航列表结构布局支付网页导航列表结构布局支付网页导航列表结构布局步骤二：设置相应的 CSS 样式代码。这里要注意，“默认地址”标志设置了半透明的效果，这是使用“ opacity:0.7”来实现的，此处的值只能取 0 ～ 1 之间，值越小，透明度越高。用 CSS设置支付网页导航列表样式的代码如图所示。用 CSS 设置支付网页导航列表样式代码用 CSS 设置支付网页导航列表样式代码用 CSS 设置支付网页导航列表样式代码用 CSS 设置支付网页导航列表样式代码用 CSS 设置支付网页导航列表样式代码用 CSS 设置支付网页导航列表样式代码用 CSS 设置支付网页导航列表样式代码用 CSS 设置支付网页导航列表样式代码用 CSS 设置支付网页导航列表样式代码运行代码，效果如图所示。制作完订单支付网页地址区导航列表的网页效果步骤三：制作物流选择区和支付方式选择区。物流品牌的图片用到了雪碧图技术，雪碧图技术就是将很多图标都放在一张大图上，然后通过控制 background-position 来显示大图中的某个小图。具体 html 代码如图所示。物流选择区和支付方式选择区结构布局物流选择区和支付方式选择区结构布局物流选择区和支付方式选择区结构布局用 CSS 设置物流选择区和支付方式选择区样式的代码，如图所示。用 CSS 设置物流选择区和支付方式选择区样式的代码用 CSS 设置物流选择区和支付方式选择区样式的代码用 CSS 设置物流选择区和支付方式选择区样式的代码一、section 元素section 元素是区块元素，用于对网页中的内容分块，它往往是文章中的一段，通常由标题和内容组成。section 元素强调分段和分块，而 article 元素则强调独立性。没有标题的内容不推荐使用section 元素，可以使用 html 轮廓工具检查网页中是否存在没有标题的 section 元素。html5轮廓工具网址为“http://gsnedders.html5.org/outliner”。section 元素演示代码如图所示。其中 h1 标签包含的是标题部分，p 标签包含的是内容部分。section 元素演示代码二、nav 标签nav 标签用来定义网页导航列表的部分。nav 标签的使用场合主要有传统导航条、侧边栏导航、页内导航、翻页操作。nav 标签只起语义化的作用，没有实际的显示效果。需要注意的是，不要用 menu 标签代替 nav 标签，nav 标签包含帮助用户浏览网页的链接，menu 标签则包含一组菜单命令，帮助用户执行某些任务。nav 标签演示代码如图所示。nav 标签演示代码制作订单支付网页任务2● 掌握 html5 表单新属性的特征。html 表单一直都是 web 的核心技术之一，依靠它可以完成 web 上各种应用的输入界面，从而使客户端和服务器进行方便快捷的交互。html5 表单新增了许多属性，方便设计者应对更加多样的场景，而不用借助其他前端脚本语言。在缤购乐食电子商务网站订单支付网页上，需要通过 html 表单做出供用户选择的收货地址、快递公司、支付方式等，并通过 html表单将信息传输到服务器完成下单操作。本任务通过之前学习的 html 表单相关知识以及html5 表单控件的新属性来完成订单支付网页，网页效果如图所示。订单支付网页效果步骤一：首先制作订单表格标题，图所示为订单表格标题的 html 代码。订单表格标题的 html 代码接着设置 CSS 代码，如图所示。订单表格标题 CSS 样式代码订单表格标题 CSS 样式代码步骤二：制作订单商品信息列表部分。每一行的布局是由一个单独的 ul 无序列表来完成的，每一行要显示的图文信息分别放在 li 列表项中，所有的 li 列表项都设置为左浮动，并排列成一行。具体 html 代码如图所示。订单商品信息列表布局订单商品信息列表布局订单商品信息列表布局订单商品信息列表布局订单商品信息列表布局订单商品信息列表布局接着设置 CSS 代码，宽度和高度的属性值不仅可以使用具体的像素值，也可以设置百分比，当需要按比例去分配高度和宽度的时候，建议使用百分比；当宽度和高度为具体确定的值时，建议使用像素值。用 CSS 设置订单商品信息列表样式的代码如图所示。用 CSS 设置订单商品信息列表样式的代码用 CSS 设置订单商品信息列表样式的代码用 CSS 设置订单商品信息列表样式的代码运行代码，效果如图所示。订单商品信息列表效果步骤三：制作买家留言和商品优惠信息部分，买家留言部分用文本输入框实现，商品优惠信息部分用 select 下拉列表控件实现。具体 html 代码如图所示。买家留言和商品优惠信息部分结构布局买家留言和商品优惠信息部分结构布局买家留言和商品优惠信息部分结构布局用 CSS 设置买家留言和商品优惠信息部分样式的代码，如图所示。用 CSS 设置买家留言和商品优惠信息部分样式的代码用 CSS 设置买家留言和商品优惠信息部分样式的代码步骤四：制作支付信息及提交订单部分。支付信息由大 div 盒子中嵌套小 div 盒子及 span 标签来实现，“提交订单”按钮使用超链接 a 标签来实现其样式，此按钮也可以使用“表单提交”按钮来实现，读者可自行尝试。具体 html 代码如图所示。支付信息及提交订单部分结构布局支付信息及提交订单部分结构布局支付信息及提交订单部分结构布局接着设置 CSS 代码，这里需要注意 outline 属性和 border 属性的区别：border 指网页元素的边框，outline 指网页元素边框的边缘，设置无边框使用“ border:none”，设置无轮廓使用“outline:0”。具体代码如图所示。用 CSS 设置支付信息及提交订单部分的代码用 CSS 设置支付信息及提交订单部分的代码用 CSS 设置支付信息及提交订单部分的代码一、required/pattern 属性required 属性规定必须在提交之前填写输入域，即输入域不能为空。required 属性适用于以下类型的 input 标签：text、search、url、telephone、email、password、datepickers、number、checkbox、radio 和 le。格式如下。pattern 属性规定用于验证 input 域的模式，pattern 类型为正则验证，它可以完成各种复杂的验证。pattern 属性适用于以下类型的 input 标签：text、search、url、telephone、email 和password。格式如下。二、autofocus 属性autofocus 属性规定在页面加载时，域自动获得焦点，可在页面加载完成时聚焦到指定的表单控件上，类似于 Javascript 的 focus（ ）方法。autofocus 属性适用于所有类型的 input表单控件。格式如下。三、outline 属性outline 属性用于在元素周围绘制一条线，该线位于边框边缘的外围，可起到突出元素的作用。

展开更多......

收起↑