项目九 表单控制（课件）《电子商务网页设计与制作》（中国劳动保障出版社）

09 表单控制 549 549 任务 1 制作列表网页 任务 2 制作鼠标指针特效 550 项目九 表单控制 550 制作列表网页 任务 1 551 551 ● 掌握元素的显示与隐藏方法。 552 项目九 表单控制 552 一个网页中通常包含多种内容，要在有限的页面空间里展示这些内容，就需要结合多种技术来实现。例如，在对页面进行布局时，为了让页面更美观、布局更合理、功能更强大，加强页面的视觉效果，可以通过设置标签的显示与隐藏，来选择让哪些元素正常显示，让哪些元素通过指针触发显示。 553 项目九 表单控制 553 554 本任务将通过设置背景颜色、设置边框样式以及设置元素显示与隐藏来制作彩妆产品热卖列表网页，网页效果如图所示。 彩妆产品热卖列表网页 项目九 表单控制 554 555 步骤一： 在 body 标签中插入一个大的 div 盒子，然后在大盒子中插入一个段落标题和一个 ul 无序列表，彩妆产品热卖列表的布局主要由这个 ul 无序列表来实现。具体代码如图所示。 彩妆产品热卖列表网页 项目九 表单控制 555 556 彩妆产品热卖列表网页 项目九 表单控制 556 557 运行上图中的代码，部分网页效果如图所示。 部分初始网页效果 项目九 表单控制 557 558 步骤二： 进行样式设置。这里需要注意，本任务采用外部样式表。首先把网页中列表的默认样式清除掉，然后去掉超链接 a 标签的下画线，并设置其包含文字的颜色。 具体 CSS 设置代码如图所示。 用 CSS 设置基本样式的代码 项目九 表单控制 558 559 设置完毕，运行代码，网页效果如图所示。 部分网页效果 1 项目九 表单控制 559 560 步骤三： 设置网页文本的字体和网页元素的背景颜色，CSS 代码如图所示。 设置背景色 项目九 表单控制 560 561 设置背景色 项目九 表单控制 561 562 设置完毕，运行代码，效果如图所示。 部分网页效果 2 项目九 表单控制 562 563 步骤四： 为每个产品设置下边框虚线，将产品与产品间隔开，同时设置每个产品图片默认为隐藏状态，隐藏状态使用“display:none;”来实现。具体 CSS 代码如图所示。 用 CSS 设置下边框虚线属性的代码 项目九 表单控制 563 564 设置完毕，运行代码，效果如图所示。 设置下边框虚线属性后的网页效果 项目九 表单控制 564 565 步骤五： 使用“ a:hover”伪类做两处设置，一处为当鼠标光标悬停在列表项时文字颜色变为红色，另一处为当鼠标光标悬停在列表项时将序号图片变为红颜色序号图片，具体 CSS 代码设置如图所示。 用 CSS 设置伪类的代码 项目九 表单控制 565 566 设置完毕，运行代码，效果如图所示。 设置伪类后的网页效果 项目九 表单控制 566 567 步骤六： 利用“ a:hover”伪类来实现当鼠标光标悬停在列表项时产品图片变为显示状态。具体CSS 代码如图所示。 用 CSS 设置产品图片状态的代码 项目九 表单控制 567 568 在前面的项目中已经介绍过 display 的转换属性，可以使用 display 属性让元素变为行内元素、块元素或行内块元素。下面将介绍 display 的显示与隐藏属性，即让一个元素在页面中消失或者显示，类似于广告网站，当鼠标光标在图片或文字上面移动时，通过 display 的显示与隐藏属性，来展示对当前内容更加细致的描述；而当鼠标光标移走后，这些内容就隐藏不见了。再比如某些下拉菜单，其在正常情况下是不显示的，只有当鼠标光标经过时，才会显示下拉菜单。 项目九 表单控制 568 569 display 有关显示与隐藏的属性值及其含义见表。 display 有关显示与隐藏的属性值及其含义 项目九 表单控制 569 570 下面通过一个案例来学习未使用元素的隐藏与显示的情况，代码如图所示。 未使用元素的隐藏与显示的代码应用 项目九 表单控制 570 571 这时 div 标签的内容显示在浏览器上。如果不想让 div 标签的内容显示出来，可以使用“display:none;”将它隐藏，代码如图所示。 使用 display 的隐藏属性隐藏 div 标签的内容 项目九 表单控制 571 572 保存 html 文件，运行效果如图所示。 这时可以发现浏览器是空白的，没有任何显示，通过使用 display 的隐藏属性，隐藏了div 标签的内容。同理，如果想显示 div 标签的内容，可以使用“ display:block;”将 div 标签内容显示出来。大家可以自己动手操作一下。 div 标签的内容被隐藏 项目九 表单控制 572 制作鼠标指针特效 任务2 573 573 ● 掌握用 CSS 设置鼠标指针效果。 574 项目九 表单控制 574 读者在浏览网页时看到的鼠标指针会有不同的形状，如箭头、手形和Ⅰ字形等，而在Windows 环境下看到的鼠标指针种类要比这个多很多。CSS 弥补了 html 语言在这方面的不足，通过 cursor 属性可以设置各式各样的鼠标指针样式。 用 CSS 设置鼠标指针样式主要是通过 cursor 属性来实现的。该属性可以在任何标签里使用，从而能够改变各种网页元素的鼠标指针效果。本任务主要使用 cursor 属性中的 pointer值来改变鼠标指针显示样式、用 ul 列表进行布局来制作缤购乐食电子商务网站购物车网页，最终网页效果如图所示。 575 项目九 表单控制 575 576 缤购乐食电子商务网站购物车网页 项目九 表单控制 576 577 步骤一： 整理好缤购乐食电子商务网站购物车网页的公共部分，此时的页底由 1 000 像素缩小至860 像素，其目的是配合购物车的宽度，效果如图所示。 购物车页面公共部分 项目九 表单控制 577 578 制作商品信息标题栏，具体 html 代码如图所示。 用 html 制作商品信息标题栏的代码 项目九 表单控制 578 579 用 CSS 设置商品信息标题栏样式的代码，如图所示。 用 CSS 设置商品信息标题栏样式的代码 项目九 表单控制 579 580 步骤二： 制作页面优惠信息栏，具体 html 代码如图所示。 用 html 制作页面优惠信息栏的代码 项目九 表单控制 580 581 用 CSS 设置页面优惠信息栏样式的代码，如图所示。 用 CSS 设置页面优惠信息栏样式的代码 项目九 表单控制 581 582 步骤三： 制作一行商品购物信息，具体 html 代码如图所示。 用 html 制作一行商品购物信息的代码 项目九 表单控制 582 583 用 html 制作一行商品购物信息的代码 项目九 表单控制 583 584 用 html 制作一行商品购物信息的代码 项目九 表单控制 584 585 用 html 制作一行商品购物信息的代码 项目九 表单控制 585 586 用 CSS 设置一行商品购物信息样式的代码，如图所示。 用 CSS 设置一行商品购物信息样式的代码 项目九 表单控制 586 587 用 CSS 设置一行商品购物信息样式的代码 项目九 表单控制 587 588 用 CSS 设置一行商品购物信息样式的代码 项目九 表单控制 588 589 用 CSS 设置一行商品购物信息样式的代码 项目九 表单控制 589 590 用 CSS 设置一行商品购物信息样式的代码 项目九 表单控制 590 591 运行代码，效果如图所示。 制作完一行商品购物信息的网页效果 项目九 表单控制 591 592 步骤四： 通过复制、粘贴再设计一行优惠信息和两行商品购物信息，这样购物车场景看起来更加真实。效果如图所示。 制作完多行商品购物信息的网页效果 项目九 表单控制 592 593 步骤五： 制作全选与结算栏，具体 html 代码如图所示。 用 html 制作全选与结算栏的代码 项目九 表单控制 593 594 用 html 制作全选与结算栏的代码 项目九 表单控制 594 595 用 CSS 设置全选与结算栏样式的代码，如图所示。 用 CSS 设置全选与结算栏样式的代码 项目九 表单控制 595 596 用 CSS 设置全选与结算栏样式的代码 项目九 表单控制 596 597 用 CSS 设置全选与结算栏样式的代码 项目九 表单控制 597 598 用 CSS 控制鼠标指针特效主要是通过 cursor 属性来实现的，该属性可以在任何标签里使用，从而可改变各种页面元素的鼠标指针效果。 下面通过一个案例来具体演示 cursor 属性的使用，如图所示。 cursor 属性的使用代码 项目九 表单控制 598 599 cursor 属性的使用代码 项目九 表单控制 599 600 cursor 效果 运行上图中的代码，效果如图所示。 项目九 表单控制 600 601 cursor 属性的鼠标指针效果 在上面的 CSS 代码中，由于给 span 标签设置了 cursor 属性，因此，当光标位于内容处时，显示为所定义的鼠标指针形状。cursor 属性有很多预设的鼠标指针效果，见表。 项目九 表单控制 601 $$