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