《CSS DIV网页样式与布局案例教程》课件 项目七 制作表单并使用CSS美化.pptxVIP

任务一 制作注册页面——表单的HTML结构本任务将要制作仿淘宝注册页面。该页面中包含了表单中的几个主要元素：文本框、密码框、单选按钮、复选框等。通过制作该页面，可以让大家掌握在网页中插入表单标签，以及使用div标签对表单元素进行布局的方法，并了解表单标签在页面中的默认显示效果。另外，本任务主要使用表单标签来进行注册页面的制作，暂不涉及到CSS，使用CSS修饰表单的内容放到任务二中 讲解。 支撑知识点——常用的表单HTML标签1．表单标签表单是一个包含表单元素的区域，它由form/form标签对定义。我们可以将文本框、单选按钮、复选框、下拉列表框、按钮和文本域等表单元素放置在form/form标签对中。 2．输入标签多数情况下用到的表单元素是由输入标签/input定义的，这是一个单标签，用来在网页中搜集用户的信息，其常用的属性如下。input type=表单元素类型 value=表单元素的值 name=表单元素名称 class=类别名 /其中，通过设置/input标签的type属性可以得到不同 类型的表单元素，如按钮、复选框、文本框和图片框等。 3．下拉列表标签HTML网页中的下拉列表通常由select/select和option/option标签定义。其中select/select标签对用来定义下拉列表；option/option 标签对用来定义下拉列表中的选项，下拉列表中有多少个选项，就需要添加多少个option/option 标签对。例如：select option value=值1选项1/optionoption value=值2选项2/optionoption value=值3选项3/option/select 4．文本域标签textarea/textarea标签为文本域标签，它相当于一个多行的文本框，可以让用户输入大量数据。它有2个属性cols和rows，分别代表一行多少字以及文本域有多少行。 任务二 美化注册页面——使用CSS控制表单在上个任务中，我们完成了注册页面的主体结构—— HTML标签的制作，但界面不够精致，还需要美化。在本任务中，我们将学习使用CSS来美化此页面的操作，效果如下图所示，并掌握使用CSS修饰表单元素的方法。 支撑知识点——使用CSS定义表单样式我们可以用CSS来改变表单的文字、背景、一些输入框的样式等，但是诸如checkbox和radio这样的表单元素无法使用纯粹的CSS来改变样式，必须结合一定的 javascript代码才可以，所以本书不做checkbox和radio样式的讲解。CSS对表单标签的修饰大致分为以下几类。修饰表单标签边框样式。修饰表单标签背景。改变表单标签的活动状态样式。 1．修饰表单标签边框样式这里还是使用大家很熟悉的一个样式属性：border。 border样式属性可以用在几乎所有的表单标签上，我们可以使用它来控制表单标签的4条边的大小、线形、颜色。 2．修饰表单标签背景使用background样式属性可以控制表单标签的背景颜色、背景图片、背景图片的重复方式及位置，使用方法与前 面学过的方法相同。例如，为一个文本框添加背景样式。#txt{background-color:#0FF; /*设置背景色*/} 3．改变表单标签的活动状态样式伪类的用法这里不再重复介绍，和任何普通标签一样，我们可以为表单标签设置2种状态的样式：一种是普通状态时，一种是将鼠标指针移动到标签上方时（即 hover状态）。