资源简介

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

展开更多......

收起↑