1.15设置按钮交互格式（课件）-高二《网页设计与制作》同步教学（劳动版）

使用CSS3设置网页格式 第二阶段 能按需求选择超链接的4种伪类选择符就行样式效果设置。 能使用伪类选择符“clild”和“type”简化元素选择。 能使用伪类选择符设置D清单页面的按钮交互格式。 任务目标 任务15 设置按钮交互格式 本次任务要求根据D清单页面效果图，使用CSS样式在任务14的基础上设置该网页中的按钮交互格式。 本次任务任务包括： 1、设置D清单网页按钮鼠标经过时的样式变化； 2、修改按钮表单鼠标经过时的阴影效果。 任务描述 任务15 设置按钮交互格式 要完成D清单页面超链接样式设置，需要： 学习超链接相关的四个伪类选择符的语法； 学习伪类选择符选择子元素及选择类型子元素的方法； 分析D清单页面中按钮交互效果，正确使用相关的样式设置完成D清单网页中按钮的交互效果。 D清单网页按钮交互效果如图2-6-1所示。 任务分析 任务15 设置按钮交互格式 任务分析 图2-6-1 D清单网页的按钮网页效果 任务15 设置按钮交互格式 知识与技能准备 超链接标签<a>通过四个伪类选择符定义了超链接的四种不同状态。伪类选择符以“:”的形式附加在选择符的后面，如下表2-6-1所示。 1、与超链接相关的四个伪类选择符 表2-6-1 超链接的四种状态 课堂练习2-6-1 制作一个渐变背景的导航栏，鼠标经过时背景渐变色方向相反 HTML代码： CSS代码： 1 2 3 4 5 6 <div class="menu"> <span>HOME</span> <span>BlOG</span> <span>ABOUT</span> <span>CONTACT</span> </div> 1 2 3 4 5 6 7 8 9 10 span{ /* 导航栏默认效果*/ color: white; background: linear-gradient( to bottom, #58bdf9, #6086ef ); float: left;/*消除项与项之间的间隔*/ padding: 10px 20px;/*产生上下左右间距*/ } 利用渐变背景色使导航栏有立体感，通过鼠标经过时渐变方向相反，使导航栏有动态感。如下表所示。 显示效果如图2-6-2所示： 图2-6-2 渐变背景导航栏效果 课堂练习2-6-1 制作一个渐变背景的导航栏，鼠标经过时背景渐变色方向相反 CSS代码： 1 2 3 4 5 6 7 span:hover{ /* 鼠标经过时效果*/ background: linear-gradient( to top, #58bdf9, #6086ef ); } 使用hover伪类设置出导航栏鼠标经过时的样式改变效果： 显示效果如图2-6-3所示： 图2-6-3 鼠标经过时导航菜单变化效果 知识与技能准备 通过伪类选择符“child”，可以选择特定的子元素进行样式设置。要使这个选定的子元素属性生效，它必须是某个元素的子元素，最高的父元素标签是body。 2、伪类选择符“child”选择指定的子元素标签 表2-6-2 伪类选择符“child” 课堂练习2-6-2 使用伪类选择符选择特定的标签进行更改样式属性 HTML代码： CSS代码： 1 2 3 4 5 6 7 8 9 10 11 12 13 <div> <p>第一个p：我想变蓝色</p> <div>第一个div：我想变红色</div> <p>第二个p：我想变紫色</p> <p>第三个p：我想变粉色</p> <p>最后一个p：我想变橙色 </p> </div> <div> <div>唯一的div：我想变红色</div> </div> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 /*其它设置省略*/ p:first-child{/*选择第1个子元素是p的标签*/ color: blue; } p:last-child{/*选择最后1个子元素是p的标签*/ color: orange; } p:nth-child(3){/*选择第3个子元素是p的标签*/ color: purple; } p:nth-last-child(2){/*选择倒数第2个子元素是p的标签*/ color: pink; } div:only-child{/*选择只有唯一一个子元素是div的标签*/ color: red; } 注意观察html的代码结构和代码顺序，根据表2-6-2的说明使用相应的伪类选择符选择特定的标签更改样式属性。 课堂练习2-6-2 使用伪类选择符选择特定的标签进行更改样式属性 显示效果如图2-6-4所示： 图2-6-4伪类选择符选择设置效果 课堂练习2-6-3 制作如下图的导航栏 制作