第六章 用css设置表格与表单的样式.pptVIP

第六章用CSS设置表格与表单的样式 6.1.1 表格中的标记 表格中的标记 参考实例：6-1.html 6.1.2 表格中的属性 表格中的属性 summary：用于概况整个表格的内容。浏览页面时不可见，对搜索引擎十分重要。例:summary=“2010-2011学期课程表” border：设置表格的边框。 bgcolor：设置背景色 bordercolor：设置边框色 cellpadding：设置单元格内容和边框之间的距离。 cellspacing：设置相邻单元格边框之间的距离。 6.1.2 表格中的属性 表格中的属性 scope：专门用来区分行名称col或列名称row。 caption-side：调整标题的位置（Firefox有效），其取值为：bottom|top|left|right|inherit。 colspan：一行跨多列 rowspan：一列跨多行 6.1.3 表格的颜色 在CSS中设置表格的颜色 color：设置表格中文字的颜色 background-color：设置表格的背景颜色 参考实例：6-2.html 6.1.4 表格的边框 在CSS中设置表格的边框 border：其设置方法同图片边框的设置方法。 border-collapse：使表格边框重叠（合并）。 参考实例：6-3.html 6.1.5 表格的宽度 在CSS中设置表格的宽度 CSS提供了两种确定表格以及内部单元格宽度的方式。一种与表格内部的内容相关，称为“自动方式”；一种与内容无关，称为“固定方式”。 table-layout：将它设置为“fixed”即为固定方式；设置为“auto”时则为自动方式。浏览器默认使用自动方式。 6.2 实例3:日历 日历是日常生活中必不可少的，而作为备忘录的日历在桌面和网络上都越来越流行。通过CSS设定表格的属性，可以很轻松的实现各种日历的效果。 参考实例：自制日历.html 6.3 CSS控制表单 表单是网页与用户交互所不可缺少的元素，传统的HTML对表单元素的样式控制很少，仅仅局限于功能上的实现。 本节围绕CSS控制表单进行详细介绍，包括表单中各个元素的控制，与表格配合制作各种效果等等。 表单案例 6.3.1 表单中的标记 表单中的标记 6.3.2 表单中的元素 表单中的元素 输入框、文本框、单选项、复选框、下拉菜单和按钮等。 参考实例：表单.htm 6.3.2 表单中的元素 CSS修饰过的表单 6.3.2 表单中的元素 复习html中的各个元素标记的用法 通过CSS对表单中的各个元素进行设置 文字 边框 背景色 宽度 高度 6.3.3 案例分析1 制作像文字一样的按钮（按钮隐藏） 按钮之所以被称之为“按钮”，并不是因为它的形状，而是因为它的功能。通过CSS设置，可以将按钮变成跟普通文字一样。 关键：将按钮的背景颜色设为透明，边框设置为0。 参考实例：6-9.html 6.3.3 案例分析2 制作七彩的下拉菜单 CSS不仅可以控制下拉菜单的整体字体和边框等，对于下拉菜单中的每一选项同样可以设置背景色和文字颜色。 关键：为每个下拉选项添加对应的CSS样式，主要是文字和背景颜色的设置。 参考实例：6-10.html 6.4 综合实例 直接输入的excel表格（6-11.html） 模仿新浪网民调查问卷（6-12.html） * 网络工程系 张红芳 qq：162038565 Tel主要内容： CSS控制表格的方法 表格实例 CSS控制表单的方法 表单实例 重点：CSS设置表格与表单的方法 table /table 表格开始与结束标记 caption /caption 表格标题标记 tr /tr 行标记 th /th 表头标记 td /td 单元格标记 思考： 字体颜色如何设置？ 注意：表格边框与单元格边框的区别？ 6.2 实例1:隔行变色 当表格的行和列都很多，数据量很大的时候，单元格如果采用相同的背景色，用户在实际使用时会感到凌乱。通常的解决办法就是采用隔行变色，使得奇数行和偶数行的背景颜色不一样，达到数据一目了然的目的。如图所示： 参考实例：6-4.html form …/form 表单开始与结束标记 input…/input 表单输入标记 select 菜单和列表标记 option…/option 菜单和列表项标记 /select textarea…/textarea 文字域标记 .txt{ border-bott