页面载入中...
首页 » HTML

前端开发大众手册(包括工具、网址、经验等)

转自蓝色 http://home.blueidea.com/space.php?uid=353293&do=blog&id=12766

前端开发大众手册(包括工具、网址、经验等)

标签 : 手册 网址 工具 经验 开发 10小时前

一直觉得前端开发缺个手册,这是个体力活。不过总得有人来干。

今天闲来无事,把一些工具(online和client的)、常用网址、以及经验总结等罗列出来和大家分享下。这个标题起地大了点,肯定会有很多地方没列到,包括类目的分法也可能考虑不周,所以还请大家积极补充指正,可以直接留言,也可以发邮件给我(sorrycc#gmail.com)。之所以加上”大众”两字,因为以下资源对于高手来说可能早就很熟悉了。

另外想提一句,工具是死的,好不好用得看你会不会用。比如Firefox、Fiddler等,除了显而易见的功能以外,都有一些小的技巧,掌握了可以让你事半功倍。

更新记录:

  • [20081025] 第一版

快捷导航:

另外还搞了个Firefox插件《 前端开发工具集 》,把资源整合到一个菜单下,方便查询。数据放在线上(Google AppEngine),速度应该会有保证,更新也会比较方便哈,见图。

在线工具集

常用Firefox插件

IE下的调试工具

  • Fiddle2 — 非常强悍的一款http流查看工具,默认支持IE,其他浏览器可以设置将{Document}\Scripts\BrowserPAC.js设为代理进行使用。Firefox下可用上述”Fiddler 开关”进行快速切换。支持 插件
  • IE Developer Toolbar — 查看元素、禁用缓存、禁用CSS\JS、Outline元素、查看生成的源码等功能,IE8自带了一个加强版的。
  • Microsoft Script Debugger + Companion.JS — 调试JS用,虽然报错还是有误差,但是我已经满足了。安装顺序是:Microsoft Script Debugger,Companion.JS,在”IE选项-高级”里 取消禁用脚本调试
  • 多版本IE共存两种方案:
    • IE7/8 + IE Tester — 大众型配置,可以基本满足日常需要。
    • IE6 + Internet Explorer Collection — 在IE 6用户占绝对优势以及IE 6神奇bug满天飞的时代,我还是推荐这种方案,因为只有神奇的原装IE 6,才能抵挡运营神奇的问题。另外如果还有其他机器可供支配的话,建议再装个IE 8 + IE Tester,因为IE 8下的Developer Toolbar还是有很大改进的,调试起来会方便一些。
  • 以下三个软件相对不重要些:

参考手册

批处理工具

IDE及其他工具

Bookmarklet(右键另存)

  • Firebug Lite 官方介绍
  • Xray 官方介绍
  • MRI 官方介绍
  • <A href=”javascript:”+ window.document.documentElement.outerHTML+ ”+ window.document.documentElement.outerHTML+ “”&gt;查看生成的源码,<A href=”javascript:(function(){var w=window.open(‘about:blank’);w.document.write(“+ window.document.documentElement.outerHTML+ ”+ window.document.documentElement.outerHTML+ “);})()”&gt;打开新窗口查看生成的源码 — for IE

开发者社区及权威网站

推荐订阅的博客和网站(排名不分先后)

需要了解的21个CSS惊人技巧

21-css-技巧


  CSS在当代Web设计中已经成为重要的环节,如果没有CSS现在的网站将像10年前一样不堪入目。随着CSS技术的普及,越来越多的高质量CSS教程涌入互联网,让我们的学习更加方便。下面彬Go向大家推荐21个惊人的CSS技巧,相信其中必有你想不到的。还等什么,继续往下看吧!

您还可以参考以下CSS相关教程及资源:
CSS Sprites(CSS图像拼合技术)教程、工具集合
学无止境的CSS(xHTML+CSS技巧教程资源大全)
精选30个优秀的CSS技术和实例
使用CSS为图片添加更多趣味的5种方法

1.CSS跨浏览器幻灯片

跨浏览器CSS幻灯片
点击上图查看清晰原图
演示了如何仅适用CSS打造一个跨浏览器的图片画廊

2.基于CSS的图片地图

CSS-图片地图
这个教程演示了如何使用纯CSS创建一个”疯狂”的图片地图。

3.纯CSS无JavaScript的LightBox

纯CSS无JavaScript的LightBox
点击上图查看清晰原图

4.CSS图片替换技术制作的按钮

CSS图片替换技术制作的按钮
使用CSS将表单提交按钮替换为图片,如果禁用CSS将变回普通按钮。

5.用CSS实现动画导航菜单

CSS-导航菜单-动画

6.用CSS创建类似树形导航菜单

CSS-树形导航

7.CSS渐变文字效果

CSS渐变文字效果

8.CSS目录菜单设计

CSS-目录菜单
点击上图查看清晰原图
很容易理解的关于使用CSS border属性或CSS背景图属性实现目录菜单的教程。

9.使用CSS负margin创建自适应布局

CSS负margin创建自适应布局

10.使用CSS固定你的页脚

CSS-固定-页脚
点击上图查看清晰原图
你也许会遇到这种情况:当你为每个页面设置相同的页脚后,有些页面的主题内容量很少,使得页脚自动向上移动,看上去的浏览器下面很空。这个教程将教你如何使用CSS固定页脚在页面底部来解决这个头疼的问题。

11.简单、灵活的CSS面包屑导航

CSS-面包屑-导航

12.为你的博客创建时髦的引用(Pullquotes)

pullquotes-css

13.CSS实现的柱状图表

CSS-图表

14.如何为链接列表创建块级悬停效果

CSS-技巧

15.CSS多列列表

CSS多列列表

16.用CSS Sprites技术实现日期显示

用CSS Sprites技术实现日期显示

17.使用CSS美化你的日期和评论

CSS

18.使用CSS创建图片浏览器

CSS-图片浏览器
点击上图查看清晰原图

19.创建CSS图片预载

无需JavaScript,仅使用CSS背景图属性实现图片的预载。

20.从页面底部淡出效果

CSS-淡出
点击上图查看清晰原图

21.创意且很酷的CSS边框属性

CSS-Border-属性

英文原文:21 Amazing CSS Techniques You Should Know

翻译原文:你需要了解的21个CSS惊人技巧(彬Go)

麻将电视赛官网UI设计+前端开发【主要借鉴开发流程】

借鉴别人UI作品设计制作流程:

今天展示一下五月底用4天时间完成的一个小项目,天津麻将电视大奖赛的专题官网UI设计+前端开发。这个项目要的很急,呵呵,所以非常非常赶…界面方面可能还有很多不如意的地方,但是网页的前端代码我是在既追求效率又追求质量的基础上完成的。这个项目的交互原型和详细需求不是我出的,所以内容结构和内容量、布局等不是我能大规模修改的。我只能在原型的基础上进行创意设计和修饰配色等。


先来两张首页效果图:

两个版本之间的区别只在于赛事进程版块内,由于需求的内容量过大,所以导致页面很单调,版本一是我优化的,版本二是按需求的内容量设计的。这个需求我看到第一眼就觉得很无奈,这么庞大的信息量,有必要吗?!用户100%不会耐着性子把内容看完的,反倒是需要一些突出的图片或是颜色来引导用户浏览网页中最重要的内容,比如这个页面中的”报名”按钮、”赛事进程”板块和参赛步骤。再有就是既然是麻将游戏的电视比赛,那就一定要通过设计元素突出主题,能让用户在没有看到文字的时候也能大致了解页面的主题内容是什么,提高页面的可识别性。Banner的Q版电视人物和一些麻将就是起到这个效果。

关于页面的风格,我借鉴了很多腾讯的设计风格,走清新路线,希望能在炎炎夏日给人以清爽的感受….导航是Copy的,哇咔咔….时间紧迫啊….尽管拍我吧,哈

顺便说个题外话,哈,那个”易游开心”很山寨… 囧rz

天津麻将电视大赛首页效果图-版本1

天津麻将电视大奖赛-首页效果图1
点击小图查看清晰大图

天津麻将电视大赛首页效果图-版本2

天津麻将电视大奖赛-效果图2
点击小图查看清晰大图

天津麻将电视大赛专题网站Demo (点击查看)

下面来总结一下我使用的一些前端技术和经验,希望能对大家有所帮助,大家如果有更好的意见欢迎留言,互相学习。

1.CSS书写顺序

css-书写顺序

注重CSS书写顺序使很多前端开发新人所忽视的,其实这种习惯的好处不用说大家也能猜出一二,最最主要的还是方便日后的查询和维护。

2.结构化CSS代码

css-结构化-树形

将CSS代码结构化之后,让它符合树形结构,便于查找各级元素的CSS样式属性。

3.杜绝使用CSS Hack

很多前端新人都把学习重点放在CSS Hack上,为了让大部分主流浏览器兼容自己的网页,想方设法在CSS代码中插入适用于各种不同浏览器的Hack。其实完全没有必要,通常情况下的网页,基本上都可以在不使用CSS Hack的情况下达到浏览器兼容效果,当然,这需要扎实的CSS基础和丰富的经验。

4.针对IE6兼容问题采用”单挑”原则

ie6-兼容性-css

如果是IE6单独存在的问题,那我会单独命名一个CSS文件,把适合IE6的标准CSS样式写在这个文件中,并在网页里使用IE条件注释达到仅让IE6读取该CSS文件的目的。呵呵,出于我对IE6的愤慨之情,所以把文件名命名为这个比较不”和谐”的名字。

注释如下:
<!-[if IE 6]>
<link rel=”stylesheet” type=”text/css” href=”style/fuck_ie6.css” />
<![endif]->

5.为CSS写目录索引

css-目录索引

这个没什么好说的,作用类似图书的目录,大家有兴趣可以阅读彬Go关于CSS索引注释的文章《CSS最佳实践:为今后的项目制作空白CSS模板文件》,这里面详细讲解了关于如何写CSS索引注释和它的好处。

6.遵循命名规范

命名规范对于一个团队来说是相当重要的,对于个人来说也是有一定的好处的。之前彬Go发表过一篇《Web UI 设计(网页设计)命名规范》,是我个人总结的一些相关命名规范内容,感兴趣的话可以看看。

7.纯CSS实现导航标签”面包屑”效果

css-导航-面包屑

我个人认为这个没什么可说的,但是考虑到很多前端新人可能不太了解如何实现,所以简单说一下实现的原理。它的效果就是让导航(已选择)标签停留在相应的页面上。比如首页的话,导航标签的”首页”高亮;在”奖品详情”页面,相应的”奖品详情”标签高亮。

基本实现原理就是在不同的页面为<body>标签添加一个id。比如首页是<body id=”home”>,赛事报道页面则是<body id=”report”>,以此类推。然后就可以使用CSS专门针对不同的body id值设置CSS样式了。我的样式是这样的(已缩减):

#home .nav_home a:link,#report .nav_report a:link {background-position:0 -78px;color:#005ea5;}

8.CSS Sprites(CSS图像拼合) 技术

CSS Sprites近期收到了国内前端们的热烈追捧,但我只在网站中的导航上使用了这个技术。为什么呢?原因有以下两点:

1.CSS Sprites增加了切图时间,但这个项目时间很紧。
2.这个网站的流量不大,使用CSS Sprites技术没什么意义,不会有什么明显的减小流量和请求的效果。

也就是说CSS Sprites的优势基本无法在这个网站上得到体现。所以我这次放弃使用CSS Sprites技术,从而换来了开发(切图)效率上的提高。

如果大家想了解更多关于CSS Sprites的知识,可以看看《CSS Sprites(CSS图像拼合技术)教程、工具集合》。

9.通过W3C xHTML 和 CSS 官方验证

css-w3c-认证

这个是必须的,这玩意儿地球人都知道,我就不多说了。但遗憾的是,这个认证只停留在我的Demo中,运营中的实际网站已经有很多错误了,是为网站填充内容的运营客服人员搞乱的,无奈一下….我也懒得改了,有Demo就行了。

天津麻将电视大赛专题网站Demo (点击查看)

好了,关于使用到的技术我目前只想到这些,以后可能还会补充新的。最后想说一下,前端开发并不是非要追求所有高级技术,并不是在一个项目中使用最高级的技术就能证明米的能力有多强。真正的高手是懂得分析一个前端开发项目,用最适合的前端技术实现当前项目的人,这样才能记得到质量有追求了最高的效率。比如我刚才说的CSS Sprites,它明显不适用于这个项目。再比如滑动门,我也没有使用在导航上,因为这个专题网站是有有效期的,基本上不会涉及到导航文字的改变,所以浪费时间在使用这些技术上的话毫无意义。我相信有更多的高手能使用比我更恰当的技术来完成自己的项目,所以在下才把这篇文章发上来,希望能互相学习。大家尽管拍砖啦….嘎嘎嘎~~

原载:彬Go–集前端开发/网页设计/网站可用性/用户体验于一体的趣味互联网生活
本文链接:http://blog.bingo929.com/tianjin-ma-jiang-mahjong-contest-website-ui-design-css.html

推荐95个极富创意的单页网站设计实例欣赏

01. Thousandminds

网页设计

02. Alibahsisoglu

网页设计-欣赏

03. Yesisaidyes

网页设计-实例

04. Creativethe

网页设计-例子

05. Thisbythem

网页设计-教程

06. Juandavidperafan

网站设计

07. Schallinger

网页设计

08. Attackoftheweb

网页设计-欣赏

09. Bilderish

网页设计-实例

10. Puppetbrain

网页设计-例子

11. Mutantlabs

网页设计-教程

12. Glasshouse

网站设计

13. Juliofragoso

网页设计

14. Bobwal

网页设计-欣赏

15. Frenzylabs

网页设计-实例

16. Thisisvermilion

网页设计-例子

17. Design55

网页设计-教程

18. Mikioinose

网站设计

19. Siminki

网页设计

20. Koormann

网页设计-欣赏

21. Mjmagee

网页设计-实例

22. Mynameisadi

网页设计-例子

23. Kemenydaniel

网页设计-教程

24. Rzmota

网站设计

25. Lucino-gene

网页设计

26. Nouincolor

网页设计-欣赏

27. Atomiccartoons

网页设计-实例

28. Ignitestudios

网页设计-例子

29. Gudanghome

网页设计-教程

30. Sowhatout

网站设计

31. Tyrale

网页设计

32. Fat-man-collective

网页设计-欣赏

33. Frederikmoes

网页设计-实例

34. Nickhand

网页设计-例子

35. Dreamerlines

网页设计-教程

36. Itsplay

网站设计

37. Udnhz

网页设计

38. Thgcreative

网页设计-欣赏

39. Madebyguerrilla

网页设计-实例

40. Norarosetravis

网页设计-例子

41. D6gn

网页设计-教程

42. Multimichel

网站设计

43. Fishmarketing

网页设计

44. Project365

网页设计-欣赏

45. Emmanuelcup

网页设计-实例

46. Lomotek

网页设计-例子

47. Salya

网页设计-教程

48. Jordyjoel

网站设计

49. Newstreamdesign

网页设计

50. Somoslaperalimonera

网页设计-欣赏

51. Exit10

网页设计-实例

52. Ebiene

网页设计-例子

53. Chanellehenry

网页设计-教程

54. Cucweb

网站设计

55. 57studios

网页设计

56. Tilmankoester

网页设计-欣赏

57. Jodyferry

网页设计-实例

58. Kollektivdreinull

网页设计-例子

59. Justinslack

网页设计-教程

60. Toyny

网站设计

61. Sarahifrah

网页设计

62. Stevenewcomb

网页设计-欣赏

63. Visualgroove

网页设计-实例

64. Fiberwig

网页设计-例子

65. Limewheel

网页设计-教程

66. Maustingraphics

网站设计

67. Estebanmunoz

网页设计

68. Inseo

网页设计-欣赏

69. Mootdesign

网页设计-实例

70. Laureanoendeiza

网页设计-例子

71. Iamjamie

网页设计-教程

72. Pirolab

网站设计

73. Dannycallaghan

网页设计

74. Hankolguin

网页设计-欣赏

75. Rileyhamilton

网页设计-实例

76. Jiga

网页设计-例子

77. Lemonoak

网页设计-教程

78. Cleanart

网站设计

79. Ignacioricci

网页设计

80. Jp3design

网页设计-欣赏

81. 1kbgrid

网页设计-实例

82. Onvo

网页设计-例子

83. Spongeproject

网页设计-教程

84. Efingo

网站设计

85. Sectionseven

网页设计

86. Thingswelove

网页设计-欣赏

87. Gioledda

网页设计-实例

88. Schiffwebdesign

网页设计-例子

89. Wkem

网页设计-教程

90. Goldineyemedia

网站设计

91. 1plusdesign

网页设计

92. Horjusdronrijp

网页设计-欣赏

93. Benjigordon

网页设计-实例

94. Massage-to-heal

网页设计-例子

95. Kimburgess

网页设计-教程

英文原文:95 Fresh Examples Of Single Page Website Designs
翻译原文:推荐95个极富创意的单页网站设计实例欣赏(彬Go)

用CSS3制作50个超棒动画效果教程

50个css3技术教程

  CSS3为我们带来了令人惊叹的新特性,而最有趣的就是CSS动画。今天彬Go向大家推荐这50个CSS动画集合可以让你通过使用JavaScript函数来让动画更生动。为了能够预览到这些惊人的CSS3技术带来的动画特效,请大家使用如SafariChrome这类基于WebKit内核的浏览器。(IE浏览器谢绝观赏~)

您还可以参考以下CSS3相关文章:
5个CSS3技术实现设计增强
一起感受HTML5和CSS3的能量
提升你设计水平的CSS3新技术

1.CSS3实现钟表效果(基于jQuery)

  使用CSS3的基本变形特性:rotate,并结合了jQuery这类javaScript框架制作的CSS3时钟效果。
表-jQuery-css3

2.模拟时钟

  模拟时钟基于过渡webkit和CSS3变形,javascript用于将其按当前时间转动。
时钟效果-css3

3.可使用箭头键旋转的3D立方体

  你可以使用上、下、左、右方向键控制这个3D立方体,它是基于webkit-perspective, -webkit-transform 和 -webkit-transition 创建。
css3-3D立方体

4.多种3D立方体(淡入淡出)

  多种3D立方体使用CSS3和它的属性’transform’ 和 ‘transition’ ,我个人觉得效果很震撼,你能看到写在3D立方体上的透视感极强的文字。
多种3D立方体(淡入淡出)

5.CSS3手风琴效果

  使用CSS3实现的手风琴菜单效果,基于webkit浏览器专有属性。
CSS3手风琴效果

6.自动滚动视差效果

  自动滚动视差效果使用WebKit的 CSS transition 属性。该效果无需JavaScript。
自动滚动视差效果

7.Isocube

  Isocube有些类似于3D立方体,但也有不同之处,它可以让他片贴在立方体面。
CSS3实例

8.CSS3图片集

9.CSS3 Matrix(黑客帝国效果)

  黑客帝国是最棒的科幻小说改编电影之一,现在使用纯CSS就能实现电影中的矩阵效果。
CSS3 Matrix(黑客帝国效果)

10.7种CSS3结合javascript技术的特效

  7种CSS3结合javascript技术的特效实例. 所包含的效果有淡入淡出, 震动, 轻移, 扩大, 跳动, 旋转 和 手风琴效果。
7种CSS3结合javascript技术的特效

11.各种鼠标悬停图片特效

  六个由CSS3替代JavaScript而实现的鼠标悬停图片效果,CSS3实现这种悬停效果依然很炫!
各种鼠标悬停图片特效

12.旋转的可口可乐易拉罐(使用滚动条控制)

CSS3实例

13.3D 《宫女》

CSS3实例

14.宝利来画廊

  宝利来画廊是由CSS3技术实现的将一些照片堆在一起,有趣的是鼠标悬停照片是,照片会旋转并缓慢放大~
CSS3教程

15.太空

CSS3实例

16.Mac Dock

  CSS3模拟的mac操作系统菜单…
CSS3实例

17.Drop-In Modals

CSS3实例

18.滑动的唱片

  该效果使用了CSS3过渡和些许HTML,在它上面放一个唱片专辑会看上去更生动。
CSS3实例

19.CSS3 Zooming Polaroids

  该效果会将一个照片列表按顺序排列,并把它们按不同的角度旋转,使用了CSS2和CSS3技术,无JavaScript。它从图片的alt属性中读取出照片描述并放到了照片的下方。
CSS3 Zooming Polaroids

20.CSS3 火箭动画

CSS3 火箭动画

21.Poster Circle

CSS3实例

22.变形的立方体

CSS3实例

23.动画版宝丽来画廊

CSS3实例

24.聚光灯下的投影效果

CSS3实例

25.色彩鲜艳的时钟

CSS3实例

26.Lightbox Gallery

CSS3实例

27.弹性缩略图菜单

弹性缩略图菜单

28.Coverflow

CSS3实例

29.jQuery DJ Hero

jQuery DJ Hero

30.Dynamic Stacking Cards

CSS3实例

31.另一个CSS3图片画廊效果

32.雪堆(使用方向键控制)

CSS3实例

33.CSS3动画版价格栏

CSS3动画版价格栏

34.平滑jQuery+CSS3菜单

平滑jQuery+CSS3菜单

35.CSS标签(无JavaScript)

CSS标签(无JavaScript)

36.CSS标签菜单(无JavaScript)

CSS标签菜单(无JavaScript)

37.SVG+CSS3鱼眼菜单

VG+CSS3鱼眼菜单

38.CSS3落叶效果

CSS3落叶效果

39.CSS3旋转图集效果

CSS3旋转图集效果

40.CSS3下拉菜单

CSS3下拉菜单

41.星球大战风格爬行文字(纯HTML+CSS)

星球大战风格爬行文字(纯HTML+CSS)

42.CSS3即时贴

CSS3即时贴

43.css3雪花

css3雪花

44.又一个鱼眼效果

CSS3实例

45.CSS3逐帧动画

  第一个CSS3逐帧动画实例需要你持续使用鼠标点击图片,当播放到最后一帧时它会自动播放第一帧,如此循环,但第一个实例只能在FireFox和Opera下实现。第二个Css3逐帧动画实例需要你使用鼠标在图片上移动,依旧是mousemove这个动作,只要鼠标在移动图片动画就会持续播放,但动画的播放速度是与你的鼠标移动速度有关的,该实例支持Safari, Google Chrome, IE8, Firefox 和 Opera。
CSS3逐帧动画

46.全地域装甲载具

CSS3实例

47.又一个CSS3手风琴效果

又一个CSS3手风琴效果

48.无Flash版动态展示

CSS3实例

49.平滑菜单栏

平滑菜单栏

50.loading旋转效果

loading旋转效果

英文原文:50 Awesome Animations made with CSS3
翻译原文:用CSS3制作50个超棒动画效果教程(彬Go)

8个设计规范的表格Table CSS样式应用

如果说是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建立表格的应用,这个Table jQuery插件设计的也是非常的简单易用,。

在这个设计中,使用了黑底白字的显示效果,并且将header行用渐变的对比色、分类图标和内容块区分开来,该设计最特色的功能就是,使用jQuery TableSorter Pager可以将每列的数据进行递增和递减排序。

文档地址: http://motherrussia.polyester.se/docs/tablesorter/

3, EXT JS

Ext JS号称是Cross-Browser Rich Internet Application Framework(跨浏览器的Internet多应用框架),确实,这个table项目真的非常的强大,看看它的演示效果就知道了。

这是一个XML Grid实例,告诉你怎么load XML数据形成grid。这个table有蓝色和灰色两种风格。你可以点击这里查看实例演示

这是另一个来自Ext JS的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/demoblog/comments/a_css_styled_table/

7, ASKTHECSSGUY.COM

这个设计充分利用了橙色素的对比度,来区分heade行和第一列。如果你是要在一个大的table中,突出显示一个单元格数据的话,这个效果就非常的有用了。当鼠标点击某一个单元格时,该单元格的样式会突出显示。实例的最终演示效果,查看这里

8, SMASHINGMAGAZINE.COM

这是一个来自著名的技术博客 SMASHINGMAGAZINE 的一个table应用项目,该项目把table的应该发挥到了一个如火纯清的地步,有很多实用的例子可供参考。

最后,告诉大家一个链接地址http://icant.co.uk/csstablegallery/ – 该网站整理里非常多的CSS Table设计实例,在你进行table设计时,不妨先去看看别人的东西。文章翻译整理自:30+ Nicest Table CSS Designs You Can Apply Into Your Project