网页设计与制作-HTML5 + CSS3 课件汇总 任务8--12 设计“在线留言”子页面 --- 首页其他板块的设计与制作 .pptx

网页设计与制作HTML5+CSS3

任务8

设计“在线留言”子页面

任务本任务通过设计“学习党的二十大精神专题网”的“在线留言”子页面，重点学习表单元素的CSS样式设置。同时，进一步学习贯彻党的二十大精神知识。网页效果如图8-1所示。任务8设计“在线留言”子页面

任务图8-1任务8设计“在线留言”子页面

知识目标技能目标素质目标（1）掌握设置表单样式的常用方法。（2）掌握设置输入框、文本域、下拉菜单、按钮等表单元素的样式。（3）掌握属性选择器的用法。（1）能够使用CSS对表单进行美化。（2）能够使用CSS对表单边框、表单元素外观。（3）能够使用属性选择器对不同类型输入元素的CSS样式设置。（1）掌握并遵循Web开发标准。（2）培养分析和解决问题的能力。（3）培养自学能力。

表单相关的CSS样式任务实现

1.表单相关的CSS样式1.1输入框的样式1.2文本域的样式1.3按钮样式1.4下拉菜单的样式任务8设计“在线留言”子页面

1.1输入框的样式在谷歌浏览器中，默认的表单输入框是一个黑框，单击时显示一个更粗的黑框，表单元素输入框默认样式是2像素宽的边框和2像素左右内边距和1像素上下内边距。然而在不同的浏览器中输入框默认样式会有差异。为了实现效果统一，最好是自定义输入框的样式。1.属性选择器的用法属性选择器在为不带有class或id的表单设置样式时特别有用，使用这个选择器可以使表单输入框样式具有更强的灵活度和适应性。如果只想设置特定输入类型的样式，则可以使用属性选择器。例如，input[type=text]将选择文本输入框，input[type=password]将选择密码的输入框，input[type=number]将选择数字的输入框。1.表单相关的CSS样式

1.1输入框的样式2.输入框的宽度、边框、填充、颜色可以使用width属性设置输入框的宽度，使用padding属性设置输入框中内边距，使用border属性设置输入框边框的大小、线型和颜色，使用border-radius属性给输入框添加圆角，使用background-color属性设置输入框的背景颜色，使用color属性设置文本颜色。1.表单相关的CSS样式

1.1输入框的样式1.表单相关的CSS样式!DOCTYPEhtmlhtmllang=zh-CNheadmetacharset=UTF-8/title输入框的样式/titlestyletype=text/cssinput[type=text]{width:100%;padding:12px20px;margin:8px0;box-sizing:border-box;border:2pxsolidred;【案例8-1】example8-1.html演示了输入框的样式设置，代码如下：

1.1输入框的样式1.表单相关的CSS样式border-radius:4px;background-color:#ccc;}/style/headbodyformlabelfor=username用户账号：/labelinputtype=textplaceholder=请输入用户账号：brlabelfor=password用户密码：/labelinputtype=passwordplaceholder=请输入用户账号：/form/body/html

1.1输入框的样式1.表单相关的CSS样式【案例8-1】在浏览器中显示效果如图8-2所示。图8-2输入框的样式【解析】通过两个输入框对比可以看出，type属性值为text的文本字段输入框设置了红色的圆角边框，输入框中添加了内边距，背景灰色。type属性值为password的密码输入框没有设置样式，是默认的样式。需要注意的是代码中box-sizing属性设置为border-box，来确保元素的总宽度和高度中包括内边距和最终的边框。

1.1输入框的样式1.表单相关的CSS样式3.获得焦点的输入框默认情况下，某些浏览器在获得焦点（单击）时会在输入框周围添加蓝色轮廓。为了清除此默认样式，可以添加outline:none。outline是轮廓属性，一般来说，预期之外的边框大多数是它造成的。使用:focus选择器可以在输入字段获得焦点时为其设置样式