当前位置:首页 > DIV+CSS教程 > 正文

视频:第3课 - 设置表格与表单的样式 - CSS/DIV布局专题讲解

作者:曾顺 来源:前沿视频教室 【 】 浏览: 添加日期:2008-06-26 我要评论(5)     

点击在线观看

下载该节视频教程 动力软件园分流下载 FLV播放器下载 或者使用QQ影音播放

表格与表单是网页上最常见的元素,表格除了显示数据外,还常常被用来排版。而表单则作为与用户交互的窗口,时刻都扮演着信息获取和反馈的角色。本课围绕表格和表单介绍CSS设置其样式的方法,以及利用CSS实现各种特效的技巧。

1. 控制表格

表格作为传统的HTML元素,一直受到网页设计者们的青睐。使用表格来表示数据、制作调查表等在网络中屡见不鲜。同时因为表格框架的简单、明了,使用没有边框的表格来排版,也受到很多设计者的喜爱。我们在这里主要介绍CSS控制表格的方法,包括表格的颜色、标题、边框、背景等。希望大家能够掌握以下几个方面的内容:

  • 表格中的标记
  • 表格的颜色
  • 表格的边框

2. 表格实例一:隔行变色

当表格的行列都很多、数据量很大的时候,单元格如果采用相同的背景色,用户在实际使用时会感到凌乱。通常的解决办法就是采用隔行变色,使得奇数行和偶数行的背景颜色不一样,达到数据一目了然的目的。本例最终效果如图所示。

 

3. 表格实例二:鼠标经过时变色的表格

对于长时间审核大量数据、浏览表格的用户来说,即使是隔行变色的表格,阅读时间长了仍然会感到疲劳。如果数据行能够动态的根据鼠标来变色,就使得页面充满了生机,最大程度的减少用户疲倦。

4. 表格实例三:日历

日历是日常生活中必不可少的东西,而作为备忘录的日历在桌面、网络上都越来越流行。通过CSS设定表格的属性,可以很轻松的实现各种日历的效果。我们在这里通过简单的实例,进一步熟练CSS控制表格的各种方法。本例最终效果如图所示。

 

5. CSS与表单

表单是网页与用户交互所不可缺少的元素,传统的HTML中对表单元素的样式控制很少,仅仅局限于功能上的实现。我们在这里围绕CSS控制表单进行详细介绍,包括表单中各个元素的控制,与表格配合制作各种效果等等。希望大家能够掌握以下几个方面的内容:

  • 表单中的元素
  • 像文字一样的按钮
  • 七彩的下拉菜单

6. 综合实例一:直接输入的Excel表格

作为公司、单位的各种年度报表,往往数据量都很大,如果也都像普通表单一样逐项填写,势必造成网页的冗长。而Excel表格在本地机器操作时一直广受好评,通过CSS控制,结合表格和表单,便能轻松实现类似的效果,如图所示。

 

 

7. 综合实例二:模仿新浪网民调查问卷

门户网站上的新闻、事实往往都伴随着各种各样的调查问卷,包括事实的评论、舆论的反馈、事态的预测等等。这些调查问卷都离不开表格与表单的配合使用。本例通过简单的模拟新浪的调查问卷,进一步熟练CSS控制表格、表单的方法。

这个图是新浪网上关于姚明的热点调查,本例通过简单的表格、表单的配合,模拟该调查问卷的效果。

(如果您觉得本站不错,请告诉身边的朋友,或转载到论坛、百度知道、贴吧等,记得带网址哟,不胜感激!)

〖DIV+CSS教程〗Tags: 表单样式 css表单 表格

所属专题:视频教程

更多评论(5)..会员评论

taobiaozhunzhilu(221.222.*.*) 发表于:2010-12-02 16:48:50
通过选择表单下拉菜单的选项可以实现切换页面的效果吗?
管理员回复:可以的
xweiwei56(59.55.*.*) 发表于:2010-05-13 10:36:19
老是下载提示说不能同时下载多个文件,但是我任务栏里已经没有在下载的任务了。 还是提示说只能下载一个。郁闷。
管理员回复:请使用动力软件园分流下载
Guest(114.255.*.*) 发表于:2009-09-08 11:00:35
这两节确实看不到。。网页背景的和这个表格表单样式的。站长快调下吧没发现这两人节根本米人留言吗
管理员回复:部分实例没有做上
ayuyiyi(221.225.*.*) 发表于:2009-05-13 23:56:02
有些实例看不到!如3. 表格实例二:鼠标经过时变色的表格 4. 表格实例三:日历
常客(112.112.*.*) 发表于:2009-04-25 12:52:30
管理员在吗?这个视频问题很大啊在线看不能看下载下来播放器出问题,关闭。。能不能找找问题……
管理员回复:在我这儿测试没问题呀,有一点需要注意,同时只能下载或观看一个视频。某些播放器对此格式不兼容,播放不出画面,请用flv专用播放器

出差旅游免费预订酒店

【视频教程】新手常见问题