《网页设计与制作项目教程》-任务8设计“在线留言”子页面

任务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样式3.获得焦点的输入框默认情况下，某些浏览器在获得焦点（单击）时会在输入框周围添加蓝色轮廓。为了清除此默认样式，可以添加outline:none。outline是轮廓属性，一般来说，预期之外的边框大多数是它造成的。使用:focus选择器可以在输入字段获得焦点时为其设置样式。1.2文本域的样式

1.表单相关的CSS样式使用resize属性可以禁止文本域textareas调整大小（禁用右下角的"抓取器"），文本域的宽度、边框、填充、颜色样式的设置与输入框用法一致。1.3按钮样式

1.表单相关的CSS样式设置按钮的基本样式，用常用的属性就可以。边框样式和文本框的边框设置一样，使用border属性，更改默认的边框样式，使用outline属性，更改默认轮廓样式。其它的还可以通过伪类属性，设置点击时的样式使用:active，聚焦时的样式使用:focus等等。1.4下拉菜单的样式

1.表单相关的CSS样式下拉框select的基本样式与输入框、按钮一样，使用常用的属性就可以。边框仍然采用border加outline属性来设置。使用text-align-last属性，可以控制下拉框里的文字居中，使用appearance属性，可以隐藏下拉箭头。对于option元素，只能设置一般的字体文本样式，只有字体文本样式才会生效，无法设置位置样式、悬浮样式，背景颜色无法透明，透明时默认白色。可以利用行内样式使用size属性和multiple两个属性。表单相关的CSS样式任务实现任务8设计“在线留言”子页面2.任务实现任务8设计“在线留言”子页面任务8设计“在线留言”子页面本任务是在任务5HTML结构的基础上美化设计页面。故省掉了页面的HTML结构。具体的实施步骤如下。（1）启动SublimeText，打开项目2任务5页面zxly.html。（2）采用内部样式表引入样式的方法（3）在<style></style>中写入CSS样式美化设计页面。

：

对比“在线留言”与“在线互动”子页页面效果发现除了中间内容不一样，“banner”、“导航”、“版权”这三部分部分内容及效果一致。参考任务7这三块相同部分的HTML与CSS代码。

：设置表单的样式。其中表单是760px宽，内边距为10px，居中显示的容器；边框为1px灰色实线的圆角边框；给表单添加了投影效果。2.1任务实现2.任务实现