设置表格与表单的样式 - CSS/DIV布局专题讲解 - 第3课
本节课时长12分0秒,下载文件12.1兆字节。下载的视频文件为FLV格式,推荐使用“Riva Flv Player”软件播放,点击这里下载。
表格与表单是网页上最常见的元素,表格除了显示数据外,还常常被用来排版。而表单则作为与用户交互的窗口,时刻都扮演着信息获取和反馈的角色。本课围绕表格和表单介绍CSS设置其样式的方法,以及利用CSS实现各种特效的技巧。
1. 控制表格
表格作为传统的HTML元素,一直受到网页设计者们的青睐。使用表格来表示数据、制作调查表等在网络中屡见不鲜。同时因为表格框架的简单、明了,使用没有边框的表格来排版,也受到很多设计者的喜爱。我们在这里主要介绍CSS控制表格的方法,包括表格的颜色、标题、边框、背景等。希望大家能够掌握以下几个方面的内容:
- 表格中的标记
- 表格的颜色
- 表格的边框
2. 表格实例一:隔行变色
当表格的行列都很多、数据量很大的时候,单元格如果采用相同的背景色,用户在实际使用时会感到凌乱。通常的解决办法就是采用隔行变色,使得奇数行和偶数行的背景颜色不一样,达到数据一目了然的目的。本例最终效果如图所示。
3. 表格实例二:鼠标经过时变色的表格
对于长时间审核大量数据、浏览表格的用户来说,即使是隔行变色的表格,阅读时间长了仍然会感到疲劳。如果数据行能够动态的根据鼠标来变色,就使得页面充满了生机,最大程度的减少用户疲倦。
4. 表格实例三:日历
日历是日常生活中必不可少的东西,而作为备忘录的日历在桌面、网络上都越来越流行。通过CSS设定表格的属性,可以很轻松的实现各种日历的效果。我们在这里通过简单的实例,进一步熟练CSS控制表格的各种方法。本例最终效果如图所示。
5. CSS与表单
表单是网页与用户交互所不可缺少的元素,传统的HTML中对表单元素的样式控制很少,仅仅局限于功能上的实现。我们在这里围绕CSS控制表单进行详细介绍,包括表单中各个元素的控制,与表格配合制作各种效果等等。希望大家能够掌握以下几个方面的内容:
- 表单中的元素
- 像文字一样的按钮
- 七彩的下拉菜单
6. 综合实例一:直接输入的Excel表格
作为公司、单位的各种年度报表,往往数据量都很大,如果也都像普通表单一样逐项填写,势必造成网页的冗长。而Excel表格在本地机器操作时一直广受好评,通过CSS控制,结合表格和表单,便能轻松实现类似的效果,如图所示。
7. 综合实例二:模仿新浪网民调查问卷
门户网站上的新闻、事实往往都伴随着各种各样的调查问卷,包括事实的评论、舆论的反馈、事态的预测等等。这些调查问卷都离不开表格与表单的配合使用。本例通过简单的模拟新浪的调查问卷,进一步熟练CSS控制表格、表单的方法。
这个图是新浪网上关于姚明的热点调查,本例通过简单的表格、表单的配合,模拟该调查问卷的效果。
61,054




