HTML5+CSS3网页设计与制作课件：设置单元素交互效果

HTML5+CSS3网页设计与制作设置单元素交互效果能够叙述通过CSS样式美化表单的方法。能够根据需要对vertical-align属性的不同取值进行设置。能够综合运用CSS样式对D清单页面的表单元素进行美化。任务目标

设置单元素交互效果本次任务要求根据D清单页面效果图，使用CSS样式，在基础上设置表单交互效果。完成后的效果图如图1-18所示。任务描述图1-18设置表单交互效果后的网页效果图

设置单元素交互效果使用表单的目的除了收集用户信息外，更多的是为了提供更好的服务体验。在网页设计中，不仅需要设置所需表单的相关功能，还需要让表单控件更加美观，让用户在使用表单时有一个愉快的体验。要D清单页面表单元素交互效果，需要：学习表单焦点获取效果等内容；分析D清单页面中的表单交互效果，使用CSS样式美化D清单网页表单元素。D清单页面表单交互效果分析如图1-18-1所示。任务分析

设置单元素交互效果任务分析图1-18-1D清单网页表单交互效果分析图

设置单元素交互效果知识与技能准备表单中默认的文本框是长方形的，比较死板；录入的文字和文本框边缘的距离较近，显得比较拥挤。如图1-18-2所示。美化文本框一般可以采用设置边框内边距、添加圆角边框效果、设置焦点改变边框颜色等方式来进行美化。边框的内边距padding设置主要是为了让录入的文字和文本框边框的距离留有一定空间，让浏览的效果更好，具体的设置可以参考的内容。圆角边框效果主要是让边框的四个角有个弧度，提高美感，具体的设置可以参考的内容。焦点的触发状态可以通过伪类“:focus”对标签进行设置，类似于伪类。1、美化文本框表1-17-1transition-property属性值课堂练习1-18-1美化文本框效果HTML代码：CSS代码：123486<form><inputtype="text"name="name"size="20"maxlength="4"autocomplete="off"placeholder="请输入姓名"class="a1"></form>1234567.a1{padding:10px;border:solid1px#000;border-radius:3px;;}input:focus{border:solid1px#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代码：12345<form><div><inputtype="submit"value="确定"name="submit"class="a2"></div></form>123456789input{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-1vertical-align课堂练习1-18-3制作查询功能表单HTML代码：1234<form><inputtype="text"class="a1"value="HTML5"><inputtype="submit"class="a2"value="查询"></form>CSS代码：123456789101112131415161718.a1{ width:250px;height:40px;padding:0px10px;vertical-align:bottom; /*垂直对齐方式*/border:solid5px#55aaff;border-radius:10px0010px; /*左侧圆角-左上和左下*

}/*实际高度40+5+5=50px*/.a2{width:80px;height:50px;vertical-align:bottom;border:none; border-radius:010px10px0; /*右侧圆角-右上和右下*/background:#55aaff;font:20px黑体;color:#fff;}课堂练习1-18-3制作查询功能表单显示效果如图1-18-8所示。图1-18-8制作查询功能表单任务实施为“给我留言”模块添加表单效果。当鼠标点击表单控件时，触发表单焦点状态，此时控件的边框颜色会出现变化。参考代码请参照书本。在表单的交互效果设置中，为让表单显示的效果更好，可以采用圆角边框对表单控件进行设置，同时设置表单焦点状态以及排版布局。效果如图1-18-9所示。图1-18-9给我留言效果图