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

CSSCSS网页设计标准教程网页设计标准教程第第2 2部分部分 CSSCSS专题技术专题技术第第 8 8 章章用用CSSCSS设置设置表格和表单样式表格和表单样式控制表格控制表格8.1美化表格美化表格8.2制作日历制作日历8.3CSS与表单与表单8.4网民调查问卷实例网民调查问卷实例8.5 表格是网页上很常见的元素。表格是网页上很常见的元素。在传统的网页设计中表格除了显示数在传统的网页设计中表格除了显示数据外，还常常被用来作为整个页面布局的据外，还常常被用来作为整个页面布局的手段。手段。在在WebWeb标准逐渐深入设计领域以后，表标准逐渐深入设计领域以后，表格逐渐不再承担布局的任务，但是表格仍格逐渐不再承担布局的任务，但是表格仍然都在网页设计中发挥着重要的作用。然都在网页设计中发挥着重要的作用。本章介绍表格与表单样式的设置方法。本章介绍表格与表单样式的设置方法。8.1 8.1 控控 制制 表表 格格 8.1.1 8.1.1 设置表格的边框设置表格的边框图图8.1基本的表格样式基本的表格样式图图8.2设置表格的框线设置表格的框线1 1设置单元格的边框设置单元格的边框2 2相邻边框的合并规则相邻边框的合并规则3 3边框的分离边框的分离 8.1.2 8.1.2 确定表格的宽度确定表格的宽度 8.1.3 8.1.3 其他与表格相关的标记其他与表格相关的标记图图8.6表格的表格的HTML结构示意结构示意8.2 8.2 美美 化化 表表 格格图图8.7交替变色的表格样式交替变色的表格样式 8.2.1 8.2.1 搭建搭建HTMLHTML结构结构 8.2.2 8.2.2 整体设置整体设置 8.2.3 8.2.3 设置单元格样式设置单元格样式 8.2.4 8.2.4 斑马纹效果斑马纹效果8.3 8.3 制制 作作 日日 历历图图8.12Google日历日历图图8.13中视图模式显示的日历中视图模式显示的日历8.3.1 8.3.1 搭建搭建HTMLHTML结构结构8.3.2 8.3.2 设置整体样式和表头样式设置整体样式和表头样式8.3.3 8.3.3 设置日历单元格样式设置日历单元格样式8.4 CSS8.4 CSS与表单与表单 8.4.1 8.4.1 表单中的元素表单中的元素图图8.18普通表单普通表单图图8.19简单的简单的CSS样式风格样式风格8.4.2 8.4.2 多彩的下拉菜单多彩的下拉菜单图图8.21七彩的下拉菜单七彩的下拉菜单图图8.22最终效果最终效果8.5 8.5 网民调查问卷实例网民调查问卷实例图图8.23调查问卷调查问卷