表格与表单的样式应用.pptVIP

模块6：表格与表单样式的应用 编制：武彦平（老师） 提问1：背景图与前景图如何应用? 提问2：图片边框,大小,对齐如何设置？ 提问3：CSS样式圆角布局研究? 提问4：背景图片的CSS Sprite技术? 回顾与作业点评 课 程 导 入 上一节我们学习了，模块5 背景与图片的应用，这一节我们开始接着学习，模块6 表格与表单样式的应用。 6.1 表格控制 6.1.1 表格标记 6.1.2 表格隔行换色实例 6.1.3 鼠标经过时变色的表格实例 6.2 表单控制 6.2.1 表单标记 6.2.2 登记框表单的应用实例 6.2.3 网民调查问卷实例 了解表格与表单的应用场合 学会使用表格表现数据 学会使用表格进行表单布局 学习目标 学会使用CSS对表单进行布局和美化 本章学习的重点、难点 本章学习重点： 1.学会使用表格表现数据 2.学会使用表格进行表单布局 本章学习难点： 学会使用表格进行表单布局 6.1 表格控制 6.1.1 表格标记 表格最重要的目的:”显示表格状的数据”,如工资账单、考试成绩表、课表等。 1.表格的基本结构: 表格是由指定数目的行和列组成；单元格是表格的最小单位，可以合并和拆分，单元格中可插入文字、图片、表单、超链接等各种网页元素，如下所示： 6.1 表格控制 2.表格的基本语法 创建表格的基本语法如下： 若是在表格添加边框，则设置其 border属性，如下 6.1 表格控制 3. 表格的高级用法 在创建表格时，可以对整个表格添加一些特有的属性，如下： 表格标题caption caption标签可定义表格标题。caption标签必须紧随table标签之后，且只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。 表格表头th 定义表格内的表头单元格，th标签中的文本通常会显示为粗体。 表格数据分组标签thead、tbody、tfoot 这三个标签一般配合使用，也可单独使用，实现对报表的逻辑分组。thead定义表格的表头，tbody定义表格主体，即详细的数据描述，tfoot定义表格的页脚。 6.1 表格控制 6.1.2 表格隔行换色实例 奇数行 偶数行 表格隔行变色可以使表格看起来十分美观。 我们就以表格高级用法的实例来为其添加隔行变色效果。 将其表格的第1行称为奇数行，第2行成为偶数行，以此类推，如下所示： 6.1 表格控制 6.1.2 表格隔行换色实例 注意： border-collapse属性指边框是分离（separate）还是重叠（collapse），默认为separate；如下所示 对整个表格定一个class；即table class=“datalist”； 对每个偶数行定一个class；即tr class=“altrow”； 对原来的CSS改为如右图所示 6.1 表格控制 6.1.3鼠标经过时变色的表格实例 鼠标经过时变色可以实现页面与用户的交互，增强用户体验。 .datalist tr:hover{ background-color:#FFC68C; /* 鼠标经过时变色 */} 6.2 表单控制 action：是当提交表单信息时，向何处发送表单数据，即处理表单数据的目标地址，如不填，默认为当前页面。 Method：是提交方式，取值为get或post。 “get”方式一般适用于安全性要求不高的场合； post一般适用于安全性较高的场合。 表单标记的语法 6.2 表单控制 表单里面有很多元素组成，如图6-2；但大部分表单元素都使用input标签，只是它们的type值不同，其统一用法如下： input name=表单元素名称 type=类型 value=值 / type值决定了表单元素的类型，其可选的值为text、password、checkbox、radio、submit、reset、image、file、hidden、button，默认为text。 2. 表单元素的基本格式 6.2 表单控制 图6-2 表单元素说明 6.2 表单控制 a.文本框 3. 表单逐一介绍 b.密码框 表单中最常用的输入元素就是文本框，它提供给用户输入单行文本信息 在文本框的基础上将type的值设置为password即可变成密码框，输入的字符全都以星号显示，提供数据安全 6.2 表单控制 c.单选按钮 d.复选框 单选按钮是一组互相排斥的选项，且具有相同的name属性值，来确保只选中一项。设置checked值表示初始选中； 复选框用于选择多个选项。例如爱好方面的选择，如下： 6.2 表单控制 e.提交、重置与普通按钮 f.多行文本域 提交按钮用于提交表单数据，重置按钮用于