(
课件网) 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 环境下看到的鼠标指针种类 ... ...
