仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 921|回复: 8
打印 上一主题 下一主题

[DIV+CSS] 来谈谈:8个计划标准的表格Table CSS款式使用

[复制链接]
逍遥一派 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 00:07:33 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
目前我们的站就是div+CSS做的,美工可以通过css直接控制我的程序输出的页面动态数据的样式DIV就只是布局元素.
假如说是Table把我带进了网站计划的年夜学的话,那末DIV+CSS则把我带进了Web计划的殿堂。固然如今的Web计划者都在推许DIV+CSS的网站计划,但不落进自觉使用的行列,天真使用Table的特征来做一些前台的功效效果的话,那大概会让你的事情历程年夜年夜的延长,并削减良多不用要的冗余CSS代码。
Table表格自己就是Html网站计划中最基础的构成部分,还记得刚入手下手在FrontPage里欣喜地用一个Table框画出的复杂页面吗?当时的我们就已在为Table的无所事事而服气了。而在如今的DIV+CSS页面计划中,良多人将Table的观点抛之脑后,一切利用DIV+CSS来完成一切页面排版,从而,在一些列表计划中凭白增添了CSS代码的比重,实在,天真地把Talbe使用到DIV+CSS网页尺度中往,会受害更多。
本文菠菜汇集先容了一系列的Table计划及使用技能,但愿在你的项目开辟中能够很好地融汇使用出来,进步你的页面天真度和可读性。
让我们从一个简便的Table计划实例入手下手吧!
1,FLUIDMIND.ORG


这是一个十分复杂的table使用的例子,它的1px边框及行列的长宽设置使得全部的表格体现出来的内容更直不雅易读。


这个table是对下面谁人的改善,增添了背景致并削减了横向border的数目,使得表格数据垂直偏向的对照性更强。

这个table则对下面效果的横向可读性作了改善,经由过程为header设置相对其他元素更加凸起的背景致完成。

经由过程设置橙色和table外部的虚线框,使得table的表面更具视觉辨识度。

利用单双行间的瓜代色进步table的可读性。这类效果更合适浏览习气,加重视觉委靡。

这类计划利用距离色和凸起的header背景致,更合适data显现。

2,MOTHERRUSSIA.POLYESTER.SE
这是一个利用jQuery创建表格的使用,这个TablejQuery插件计划的也长短常的复杂易用,。

在这个计划中,利用了黑底白字的显现效果,而且将header行用突变的对照色、分类图标和内容块辨别开来,该计划最特征的功效就是,利用jQueryTableSorterPager能够将每列的数据举行递增和递加排序。
文档地点:http://motherrussia.polyester.se/docs/tablesorter/

3,EXTJS
ExtJS号称是Cross-BrowserRichInternetApplicationFramework(跨扫瞄器的Internet多使用框架),的确,这个table项目真的十分的壮大,看看它的演示效果就晓得了。


这是一个XMLGrid实例,告知你怎样loadXML数据构成grid。这个table有蓝色和灰色两种作风。你能够点击这里检察实例演示。

这是另外一个来自ExtJS的table计划实例。这个实例教你怎样创立一个能够举行单位格编纂功效的table。一切的table内容全体能够由你来界说。你能够点击这里检察实例演示。

4,ZAPATEC

很喜好这个table计划效果,包含它的3D效果和天真的可操纵性,都让我蔚为大观。这个table的边框计划的很好,使全部的table看起来有了3D效果。另有header的背景图计划和以后操纵行的凸起色采都长短常的到位。
实例演示地点:点击这里检察

5,VALIDWEB.NL

又一个单双行瓜代色利用的table计划,全部的鼠标操纵事务的款式做的很不错。点击这里检察一个实例。

6,VEERLE.DUOH.COM

来自出名博客Veerle.com的一个table计划实例,除很好的色采搭配外,其可用性也长短常的好。
具体的文档可参考博客原文:http://veerle.duoh.com/blog/comments/a_css_styled_table/

7,ASKTHECSSGUY.COM

这个计划充实使用了橙色素的对照度,来辨别heade行和第一列。假如你是要在一个年夜的table中,凸起显现一个单位格数据的话,这个效果就十分的有效了。当鼠标点击某一个单位格时,该单位格的款式会凸起显现。实例的终极演示效果,检察这里。

8,SMASHINGMAGAZINE.COM
这是一个来自出名的手艺博客SMASHINGMAGAZINE的一个table使用项目,该项目把table的应当发扬到了一个如火纯清的境地,有良多有用的例子可供参考。



最初,告知人人一个链接地点http://icant.co.uk/csstablegallery/-该网站收拾里十分多的CSSTable计划实例,在你举行table计划时,无妨先往看看他人的器材。文章翻译收拾自:30+NicestTableCSSDesignsYouCanApplyIntoYourProject。

搜索引擎更加友好。相对与传统的table,采用DIV+CSS技术的网页,对于搜索引擎的收录更加友好。
分手快乐 该用户已被删除
沙发
发表于 2015-1-18 05:15:41 | 只看该作者
dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS,三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。
小妖女 该用户已被删除
板凳
发表于 2015-1-25 22:21:23 | 只看该作者
时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上
地板
发表于 2015-2-4 11:15:27 | 只看该作者
是当我和赵丽芬崔明艳老师进行交流后,很快就了解了还不太清楚的内容和并不了解的知识(像布局表格、绘制布局单元格等)。
精灵巫婆 该用户已被删除
5#
发表于 2015-2-9 22:20:42 | 只看该作者
布局表格、绘制层、制作CSS样式表等,这些内容迷糊了我的视线,真是没想到制作一个精巧别致的网页是如此的困难,可是心有不甘。
飘飘悠悠 该用户已被删除
6#
发表于 2015-2-28 01:27:14 | 只看该作者
所见则所得网页编辑器的优点就是直观性,使用方便,容易上手.
若天明 该用户已被删除
7#
发表于 2015-3-9 18:50:01 | 只看该作者
每天上网看着那样多的网页,于是我才下定决心选择了网页制作这一门课程,目的就是希望以后能够做出一个完美的网页来。
因胸联盟 该用户已被删除
8#
发表于 2015-3-17 01:10:06 | 只看该作者
还可以在Dreamweaver常用工具中选择超级链接,完成相应的填写即可。
深爱那片海 该用户已被删除
9#
发表于 2015-3-23 15:02:39 | 只看该作者
足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程,随着互联网(Internet) 的家喻户晓。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-11-1 09:20

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表