[…] 第6课 设置表格与表单的样式 […]
我们学校发的书 ,没带光盘的,求发一份。谢谢!
www.aoatrade.com,wholesale iPhone 4,The North Face Down Coat,Moncler Down Coat,Columbia Coat,Coach handbags,Ozark CoatPaypal payment http://shop36582627.taobao.com/热卖创意日用品
Many thanks for getting some time to discuss this, I feel strongly about it and adore understanding much more with this topic. If doable, as you acquire expertise, can you mind updating your blog with far more info? It鈥檚 extremely helpful to me come to think of that , i never considered it in that way before.
asp.net css…
设置表格与表单的样式 - CSS/DIV布局专题讲解 - 第3课 - CSS,Javascript,jQuery,视频教程 … says it all, the rest i found gibberish….
我想要全部的素材啊 可以加我qq啊 大哥 我也想多交流下
有没有素材 啊啊 我买过这本书 但是光盘丢了 能发给我素材还有word文档的稿子吗 谢谢感激
看不了~~~~~~~
en~挺好的!
以前买过精通css+div这本书,但是以为没用,就没有好好学。现在用到了我不会。现在学,这本书真的有用吗?
很好、最近在学习CSS+Div技巧 谢谢
一般都倒着念,呵呵
你的网站真好啊。呵呵,也很实用!
这课怎么没有讲到那个模仿新浪网民调查问卷啊?
经常看到网上一些像WEB.QQ.COM那样的悬浮窗口是怎么实现的?
那个是用+AJAX做的
还有TAB菜单
隔行变色 、鼠标经过时变色的表格 、自由变换的网页、直接输入的Excel表格、Ajax 这些有没有源文件?买的光碟破裂了,读不了盘。
div到底怎样学好!
,是当当看文字的好像不是很清楚,只能把文字和视频放在一起才能刚好的学习!
丽榕,
您是说图书和教学视频配合学习比较好吗?这是我们的出发点。希望对您的学习有所帮助!
呵呵。讲得有点不太详细哦。。。
如果将表单讲得详细一些或许学习起来更有效果
crazycode,
谢谢您的留言,以后再做的时候,我们会做一些更详细的!
请问 有没有原文件呢
很好
邓旭,
感谢您的支持!欢迎常来这里交流!
我在当当买了,可是光碟是破裂的,读不了,后来我用透明胶布把它贴好,放到光驱里读,读了一会全部破碎在里面,吓了我一跳,还好光驱没坏。害得我光驱里面的东西都没有。
小龙,
我给你回邮件了,请查收。
教程不错,我也从卓越上订购了一本,还免邮费,不错!!
soxohe,
谢谢您的支持,在学习中遇到问题,欢迎来这里交流!
谢谢老师,讲的太好了,不过老师我是初学者啊,虽然有很多地方有突然弄透彻的感觉,但是,还是感觉讲解的太快了,我很想好好看看,表格表单那块,因为这块一直是我的弱项,可是您好像讲的太快了,我想好好学学!
雨如,
另外还有一套教程《CSS设计彻底研究》有一章也势关于表格的,您可以参考。
http://learning.artech.cn/20070430.css-reserch-content-table.html
如果感觉还有困难,可以看一看我们的图书,那里面有文字的讲解,可能对您的理解更有帮助一些。
谢谢您的留言!
老师,说得太快了,能不能把代码重新演示一遍,或者做成像演示文稿一样的文件,可以打开自己查看代码,不然代码没看清楚就讲完了,尽管您讲得很好,但对于初学者来说还是吃力了点呀!
piaopiao,
目前这套教程是比较简单的,是配合书的,如果您觉得合适,不妨配和书一起学。我们以后也会考虑制作向您说的那样的,非常详细,完全不需要书的视频教程,不过目前还没有推出来,抱歉。
本前都发现了这个视频教程,不过没有不过这个网站,不错
对DIV+CSS有一定的提高,~~
有些CSS,在DW中,我无法实现,怎么办呢?
goodsohu,
不用管在Dreamweaver中的效果,一切以浏览器中的效果为准。把Dreamweaver当作一个代码编辑器即可了。
老师,您好!
请问下您课里面的,那些用来讲解的实例可以下吗?因为有的课程中您只给出了效果图,而具体的操作我弄不懂,所以想把那个下下来.
谢谢!
你好,您讲解的速度太快了,都来不及看来不及听。能慢些吗?而且什么叫书上都有。我拿着书听你说都来不及,希望能改进一下
tianshen1944,
呵呵,谢谢您的建议。我们以后会出一些超级详细,甚至不用看书,一步一步跟着就可以做的视频,不过我们人手有限,这个目前是个计划。
现在的视频,您重点把概念理解清楚,具体的操作,还是看书吧。书这个东西,不想网络,做一本书,就不能改,因此必须要在有限的条件下适合更多的人,您知道一本书有上万读者,要求差距很大,我们只能根据现有的条件,仅可能做到最好。书上的视频并不是说就不用看书了,学习任何技术都不是一个轻松的事情。如果跟着书学习有困难,也可以找一个培训班等等,有老师面对面教学,学起来可能更容易一些。
老师,您好,请问如果在一个页面中有两张表。第一张表实现隔行变色,但鼠标经过是不变色的。第二张表实现鼠标经过变色但不是隔行变色的效果。请问怎么样实现呢?
kodak,
用不同的id区分就可以。这就是CSS的选择其的基本功能。各管各的,不会互相干扰。
偶然的机会看到了这个网址。看了几个视频真的是受益匪浅。支持你们。
jhanlove ,
谢谢您的鼓励!欢迎您常来交流!
书那有卖的
小晴 ,
地面书店的话,一般大一些的城市买计算机书比较集中的书店都有卖的,或者在网上购买,很方便,还可以打折,您看这里。
讲解的非常好
a风 ,谢谢您的肯定!喜欢您就多学点,希望您能学到希望掌握的技术!
讲解很好,我喜欢
因为在公司。所以不方面看。看他们的评论。看来一定很精彩哦。下班后一定不能错过。 破不急待哦。