CSS设置表格与表单样式.pptVIP

  • 11
  • 0
  • 约3.6千字
  • 约 17页
  • 2019-01-08 发布于湖北
  • 举报
第6章 CSS设置表格与表单样式 学习目标 什么是表格模型 对数据表格应用样式。 创建简单和复杂的表单布局 对各种表单元素应用样式。 掌握CSS中用列表制作各种菜单的方法。 ppt中所有实例参考网页设计与制作电子教材及源代码 6.1.1 表格模型 虽然我们不需要表格来进行网页布局了,但很多表格式的数据,还是需要表格这一形式发挥它的作用! table caption/caption trth/th… /tr trtd/td… /tr … /table 另外可以通过theadtbodytfood元素将表格行聚类为组,可以构成更复杂的表格。 6.1.1 表格模型 thead用于指定表格标题行,如果打印的表格超过一页纸, thead应该在每个页面顶端出现。 tbody表格正文部分,将相关行集合在一起。一个表格可以有一个或多个tbody部分。 tfood是表格标题行的低端补充,它是一组作为脚注的行,如果表格横跨多个页面,也应该重复。 他们不但用于网页的分块显示,还能用来做表格的分页打印,就是表格自动分页的时候每页 都带表头thead和表底tfoot。 例如: 6.1.1 表格模型 table caption一周安排表/caption thead tr th/thth星期一/thth星期二/thth星期三/thth星期四/thth星期五/th /tr /thead tbody trth上午/thtd学习/tdtd/tdtd学习/tdtd/tdtd/td /tr trth下午/thtd/tdtd游戏时间/tdtd/tdtd/tdtd/td /tr trth晚上/thtd/tdtd学习/tdtd/tdtd休息时间/tdtd/td /tr /tbody /table 6.1.1 表格模型 table{ caption-side:left; } 设置标题caption的位置,但ie浏览器不支持,默认位置是在表格上面居中显示。 th的scope属性: scope?属性??定义了行或列的表头?   scope可以定义行或列的表头?   取值?   col?-?定义列表头?   row?-?定义行表头?   colgroup?-?定义列组的表头信息,是column?group的缩写?   rowgroup?-?定义行组的表头信息,是row?group的缩写? 6.1.1 表格模型 summary?属性??代表HTML表格的摘要?   表格不仅可以有标题caption,还可以有一个摘要说明summary。摘要是不会显示出来的,通常是给一些其它的工具使用的,比如盲人阅读器等。  由于摘要summary不会显示在浏览器中,所以可以尽可能的使摘要描述足够长,这样更有利于那些通过“听”的浏览者了解你的table表格。 6.1.1 表格模型 HTML代码中没有任何表现的部分,不设置边距,定义表格边线,色彩等。所有表现的内容都分离到CSS里去。 body { ????line-height:?20px; } #MrJin_a { ????font-size:?12px; ????background:?#fff; ????margin:?45px; ????width:?480px; ????border-collapse:?collapse; ????text-align:?left; } 6.1.2表格的颜色 表格颜色的设置与文字颜色的设置完全一样,通过color属性设置表格中文字的颜色,通过background属性设置表格的背景颜色。 如文件Sample6-2.html所示: 6.1.3表格的边框 在CSS中设置边框同样是通过border属性,设置方法跟图像的边框完全一样,只不过在表格中需要特别注意单元格之间的关系,需要为单元格也单独设置相应的边框。 如文件Sample6-3.html所示: 应用实例: 表格实例1—隔行变色(文件Sample6-4.html) 表格实例2—鼠标经过时变色的表格(文件Sample6-5.html) 表格实例3—日历(文件Sample6-6.html) CSS与表单 表单是网页与用户交互不可缺少的元素,在传统的HTML中对表单元素的样式控制很少,仅局限于功能上的实现 表单中的元素很多,包括常用的输入框、文本框、单选钮、复选框、下拉菜单和按钮等。 CSS与表单 CSS与表单 实例: 表单元素文件Sample6-7.html 彩色的下拉菜单 综合实例—模仿新浪网民调查问卷(文件Sample6-9.html) * * table?id=MrJin_a?summary=关于www.52css.ocm网站的一些数据 ???

文档评论(0)

1亿VIP精品文档

相关文档