用CSS设置表格和表单样式.ppt

网页制作综合技术教程网页制作综合技术教程第第3 3部分部分 CSS CSS样式设计样式设计 第第1212章章用用CSSCSS设置设置表格和表单样式表格和表单样式 控制表格控制表格12.112.1美化表格美化表格12.212.2案例案例日历日历12.312.3CSSCSS与表单与表单12.412.4案例案例网上调查问卷网上调查问卷12.512.5 表格是网页上很常见的元素。在传统的表格是网页上很常见的元素。在传统的网页设计中表格除了显示数据外，还常常被网页设计中表格除了显示数据外，还常常被用来作为整个页面布局的手段。用来作为整个页面布局的手段。在在Web标准逐渐深入设计领域以后，表标准逐渐深入设计领域以后，表格逐渐不再承担布局的任务，但是表格仍然格逐渐不再承担布局的任务，但是表格仍然在网页设计中发挥着重要的作用。在网页设计中发挥着重要的作用。本章将继续挖掘本章将继续挖掘CSS中表格、表单的强中表格、表单的强大功能，此外，本章还将介绍表单样式的设大功能，此外，本章还将介绍表单样式的设置方法。置方法。12.1 12.1 控控 制制 表表 格格12.1.1 12.1.1 设置表格的边框设置表格的边框 图图12.1 基本的表格样式基本的表格样式 图图12.2 设置表格的框线设置表格的框线 1 1设置单元格的边框设置单元格的边框2 2相邻边框的合并规则相邻边框的合并规则3 3边框的分离边框的分离 12.1.2 12.1.2 确定表格的宽度确定表格的宽度12.1.3 12.1.3 其他与表格相关的标其他与表格相关的标记记 图图12.6 表格的表格的HTML结构示意结构示意12.2 12.2 美美 化化 表表 格格图图12.7 交替变色的表格样式交替变色的表格样式12.3 12.3 案例案例日历日历图图12.13 视图模式显示的日历视图模式显示的日历12.4 CSS12.4 CSS与表单与表单 表单是网页与用户交互所不可缺少的元表单是网页与用户交互所不可缺少的元素，在传统的素，在传统的HTML中对表单元素的样式进中对表单元素的样式进行控制的标记很少，仅仅局限于功能上的实行控制的标记很少，仅仅局限于功能上的实现。现。本节围绕本节围绕CSS控制表单进行详细介绍，控制表单进行详细介绍，包括表单中各个元素的控制，与表格配合制包括表单中各个元素的控制，与表格配合制作各种效果等。作各种效果等。12.4.1 12.4.1 表单中的元素表单中的元素图图12.18 普通表单普通表单 图图12.19 简单的简单的CSS样式风格样式风格12.4.2 12.4.2 多彩的下拉菜单多彩的下拉菜单 图图12.21 七彩的下拉菜单七彩的下拉菜单 图图12.22 最终效果最终效果12.5 12.5 案例案例网上调查问卷网上调查问卷图图12.25 外层表格外层表格