1.18设置单元素交互效果（课件）-高二《网页设计与制作》同步教学（劳动版）

使用CSS3设置网页格式 第二阶段 能够叙述通过CSS样式美化表单的方法。 能够根据需要对vertical-align属性的不同取值进行设置。 能够综合运用CSS样式对D清单页面的表单元素进行美化。 任务目标 任务18 设置单元素交互效果 本次任务要求根据D清单页面效果图，使用CSS样式，在任务17基础上设置表单交互效果。 完成后的效果图如图1-18所示。 任务描述 图1-18 设置表单交互效果后的网页效果图 任务18 设置单元素交互效果 使用表单的目的除了收集用户信息外，更多的是为了提供更好的服务体验。在网页设计中，不仅需要设置所需表单的相关功能，还需要让表单控件更加美观，让用户在使用表单时有一个愉快的体验。要D清单页面表单元素交互效果，需要： 学习表单焦点获取效果等内容； 分析D清单页面中的表单交互效果，使用CSS样式美化D清单网页表单元素。 D清单页面表单交互效果分析如图1-18-1所示。 任务分析 任务18 设置单元素交互效果 任务分析 图1-18-1 D清单网页表单交互效果分析图 任务18 设置单元素交互效果 知识与技能准备 表单中默认的文本框是长方形的，比较死板；录入的文字和文本框边缘的距离较近，显得比较拥挤。如图1-18-2所示。 美化文本框一般可以采用设置边框内边距、添加圆角边框效果、设置焦点改变边框颜色等方式来进行美化。 边框的内边距padding设置主要是为了让录入的文字和文本框边框的距离留有一定空间，让浏览的效果更好，具体的设置可以参考任务12的内容。圆角边框效果主要是让边框的四个角有个弧度，提高美感，具体的设置可以参考任务15的内容。焦点的触发状态可以通过伪类“ :focus”对标签进行设置，类似于伪类。 1、美化文本框 表1-17-1 transition-property 属性值 课堂练习1-18-1 美化文本框效果 HTML代码： CSS代码： 1 2 3 4 8 6 <form> <input type="text" name="name" size="20" maxlength="4" autocomplete="off" placeholder="请输入姓名" class="a1"> </form> 1 2 3 4 5 6 7 .a1{padding:10px; border:solid 1px #000; border-radius: 3px;;} input:focus{border:solid 1px #00ff00; /*触发表单焦点状态*/ outline: none; } 显示效果如图1-18-3和1.18-4所示。 图1-18-3文本框美化效果 图1-18-4文本框触发焦点状态效果 知识与技能准备 表单中默认的按钮也是长方形的，比较死板；录入的文字和文本框边缘的距离较近，显得比较拥挤。如图1-18-5所示。 美化按钮一般可以采用设置边框内边距、添加圆角边框效果、背景颜色、鼠标经过时效果等方式来进行美化。 2、美化按钮 图1-18-5 默认的按钮 课堂练习1-18-2 美化文本框效果 显示效果如图1-18-6所示： 图1-18-6 美化后的按钮 课堂练习1-18-2 美化文本框效果 HTML代码： CSS代码： 1 2 3 4 5 <form> <div><input type="submit" value="确定" name="submit" class="a2"> </div> </form> 1 2 3 4 5 6 7 8 9 input{color:#fff; font-family:"楷体";} .a2{ width:80px; padding:10px; border:none; border-radius: 18px; background: linear-gradient(45deg,#f00,#ff0);} .a2:hover{background:linear-gradient(45deg,#ff0,#00FF00);} 知识与技能准备 默认状态下，表单文本框录入的文字和按钮的文字是以文字底端对齐的方式，但这种对齐方式对表单的浏览效果不好。如图1-18-7所示。这个时候，我们可以使用vertical-align 属性来设置元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。 3、表单控件的对齐方式 图1-18-7 默认表单控件的对齐方式 语法：vertical-align:取值; 知识与技能准备 3、表单控件的对齐方式 表1-18-1 vertical-align 课堂练习1-18-3 制作查询功能表单 HTML代码： 1 2 3 4 <form> <input typ