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

任务8

“在线留言”子页面;

本任务通过设计“学习党的二十大精神专题网”的“在线留言”子页面，重

点学习表单元素的CSS样式设置。同时，进一步学习贯彻党的二十大精神知识。网页效果如图8-1所示。;

Coprigc2022-2025

TAI业T程职造步来学抗筑地工阳负软丹教明方族移所;

知识目标;

1.表单相关的CSS样式

2.任务实现;

1.表单相关的CSS样式

1.1输入框的样式

1.2文本域的样式

1.3按钮样式

1.4下拉菜单的样式;

在谷歌浏览器中，默认的表单输入框是一个黑框，单击时显示一个更粗

的黑框，表单元素输入框默认样式是2像素宽的边框和2像素左右内边距和1像素上下内边距。然而在不同的浏览器中输入框默认样式会有差异。为

了实现效果统一，最好是自定义输入框的样式。

1.属性选择器的用法

属性选择器在为不带有class或id的表单设置样式时特别有用，使用

这个选择器可以使表单输入框样式具有更强的灵活度和适应性。如果只想设置特定输入类型的样式，则可以使用属性选择器。例如，input[type=text]将选择文本输入框，input[type=password]将选择密码的输入框，input[type=number]将选择数字的输入框。;

2.输入框的宽度、边框、填充、颜色

可以使用width属性设置输入框的宽度，使用padding属性设置输入框中内边距，使用border属性设置输入框边框的大小、线型和颜色，使用border-radius属性给输入框添加圆角，使用background-color属性设置输入框的背景颜色，使用color属性设置文本颜色。;

3.获得焦点的输入框

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

1.表单相关的CSS样式

1.2文本域的样式

使用resize属性可以禁止文本域textareas调整大小(禁用右下角的抓取器”),文本域的宽度、边框、填充、颜色样式的设置与输入框用法一致。;

1.表单相关的CSS样

1.3按钮样式

设置按钮的基本样式，用常用的属性就??以。边框样式和文本框的边框设置一样，使用border属性，更改默认的边框样式，使用outline属性，更改默认轮廓样式。其它的还可以通过伪类属性，设置点击时的样式使用：active,聚焦时的样式使用：focus等等。;

1.表单相关的CSS样式

1.4下拉菜单的样式

下拉框select的基本样式与输入框、按钮一样，使用常用的属性就可以。边框仍然采用border加outline属性来设置。使用text-align-last属性，可以控制下拉框里的文字居中，使用appearance属性，可以隐藏下拉箭头。对于option元素，只能设置一般的字体文本样式，只有字体文本样式才会生效，无法设置位置样式、悬浮样式，背景颜色无法透明，透明时默认白色。可以利用行内样式使用size属性和multiple两个属性。;

任务8

设计“在线留言”子页面

1.表单相关的CSS样式

2.任务实现;

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

本任务是在任务5HTML结构的基础上美化设计页面。故省掉了页面的

HTML结构。具体的实施步骤如下。

(1)启动SublimeText,打开项目2任务5页面zxly.html。

(2)采用内部样式表引入样式的方法

(3)在style/style中写入CSS样式美化设计页面。

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

②:设置表单的样式。其中表单是760px宽，内边距为10px,居中显示的容器；边框为1px灰色实线的圆角边框；给表单添加了投影效果。;

2.任务实现

2.1任务实现

③设置表单内通用行元素span转换为行内块元素，宽度为100px、高度为

40px,并且文本居右对齐。

④设置表单元素输入框、文本域、下拉菜单的样式，给表单元素设置合适的宽度，

内边距，添