CSS表格和表单.ppt.ppt

CSS设置表格和表单 组长 王蓉 组员 冯权 于琪炜 表格 控制表格 控制表格 控制表格 控制表格 控制表格 控制表格 控制表格 美化表格 美化表格 美化表格 多视图模式日历 多视图模式日历—中视图模式 多视图模式日历—中视图模式 多视图模式日历—中视图模式 多视图模式日历—中视图模式 多视图模式日历—中视图模式 多视图模式日历—中视图模式 多视图模式日历—小视图模式 多视图模式日历—小视图模式 多视图模式日历—小视图模式 多视图模式日历—小视图模式 多视图模式日历—大视图模式 表单 改变文本框和文本域样式 用图片美化按钮 用label标签提升用户体验 参考资料：《CSS彻底研究》 博客园 1.表格中的标记 caption定义表格的大标题 th定义表头 table定义整个表格 tr定义一行 td定义一个单元格 2.表格的边框 .ranking{ font: 14px 宋体; border:2px orange solid; text-align:center; border-spacing:10px;} .ranking td{ border:1px orange dashed;} .ranking th{ border:1px orange solid;} 设置单元格的边框 相邻的单元格有各自的边框，可以在表格样式中增加一个属性设置： border-collapse：collapse; 相邻单元格之间原来的两条边框重合成一条了。 相邻边框合并 在CSS的规范中对边框合并有以下定义： a. 如果边框的“border-style”设置为“hidden”，那么它的优先级高于 任何其他相冲突的边框。 b. 如果边框的属性中有“none”，那么它的优先级最低。 c. 如果边框中都没有被设置为“hidden”，并且至少有一个不是“none”，那么重合的边框中粗的优先于细的。 d. 如果边框样式的其它设置都相同，只是颜色区别，那么单元格的样式最优先，然后依次是行、行组、列、列组、表格。 边框的分离 a. 对td使用padding，实现cellpadding的作用。 b. 对table使用border-spacing，实现cellspacing的作用。 padding值为5px； 3.表格宽度的确定 方式一：自动方式（与表格内部的内容相关） 它会根据单元格中内容的多少进行调整。不是width属性设置。通常取值为“auto”。（不严格） 方式二：固定方式（与表格内部的内容无关） 表格的水平布局不依赖于单元格的内容，而明确地由width属性指定。（严格） 这个日历就使用了固定方式。 4.其它与表格相关的标记 thead表头部分 tbody表内容部分 tbody th{}//只对tbody中的th产生作用。 tfoot表注部分 col 对应于表格中的一列，对需要单独设置的列设置一个类别，然后设置该类别的CSS即可。 GO 1.隔行变色 为了避免浏览者看错行的情况，为表格设置隔行变色的效果。 在CSS中实现隔行变色的方法很简单，只要给偶数行的tr标记都添上相应的类型，然后对其进行CSS设置即可。 GO 2.鼠标经过变色（高亮） 在Firefox中显示 只需要通过CSS的“：hover”伪类便可以达到效果，添加如下代码： tr:hover{background-color:#595;color:#fff} 在IE中显示 相比要麻烦些，不仅要设置CSS，还要增加一段javascript代码。当然，在Firefox中也可以显示正常效果。 GO 3.二维变色提示 随时以高亮的方式提示一个单元格对应的行号（名）和列号（名） 这里要达到的效果是使鼠标指针经过的单元格，以及该单元格所在的行和列的第一个单元格的背景变色。 这个效果单纯使用CSS是无法实现的，必须使用javascript来实现。 GO 1.建立简单的表格，包括标题和表头。 table class=month summary=Calendar for 2007.10 captionspan class=date2007年10月 /span a href=calendar-small.html小模式/a | a中模式/a | a href=calendar-large.html大模式/a/caption tr th scope=colspan星期/span一/th th scope=colspan星期/span二/th th scope=colspan星期/