CSS表格和表单PPT课件.ppt

CSS设置表格和表单,组长王蓉组员冯权于琪炜,参考资料：CSS彻底研究博客园,表格,控制表格,1.表格中的标记,定义表格的大标题定义表头定义整个表格定义一行定义一个单元格,控制表格,2.表格的边框,.rankingfont:14px宋体;border:2pxorangesolid;text-align:center;border-spacing:10px;.rankingtdborder:1pxorangedashed;.rankingthborder:1pxorangesolid;,控制表格,设置单元格的边框相邻的单元格有各自的边框，可以在表格样式中增加一个属性设置：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.其它与表格相关的标记,表头部分表内容部分tbodyth/只对中的th产生作用。表注部分对应于表格中的一列，对需要单独设置的列设置一个类别，然后设置该类别的CSS即可。,GO,美化表格,1.隔行变色,为了避免浏览者看错行的情况，为表格设置隔行变色的效果。在CSS中实现隔行变色的方法很简单，只要给偶数行的标记都添上相应的类型，然后对其进行CSS设置即可。,GO,美化表格,2.鼠标经过变色（高亮）,在Firefox中显示只需要通过CSS的“：hover”伪类便可以达到效果，添加如下代码：tr:hoverbackground-color:#595;color:#fff在IE中显示相比要麻烦些，不仅要设置CSS，还要增加一段javascript代码。当然，在Firefox中也可以显示正常效果。,GO,美化表格,3.二维变色提示,随时以高亮的方式提示一个单元格对应的行号（名）和列号（名）,这里要达到的效果是使鼠标指针经过的单元格，以及该单元格所在的行和列的第一个单元格的背景变色。这个效果单纯使用CSS是无法实现的，必须使用javascript来实现。,GO,多视图模式日历,多视图模式日历中视图模式,1.建立简单的表格，包括标题和表头。,2007年10月小模式|中模式|大模式星期一星期二星期三星期四星期五星期六星期日,多视图模式日历中视图模式,2.每天的日程放在具体的单元格中。,3112完成书稿第2部分查Javascript相关资料相关资料3456,多视图模式日历中视图模式,3.设置整体样式和表头样式。,.monthborder-collapse:collapse；table-layout:fixed;width:780;.monthcaptiontext-align:left;font-family:normal120%宋体,arial;font-size:12px;font-weight:normal;padding-bottom:6px;.monthcaption.datefont-size:150%;font-weight:bold;.monththborder:1pxsolid#999;border-bottom:none;padding:3px2px2px;margin:0;background-color:#ADD;color:#333;font:80%宋体;,多视图模式日历中视图模式,4.设置日历单元格样式,.monthtdborder:1pxsolid#AAA;font:12px宋体;line-height:16px;padding:2px2px;margin:0;vertical-align:top;.monthtd.previous,.monthtd.nextbackground-color:#eee;color:#A6A6A6;.monthtd.activebackground-color:#B1CBE1;border:2pxsolid#4682B4;,多视图模式日历中视图模式,5.调整单元格，设背景图片,.monthullist-style-type:none;margin:3px;padding:0;.monthlicolor:#fff;background:transparenturl(level-2.gif)no-repeat;padding:2px;margin-bottom:6px;height:34px;overflow:hidden;width:100px;.monthtdli.importantbackground:transparenturl(level-1.gif)no-repeat;,多视图模式日历中视图模式,GO,多视图模式日历小视图模式,1.将宽度变窄，把需要隐藏的内容都隐藏起来。,.monthwidth:245px;.monththspan,.monthuldisplay:none;,多视图模式日历小视图模式,2.鼠标经过时弹出信息框,.monthtd.active:hover,.monthtd.hoverbackground:aqua;.monthtd.active:hoverul,.monthtd.hoverulmargin:10px00;border:3px#FFFsolid;padding:7px2px05px;background:#bde;display:block;position:absolute;,在IE中需要CSS和javascript配合使用。Firefox中只用CSS就可以达到效果。,多视图模式日历小视图模式,2.鼠标经过时弹出信息框,vardays=document.getElementsByTagName(td);for(vari=0;i,多视图模式日历小视图模式,GO,多视图模式日历大视图模式,在要求不修改HTML结构，在此前提下，大视图模式无法在IE浏览器中实现，除非使用javascript动态修改DOM结构，而这和修改HTML结构就没有本质区别了。,Firefox中的显示效果,IE的显示效果,表单,表单标