《CSS表格和表单.ppt》由会员分享，可在线阅读，更多相关《CSS表格和表单.ppt（16页珍藏版）》请在三一文库上搜索。
1、第11 章 CSS表格和表单,王会 wangh-,1.用CSS设置表格样式,1.1 表格标题的位置,CSS属性：caption-side 该属性可以调整表格标题的位置为上、下、左、右，但是只在Firefox、iE8及以上有效，IE8以下不支持。 实例：11-1.html,1.2 表格的颜色,CSS属性：color、background-color 其中，color属性设置表格中文字的颜色，通过background-color属性设置表格的背景颜色。 实例：11-2.html 这些设置与文字本身的CSS设置完全相同，与页面背景的设置也完全一样。,1.3 表格的边框,CSS属性：border、bo
2、rder-collapse 在CSS中通过border属性设置表格边框，设置方法跟图片边框完全一样。特别要注意的是，当仅设置表格的边框时，单元格不会有任何的边框。只有对单元格单独设置边框时，单元格才会有边框。 另外，默认情况下，单元格的边框之间会有空隙，这时需要设置CSS属性border-collapse，使边框重叠在一起。 实例：11-3.html,2.CSS表格实例,2.1 隔行变色的表格,采用隔行变色的表格，使数据一目了然，不会感到凌乱。 在CSS中实现隔行变色十分简单，只需要给偶数行的标记都添加上相应的类型就可以了。 实例：11-4.html,2.2 鼠标经过时变色的表格,如果数据行能
3、够动态地根据鼠标来变色，会使页面充满生机，减少阅读疲劳。 对于Firefox浏览器来说，仅仅通过CSS便可以实现该效果，只需要为标记添加如下代码： .datalist tr:hover background-color:#c4e4ff; /*动态变色*/ 以上代码直接调用标记的伪类别hover来实现变色效果，但IE浏览器并不支持，因此必须采用JavaScript的配合。 实例：11-5.html,2.3 练习表格课表,根据这学期的课程安排，利用CSS表格样式设计一个自己的课表（周课表）： 1.表格居中，有边框和标题，标题左对齐 2.单元格有边框，边框之间没有空隙。 3.不同课程的单元格文字字体
4、、颜色和背景色不同 4.注重颜色搭配和页面美观,2.3 课后练习表格日历,通过CSS设定表格的属性，实现日历效果。,3.用CSS设置表单样式,3.1 设置表单基本样式,利用CSS对标记的控制，同样可以对表单添加简单的样式风格，包括边框、背景色、高度、宽度等，设置方法跟前面的相同。 实例：11-6.html 仔细观察会发现单选项和复选框对于边框的显示效果，在IE和Firefox浏览器中有明显的区别。解决办法是分别给具体的各项添加类别属性，进行单独的设置。这种方法在实际设计中经常使用。 实例11-7.html,4.CSS表单实例,4.1 像文字一样的按钮,通过CSS设置，可以将按钮变得跟普通文字一
5、样。关键在于将按钮的背景色设置为透明“transparent”，这样无论页面body的背景色如何修改，按钮的背景色都会发生相应的变化。最后再单独设置输入框和按钮的边框效果即可。 实例：11-8.html,4.2 七彩的下拉菜单,CSS不仅可以控制下拉菜单的整体字体和边框等，对于下拉菜单中的每一个选项同样可以设置背景色和文字颜色。例如，当需要在下拉菜单中选择相应的颜色时，有这种设置就显得非常方便。 关键的方法是给下拉菜单的每一个标记都设置单独的文字颜色和背景颜色。 实例：11-9.html,4.3 练习直接输入的excel表格,ftp课堂练习下载模拟excel表格，结合CSS控制的表格和表单，实现类似excel表格的效果，每个单元格中可以直接输入内容，最后一并提交。,透明按钮,