《CSS表格和表单.ppt》由会员分享，可在线阅读，更多相关《CSS表格和表单.ppt（30页珍藏版）》请在三一办公上搜索。
1、CSS设置表格和表单,组长 王蓉组员 冯权 于琪炜,参考资料：CSS彻底研究 博客园,表格,控制表格,1.表格中的标记,定义表格的大标题定义表头定义整个表格定义一行定义一个单元格,控制表格,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;,控制表格,设置单元格的边框相邻的单元格有各自的边框，可以在表格样式中增加一个属
2、性设置：border-collapse：collapse;,相邻单元格之间原来的两条边框重合成一条了。,控制表格,相邻边框合并在CSS的规范中对边框合并有以下定义：,a.如果边框的“border-style”设置为“hidden”，那么它的优先级高于 任何其他相冲突的边框。,b.如果边框的属性中有“none”，那么它的优先级最低。,c.如果边框中都没有被设置为“hidden”，并且至少有一个不是“none”，那么重合的边框中粗的优先于细的。,d.如果边框样式的其它设置都相同，只是颜色区别，那么单元格的样式最优先，然后依次是行、行组、列、列组、表格。,控制表格,边框的分离a.对td使用paddi
3、ng，实现cellpadding的作用。,b.对table使用border-spacing，实现cellspacing的作用。,padding值为5px；,控制表格,3.表格宽度的确定,方式一：自动方式（与表格内部的内容相关）它会根据单元格中内容的多少进行调整。不是width属性设置。通常取值为“auto”。（不严格）方式二：固定方式（与表格内部的内容无关）表格的水平布局不依赖于单元格的内容，而明确地由width属性指定。（严格）,这个日历就使用了固定方式。,控制表格,4.其它与表格相关的标记,表头部分表内容部分tbody th/只对中的th产生作用。表注部分 对应于表格中的一列，对需要单独设
4、置的列设置一个类别，然后设置该类别的CSS即可。,GO,美化表格,1.隔行变色,为了避免浏览者看错行的情况，为表格设置隔行变色的效果。在CSS中实现隔行变色的方法很简单，只要给偶数行的标记都添上相应的类型，然后对其进行CSS设置即可。,GO,美化表格,2.鼠标经过变色（高亮）,在Firefox中显示只需要通过CSS的“：hover”伪类便可以达到效果，添加如下代码：tr:hoverbackground-color:#595;color:#fff在IE中显示相比要麻烦些，不仅要设置CSS，还要增加一段javascript代码。当然，在Firefox中也可以显示正常效果。,GO,美化表格,3.二维
5、变色提示,随时以高亮的方式提示一个单元格对应的行号（名）和列号（名）,这里要达到的效果是使鼠标指针经过的单元格，以及该单元格所在的行和列的第一个单元格的背景变色。这个效果单纯使用CSS是无法实现的，必须使用javascript来实现。,GO,多视图模式日历,多视图模式日历中视图模式,1.建立简单的表格，包括标题和表头。,2007年10月 小模式|中模式|大模式星期一星期二星期三星期四星期五星期六星期日,多视图模式日历中视图模式,2.每天的日程放在具体的单元格中。,3112完成书稿第2部分查Javascript相关资料相关资料3456,多视图模式日历中视图模式,3.设置整体样式和表头样式。,.m
6、onth border-collapse:collapse；table-layout:fixed;width:780;.month caption text-align:left;font-family:normal 120%宋体,arial;font-size:12px;font-weight:normal;padding-bottom:6px;.month caption.date font-size:150%;font-weight:bold;.month th border:1px solid#999;border-bottom:none;padding:3px 2px 2px;mar
7、gin:0;background-color:#ADD;color:#333;font:80%宋体;,多视图模式日历中视图模式,4.设置日历单元格样式,.month td border:1px solid#AAA;font:12px 宋体;line-height:16px;padding:2px 2px;margin:0;vertical-align:top;.month td.previous,.month td.next background-color:#eee;color:#A6A6A6;.month td.active background-color:#B1CBE1;border:
8、2px solid#4682B4;,多视图模式日历中视图模式,5.调整单元格，设背景图片,.month ul list-style-type:none;margin:3px;padding:0;.month li color:#fff;background:transparent url(level-2.gif)no-repeat;padding:2px;margin-bottom:6px;height:34px;overflow:hidden;width:100px;.month td li.important background:transparent url(level-1.gif)n
9、o-repeat;,多视图模式日历中视图模式,GO,多视图模式日历小视图模式,1.将宽度变窄，把需要隐藏的内容都隐藏起来。,.monthwidth:245px;.month th span,.month ul display:none;,多视图模式日历小视图模式,2.鼠标经过时弹出信息框,.month td.active:hover,.month td.hover background:aqua;.month td.active:hover ul,.month td.hover ul margin:10px 0 0;border:3px#FFF solid;padding:7px 2px 0
10、5px;background:#bde;display:block;position:absolute;,在IE中需要CSS和javascript配合使用。Firefox中只用CSS就可以达到效果。,多视图模式日历小视图模式,2.鼠标经过时弹出信息框,var days=document.getElementsByTagName(td);for(var i=0;i,多视图模式日历小视图模式,GO,多视图模式日历大视图模式,在要求不修改HTML结构，在此前提下，大视图模式无法在IE浏览器中实现，除非使用javascript动态修改DOM结构，而这和修改HTML结构就没有本质区别了。,Firefox中的显示效果,IE的显示效果,表单,表单标记表单标记：决定该表单的运作模式文字框：提供文字输入栏输入标记：决定输入形式选择标记：建立弹出卷动清单选项：每一个清单选项,改变文本框和文本域样式,GO,用图片美化按钮,GO,用label标签提升用户体验,GO,改变下拉列表样式,默认情况下得select,实现分组的select,联动功能的select,GO,
