div网页设置表格与表单的样式 - CSS+DIV网页设计布局专题讲解 - 第3课
2. 表格实例一:隔行变色
当表格的行列都很多、数据量很大的时候,单元格如果采用相同的背景色,用户在实际使用时会感到凌乱。通常的解决办法就是采用隔行变色,使得奇数行和偶数行的背景颜色不一样,达到数据一目了然的目的。本例最终效果如图所示。
3. 表格实例二:鼠标经过时变色的表格
对于长时间审核大量数据、浏览表格的用户来说,即使是隔行变色的表格,阅读时间长了仍然会感到疲劳。如果数据行能够动态的根据鼠标来变色,就使得页面充满了生机,最大程度的减少用户疲倦。
4. 表格实例三:日历
日历是日常生活中必不可少的东西,而作为备忘录的日历在桌面、网络上都越来越流行。通过CSS设定表格的属性,可以很轻松的实现各种日历的效果。我们在这里通过简单的实例,进一步熟练CSS控制表格的各种方法。本例最终效果如图所示。
5. CSS与表单
表单是网页与用户交互所不可缺少的元素,传统的HTML中对表单元素的样式控制很少,仅仅局限于功能上的实现。我们在这里围绕CSS控制表单进行详细介绍,包括表单中各个元素的控制,与表格配合制作各种效果等等。希望大家能够掌握以下几个方面的内容:
- 表单中的元素
- 像文字一样的按钮
- 七彩的下拉菜单
6. 综合实例一:直接输入的Excel表格
作为公司、单位的各种年度报表,往往数据量都很大,如果也都像普通表单一样逐项填写,势必造成网页的冗长。而Excel表格在本地机器操作时一直广受好评,通过CSS控制,结合表格和表单,便能轻松实现类似的效果,如图所示。
7. 综合实例二:模仿新浪网民调查问卷
门户网站上的新闻、事实往往都伴随着各种各样的调查问卷,包括事实的评论、舆论的反馈、事态的预测等等。这些调查问卷都离不开表格与表单的配合使用。本例通过简单的模拟新浪的调查问卷,进一步熟练CSS控制表格、表单的方法。
这个图是新浪网上关于姚明的热点调查,本例通过简单的表格、表单的配合,模拟该调查问卷的效果。
原文地址:http://www.35ui.cn/post/20100421865.html 标签:北京网页制作网页平面设计培训css网页培训班网站模板设计做网站个人ps切图div网站建设培训上一条: 网页培训设置网页背景- CSS/DIV网页设计布局专题讲解 - 第3课
下一条: 网页div设计培训页面和浏览器的元素 - CSS+DIV网页布局专题 - 第5课