CSS表格和表单

CSS设置表格和表单 组长王蓉组员冯权于琪炜 参考资料 CSS彻底研究 博客园 表格 控制表格 1 表格中的标记 定义表格的大标题定义表头定义整个表格定义一行定义一个单元格 控制表格 2 表格的边框 ranking font 14px宋体 border 2pxorangesolid text align center border spacing 10px rankingtd border 1pxorangedashed rankingth border 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 hover background color 595 color fff 在IE中显示相比要麻烦些 不仅要设置CSS 还要增加一段javascript代码 当然 在Firefox中也可以显示正常效果 GO 美化表格 3 二维变色提示 随时以高亮的方式提示一个单元格对应的行号 名 和列号 名 这里要达到的效果是使鼠标指针经过的单元格 以及该单元格所在的行和列的第一个单元格的背景变色 这个效果单纯使用CSS是无法实现的 必须使用javascript来实现 GO 多视图模式日历 多视图模式日历 中视图模式 1 建立简单的表格 包括标题和表头 2007年10月小模式 中模式 大模式星期一星期二星期三星期四星期五星期六星期日 多视图模式日历 中视图模式 2 每天的日程放在具体的单元格中 3112完成书稿第2部分查Javascript相关资料相关资料3456 多视图模式日历 中视图模式 3 设置整体样式和表头样式 month border collapse collapse table layout fixed width 780 monthcaption text align left font family normal120 宋体 arial font size 12px font weight normal padding bottom 6px monthcaption date font size 150 font weight bold monthth border 1pxsolid 999 border bottom none padding 3px2px2px margin 0 background color ADD color 333 font 80 宋体 多视图模式日历 中视图模式 4 设置日历单元格样式 monthtd border 1pxsolid AAA font 12px宋体 line height 16px padding 2px2px margin 0 vertical align top monthtd previous monthtd next background color eee color A6A6A6 monthtd active background color B1CBE1 border 2pxsolid 4682B4 多视图模式日历 中视图模式 5 调整单元格 设背景图片 monthul list style type none margin 3px padding 0 monthli color fff background transparenturl level 2 gif no repeat padding 2px margin bottom 6px height 34px overflow hidden width 100px monthtdli important background transparenturl level 1 gif no repeat 多视图模式日历 中视图模式 GO 多视图模式日历 小视图模式 1 将宽度变窄 把需要隐藏的内容都隐藏起来 month width 245px monththspan monthul display none 多视图模式日历 小视图模式 2 鼠标经过时弹出信息框 monthtd active hover monthtd hover background aqua monthtd active hoverul monthtd hoverul margin 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的显示效果 表单 表单标记