用CSS设置表格与表单.ppt

第6章 用CSS设置表格与表单 6.1 控制表格 表格是网页制作时非常重要的技巧，在许多网站开发中 都用表格来构建网站的总体布局或者使用表格来创建多种表 格应用。在html语法中，表格的建立将运用table、tr、 th和td四个标记。 6.1.1 表格中的标记 6.1.2 表格颜色 表格中文字的颜色通过color属性设置,背景颜色通过 background-color设置. th{ color:#003300 background-color:#7bb3ff } 观察下面两个表格，前者单元格的边框之间有空隙， 这时候需要设置css中整个表格的border-collapse属性， 使得边框重叠在一起，显示如后者表格效果．例如； .datalist{ 　　border:1px solid #429fff; /* 表格边框 */ 　　font-family:Arial; 　　border-collapse:collapse; 　　　/* 边框重叠 */ 　　　　} 6.2 表格实例一：隔行变色 　　当表格的行和列很多，并且数据量很大的时候，单元格 如果采用相同的背景色，用户在实际使用时会感到凌乱．通 常的解决办法是采用隔行变色，使得奇数行和偶数行的背景 颜色不一样．在CSS中实现隔行变色十分简单,只要给偶数行 的tr标记都添加上相应的类型即可. tr.altrow{ background-color:#c7e5ff; } table tr td/td……/tr tr class=“altrow” td /td…… /tr …… /table 6.3 表格实例二：鼠标经过变色的表格 对于长时间审核大量数据和浏览表格的用户来说，即使 是隔行变色，阅读时间长了仍然会感到疲劳或发生串行。如 果数据行能够动态的根据鼠标来变色，就会使页面充满生机. 对于IE浏览器，需要采用JavaScript动态配合，判断鼠标 指针是否移动到了某行上，如果移动到了某行上，则调用新 的CSS属性使该行背景变色。 script language=javascript var rows = document.getElementsByTagName(tr); for (var i=0;irows.length;i++) { rows[i].onmouseover = function( ) { this.className += altrow; //鼠标在行上面的时候 } rows[i].onmouseout = function( ) { //鼠标离开时 this.className = this.className.replace(altrow, ); } } /script 6.4 表格实例三：日历 日历是日常生活中必不可少的，作为备忘录的日历在桌面 和网络上都越来越流行，通过CSS设定表格的属性，可以很轻 松的实现各种日历效果。 6.5 CSS与表单 表单是网页与用户交互所不可缺少的元素,在传统的HTML 中对表单元素的样式控制很少,仅仅局限于功能上的实现.利用 CSS对表单中的各个元素进行控制,与表格配合制作各种效果. 6.5.1 表单中的元素 style form{border:1px dotted #aaaaaa; padding:3px 6px 3px 6px; margin:0px; font:14px Arial;} input{color:#00008b; background-color:#add8e6; border:1px solid #000008b;} select{width:80px; color:#00008b; background-color:#add8e6; border:1px solid #00008b;} textarea{width:200px; height:40px; color:#00008b; background-color:#add8e6; border:1px solid #00008b;} /style 6.5.2 像文字一样的按钮 按钮之所以称之按钮,并不是因为它的形状,而是因为它的 功能.通过CSS设置