CSS表格和表单

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