推荐阅读
梦幻照片，PS给森林动漫人物照片添加梦幻柔光效果
我们做一张片子，是需要先理解片子，理解到位了，才能把照片里所要表达的意境表达准确，那么什么是意境呢?我认为“意境”应该这样去理解，它是艺术辨证法的基本范畴之一，也是美学中所要研究的重要问题。意境是属于主观范畴的“意”与属于客观范畴的“境”二者结合的一种艺术境界。这一艺术辨证法范畴内容极为丰富，“意”是情与理的统一，“境”是形与神的统一。 在两个统一过程中，情理、形神相互渗透，相互制约，就形成了“意境”。我们今天要做的片子是要走梦幻的意境的，方向一定要清晰，方向对了，才能达到目的地。 效果图： 我们开始作图，第一步我们进入Camera Raw 小分析下，我们在Camera Raw处理的时候一定要把皮肤调干净，尽量人和景分离，参数建议如下设置：
3ds Max制作死刑裁决游戏漫画宣传画设计教程
大家好，我是Petr Nasirov。我是一个白俄罗斯模型师，今年24岁。“死刑裁决”这个作品是作为“挑战09动漫展”作品制作的，赢得了第一名，在制作这个作品之前，我花了2天的时间研究漫画人物，当我看到“死刑裁决”的图像时我就决定要制造这个模型，因为他看上去很有趣，非常奇特。1、 素材收集素材收集是一个很重要的步骤。你在人物性格研究方面花的时间越多，后期就会越少犯错误在这个阶段，你需要研究所有的细节，人物的结构和他的衣服的设计和材质，确认每一个细节的地方都是合理且正确的。角色的创建是一个复杂的的多阶段的过程。如果你在制作尾声的时候发现一个错误，它可能要花更多的时间来纠正它。最坏的情况，你甚至可能需要修改多边形建模还有纹理。创建《死刑裁决》这个模型的时候，我充分利用了我在谷歌搜索里面找到的素材。关于《死刑裁决》的原设计有很多种，他们的一些元素吸引我，有些对我来说毫无吸引力。 有一张海报为我的作品中的一只手提供了参考，因为我喜欢它的细节和色彩。 另一张海报给了我一个人物的肩膀上的鸟的灵感。 这些收集来的素材，帮助我创建了属于我自己的人物角色。找到的有用素材越多，我的角色就会越丰满、越细腻!2、 基础多边形建模在收集的素材的基础上，先建一个简单的立体多边形出来，然后再在立体多边形的基础上面进行调整。在这个阶段中，我使用标准的3ds Max的材料，设置不同的颜色来模型元素。这不仅有助于我得到人物的基础形状，而且还得到了一些元素的照明效果。把重点放在调整模型上面。3、复杂多边形建模用3ds Max中的修饰工具Turbosmooth创建了一个高聚模型。衣服上的褶皱、身体上的褶皱和其他的一些小细节都只能在ZBrush里面制作。
Fireworks滤镜快速打造3D彩虹拖尾字特效
使用Fireworks中的Motion Trail滤镜可以快速制作出如下图所示的3D效果彩虹拖尾字。 图1 本例在Fireworks 8中文版中制作完成，具体操作步骤如下。 1.启动Fireworks 8中文版后，按Ctrl N新建一个文档，大小自定，然后使用文本工具在画布上单击，输入文本“天极网设计在线”，注意这里共七个字，设置字体为“隶书”，字号为64，结果如图2所示。 图2 2.在文本框中选中“天”，将颜色改为紫色，再选中“极”，改为蓝色，依此类推，将七个字的颜色分别改为紫、蓝、青、绿、黄、橙、红，即七彩虹的颜色，结果如图3所示。 图3
FW制作苹果水晶图形
Mac的风格大家一定不陌生，而且近些年越来越流行 我是做软件SKIN设计工作的，当然更加深有体会。但像这样风格的图标、按钮却不是那么好找。我之前经常为了找几个合适的水晶图标而浪费大把的时间。经过自己简单的分析，我发现这种图标的制作方法其实非常简单。完全可以把自己需要的图形、符号用我自创的方法做的和上图一样，晶莹剔透作图先要选择一个图形图像处理软件，现在有很多这样的软件，还有很多专业的图标制作软件这个是以前在第三方软件区贴的但我用的是Frieworks（FW）,这个软件操作起来很灵活，比较适合做网页的按钮大家如果想用PS的话，当然也可以废话不说了，我就来讲下FW下水晶图标的制作过程1、新建文件，参数自定，画布不要开得比图标小就可以了2、在画布上画出你需要制作的图形，文字也可以（只是文字将来要转换为路径）3、我做的是文字，字体为：Cooper Black(如果没有这种字体，找一个粗一些的，圆一些的，这样做出的文字看起来效果更好，而且比较可爱)，文字大好后就将文字转换为路径，如果是多个文字，转换路径后，还需要将文字解散群组4、选中其中的一个文字，在属性面板中对其填充颜色进行更改，更改为线性渐变5、再点击填充色的取色框对其渐变颜色进行调整，滑块的一边为白色，一边为红色，将红色的滑块拖到图中的位置。再用黑键头工具选中文字，对其渐变色调杆进行调节，改变渐变的方向。6、接下来需要将文字的边框色进行更改。点击属性面板右侧的边框色取色框，将颜色定为#AA0000，这样文字下面的反光效果就做出来了7、接下来要做文字上半部分的高光，这样才有水晶的光滑通透感。用钢笔工具勾出一个图形，如果图形的边缘不满意，可用白箭头改变曲线的曲力。如图8、将文字选中，ctrl+c，ctrl+v这个大家都应该知道是在干什么。然后同时选中文字和刚才绘制出的路径，选择Modify菜单里Combine Paths下的Intersect命令。//这是对路径进行修改的一组命令。第一个join是将路径进行组合，类似于图形之间的Group（群组）第二个Split，这个命令和join是相对应的，就是将路径解散第三个Union是将路径进行融合，和join不同的是，两个路径完全结合变为一个图形，而且除了ctrl+z以外无法逆向操作第四个Intersect命令是取两个相交图形所共有的部分第五个Punch使用后绘制出的图形在先绘制出的图形上打洞第六个Crop和Intersect的效果差不多，具体有什么不同，我暂时忘了//好了，接着将我们水晶字，使用Intersect命令后，我们得到了一个新图形，这就是文字的高光部分。9、对高光部分的颜色进行调节。首先把这部分的边框色去掉，（这部就不用我废话了吧），然后对其填充进行仔细的调节，这里的填充也是渐变填充，从白到白，不过其中一侧的不透明度为80，如图调节渐变方向控制杆，整体不透明度为90。好了，基本上完工了，最后一步，给R加上一个投影效果，这样看起来就更漂亮了这样，第一个字就做好了。后面的字作法和第一个一样。大家自己做吧，我的手已经酸了最终效果图这是源文件
最新发布
TinyEditor:简洁且易用的html所见即所得编辑器
前几日曾给大家介绍过一款国产的xhtml编辑器，今天要给大家推荐的TinyEditor，是国外知名Web设计博客leigeber.com刚发布的一款简洁且易用的html所见即所得编辑器。TinyEditor有以下特点下面来看如何使用：1，在网页文件中引用TinyEditor提供的js文件和css文件 2，在网页文件中添加编辑器所需要的标签，其实就是个textarea，如下 <textarea id="input" style="width:400px; height:200px"></textarea> 注意textarea中定义的长宽也就是编辑器的大小。 3，通过脚本初始化编辑器，并配置各种参数，如下：
网页表单设计:主要行为与次要行为
作者介绍：Luke Wroblewski，目前在Yahoo！担任首席设计师（Chief Design Architect），主要进行互联网、移动设备、电视等等产品线及前瞻性的客户体验整合。在这之前他曾是eBay公司平台组的用户界面设计领导者。他同时也是两本知名网页设计书籍的作者（Web Form Design 和 Site-Seeing: A Visual Approach to Web Usability）。译文：最近几个月以来，我一直忙于在我的新书中通过实际测试数据来重写设计建议，这本书名叫《网页表单设计最佳练习》（Web Form Design Best Practices）。为完成这件事，我很荣幸的和伦敦的可用性专家Etre一起合作，并进行了大量的专门针对网页表单设计的眼动实验和可用性研究。其中的一项测试便是研究主要行为与次要行为之间的差异化。一个典型网页表单通常包含数个“决定性”行为。例如“提交”“保存”或者“继续”等行为，他们都是被用来“完成表单”，而“完成表单”则是任何用户开始填写表单之后的主要目标。因为能够被用来触发表单中最重要的行为（完成表单），所以他们常被归为主要行为。 另一方便，次要行为的使用趋势越来越少，同时大多数通常允许用户撤销已经输入的数据。例如“取消”“重置”或“返回”之类的选项，他们代表了与用户填写表单时的首要目标刚好相反的次要行为。由于次要行为包括否定结果，我过去常常和人们争论说他们应该不应该出现在表单中，尤其是他们常被用户无意中使用。相像一下这样的情景，你在填写一个冗长的在线表单的时候不小心点了“重置”按钮，于是你输入的所有数据都被抹掉了。当然某些情况下次要按钮时也是有意义的，例如“暂存”“导出”等等。在这些条件下，我主张最好的方式是通过视觉样式来区别主要和次要行为，这样才能确保用户可以找到一条清晰的路径来完成自己的首要目标：完成表单。
HTML5实例:20个使用HTML5编写的网站
HTML5作为HTML标准的下一个版本，包含了很多新特性，例如内建的视频、音频标记，元素拖放等功能。在很多的Web开发中，HTML 5 已经被应用到页面编码中去，为这个优秀的下一代编码语言的推广做贡献。以下是20个使用HTML 5 编写的网站。访问网站访问网站访问网站访问网站
HTML网页实例代码:简洁漂亮的跳转等待页面
Web开发过程中由于种种原因可能经常会遇到需要跳转的页面，今天给大家推荐一个简洁漂亮的跳转等待页面，帮站长提高网站的用户体验。只要将以下代码中红色部分修改为需要跳转的URL即可。
测试Flash和HTML5 Flash是CPU杀手？
iPad即将开售，苹果放弃Adobe Flash的决定被推到了浪尖上。iPhone、iPod touch等移动设备不支持Flash是一回事，但有人认为iPad不支持Flash是否会成为iPad成败的关键因素。乔布斯认为iPad比上网本好用。另一方面，苹果的支持者们支持苹果的论调，认为“Flash是CPU杀手”，使用Flash会缩短苹果移动产品电池的使用时间。但最近有人Flash和HTML5进行了测试，发现测试结果并没有那么黑白分明。Flash是CPU杀手？是的，在某些情况下如此。但奇怪的是，有些时候HTML5表现更差。测试Flash和HTML5Jan Ozer是一位视频编码技术专家，从1990年起从事数字视频相关工作，有13本相关著作。他最近在Mac和PC上用不同浏览器对Flash和HTML5进行了测试。Mac测试结果Safari效率最高，CPU占用率比Flash低，为12.39%；Flash 10.0占用率为37.41%，Flash 10.1 占用率下降到32.07%。
网页优化的最基础部分:HTML的优化
在Perfection kills上看到他去年写的一篇文章，关于HTML优化的，讲的很详细，姑且记录之，尽管里面有些东西并不能在目前的环境里应用。在当前WEB应用逐渐前端化的潮流下，对客户端的优化越来越受到关注，如何减少代码，如何让应用快速的展示给用户，如何减少用户等待时间等等，如雅虎的34条优化黄金法则里面提出了详尽的优化方案。网页优化的最基础的部分应该就是HTML的优化，具体来说首先就是标记的清理，清理标记不仅仅能缩减文档的大小，而且能够让文档更易于维护提高搜索引擎的可见度(Clean markup means better accessibility, easier maintenance, and good search engine visibility),但是即便是那些号称高度优化过的网页，如果仔细查看代码，依旧可以发现很多可以删减或者已经过时的标记用法：1.script里的注释符<SCRIPT language=javascript> <!-- Begin alert("daimaren.cn"); // End --> </script> 除非是像95 Netscape 1.0这类几乎绝迹的浏览器需要这样的处理，在大部分主流浏览器里，往脚本块里添加HTML注释是完全不需要的。2.<![CDATA[ … ]><script type="text/javascript"> //<![CDATA[ ... //]]> </script> 这是另外一个经常在js代码块里添加的错误预防措施，他是在处理真正的XHTML文档（“application/xhtml+xml” content-type）时为了防止代码将形如<号解析为标签开始，所有在CDATA内包含的内容，都会被当成文本处理。但是实际情况是，目前几乎所有的网页的content-type都是text/html，也就是说它们不是严格意义上的xml文档，而是只是text文本，所以这个错误预防处理措施是完全没有必要的，即使你确定要支持xml的文档，也要视情况合理的运用CDATA。3.onclick=”…”, onmouseover=”“等等。将事件属性写在HTML标签内是一种很不明智的做法，降低了代码的可维护性，同时污染了标签，如果将事件属性通过JS动态添加，不仅可以灵活控制，还可以利用JS客户端缓存的优势，让这些事件属性不必每次跟随文档请求。4.onclick=”javascript:…”这是一个有趣的javascript混乱，伪协议和内在的事件处理程序可以组成高达10W多种多余的组合，事实是事件属性内部的内容在解析后成为body的一个fucution，这个function然后会作为事件处理程序，所以javascript:在此成为一个无用的多余标签。5.href=”javascript:void(0)”继续javascript:伪协议，有一个臭名昭著的就是javascript:void(0),他是用来避免默认的锚点动作的，它在JS无法正常解析或者出错时（disabled/not available/errors）会使得锚点完全不可用，理想的解决方案是在href里填写正确的URL，然后用JS去动态改写，这样即使在JS未执行的情况下也不会出现锚点不可用的状况。HREF =“＃”是一个精简和更快的替代方案。6. style=”…”没有什么本质性的错误，只是后期维护麻烦，另外移到外联的CSS文件中可以缓存起来提高页面执行效率。7. <script language=”Javascript” … >最容易误解的属性之一，觉得这个是脚本的“语言”，这个属性是如此古老，在1999年就已经不推荐被使用了。8. <script charset=”…” … > <script type="text/javascript" charset="UTF-8"> ... </script> script标签的另一个容易被误解的属性，charset在HTML4.01里的描述：请注意，charset属性是指字符的 src属性所指定的脚本编码，它不涉及的脚本元素的内容。（Note that the charset attribute refers to the character encoding of the script designated by the src attribute; it does not concern the content of the SCRIPT element.），也就是说他只在外联脚本的时候指定脚本文件的编码格式。不推荐使用。上面说的都是一些错误或者不推荐的用法，下面是一些可以合理忽略以清理标记的属性：1.<style media=”all” …>HTML 4.01规定的默认媒体是“screen”，但是经过测试发现几乎所有浏览器并未按照规定执行，而是用“all”替代，如果你要使用media=”all”，那建议可以省略此属性。2. <form method=”get” …>form的默认method是get，所以如果要使用get可以不用再指明。3. <input type=”text” …>在HTML 4.01和HTML5草案里规定了input的默认属性为text，所以可以忽略。4. <meta http-equiv=”Content-type” …>指定文件的字符编码一直都引起极大的混乱，Content-type的优先级并不比HTTP HEADER高，当两者都存在时，请求头更优先，所以如果你能控制好服务器响应，并且设置好HEADER，那MATE就可以安全的忽略，除非页面需要本地浏览的时候。5. <a id=”…” name=”…” …>如果不想兼容古老的浏览器（如 Netscape 4），完全不用在一个元素上同时出现ID和NAME。下面是在HTML（非XHTML）下一些更极端的标记优化方法：X啊，老外罗哩罗嗦的，最后再写点是关于错误的，不好优化示例：1.移除doctype，HTML Compresor是一个HTML优化工具，它会直接去掉文档声明，会导致页面触发怪异模式，很不好。2.用B替代STRONG用I替代EM。HTML Compresor会直接用B替代STRONG用I替代EM，B不是一个强烈的强调，同样I和EM也不一样，B和I只是字体风格，他们会影响页面渲染，同时也不具备语义。3.删除title\alt\等标签属性。，节约字符和无障碍以及用户体验的权衡，得不偿失。
HTML5 旨在解决 Web 中的交互
过，需要指出的是，尽管一些重量级 Web 技术厂家，象 Apple，Google， Mozilla 基金会， Vimeo，YouTube 已经开始支持这个新标准，但W3C 表示，HTML5 前面的路还很长，它的一些细则目前还存在争议，主流的 Web 在转至 HTML5 之前还要经过很长的时间，而开发者们也不得不面临两难的境地，就是如何使用现在的技术设计出富 Web 应用，同时又为今后的 HTML5 做好准备。富 Web 的现代 HTML 富 Web 应用和 HTML 之间并不般配，Web 之父 Tim Berners-Lee 这样看待 HTML，它是一种用来创建平*立的超文本文档的置标语言，随着 XHTML 的诞生，W3C 也将网页视为文档。这样那些视 Web 为应用平台的开发者十分恼火，2004年，Apple， Mozilla 基金会和 Opera 成立了一个超文本应用技术工作组（WHATWG），寻求创建一个 W3C 之外的标准组织，以打造一个更适合应用的 Web。2007年，他们的 XHTML2 陷入永无止境的纷争之中，后来，W3C经投票决定吸纳 WHATWG 的工作成果，并作为 HTML5 的标准，这时，即使 Tim Berners-Lee 也对面向应用的 Web 伸出橄榄枝，他说，现在看来，我们面向 XML 所做的那些努力是无效的。这并非说纯净的 XML 语法已死，虽然 HTML 的发展方向已改，但在 HTML5 发展的同时，XHTML5 也在同步进行中，区别在于，XHTML 将适用于那些已经向 XML 转换的人，而对于普通开发者，则不一定使用 XHTML。HTML5: 标签的改变 HTML5 吸取了 XHTML 2 的一些建议，包括一些用来改善文档结构的功能，比如，新的 HTML 标签 header, footer, dialog, aside, fugure 等的使用，将使内容创作者更加语义地创建文档，之前的开发者在这些场合是一律使用 div 的。HTML5 还包含了一些将内容和展示分离的努力，开发者们也许会惊讶，b 和 i 标签依然存在，但它们的意义已经和之前有所不同，这些标签的意义只是为了将一段文字标识出来，而不是为了为它们设置粗体或斜体式样。u，font，center，strike 这些标签则被完全去掉了。新标准适用了一些全新的表单输入对象，包括日期，URL，Email 地址，其它的对象则增加了对非拉丁字符的支持。HTML5 还引入了微数据，一种使用机器可以识别的标签标注内容的方法，使语义 Web 的处理更为简单。总的来说，这些与结构有关的改进使内容创建者可以创建更干净，更容易管理的网页，这样的网页对搜索引擎，对读屏软件等更为友好。实现基于标准的富Web 然而，HTML5 最令人振奋的是那些让开发者们实现富应用的新 API，诸如图形，动画，多媒体，在HTML5 之前，这些功能的实现需要 Flash，RealMdeia，QuikTime 一类的插件，这些插件技术不仅容易带来安全隐患，而且它的受众是受限的。HTML5 通过使用相应的置标语言解决了这些问题，内容创建者可以使用类似 MathML 以及 SVG 之类的语言实现数学公式和图形的创建，这些语言比 Flash， Silverlight 一类的格式更容易跨平台使用。Web 开发者们更会为 HTML5 的 audio 和 ideo 标签欢呼，这些标签让 Web 页面轻松实现媒体的嵌入，它们的编码标准是中立的，意味着浏览器厂商可以自己使用何种编码输出媒体，而它的 video 标签更将使那些不支持 Flash 的移动浏览器获益匪浅。Canvs 标签会让交互式 Web 图形更上层楼，开发者可以使用 JavaScript 操作 canvas 中的对象，实现实时的交互式图形操作，甚至实现交互式游戏。除了这些可以看到的变化，HTML5 还引入基于浏览器的程序缓存，将应用数据在本地缓存（就像之前的 Google Gears 插件），这不仅能加速 Web 程序的运行，还可以使一些程序在离线时仍可使用。事实上，Google 现在慢慢取消对 Gears 的支持，全面转向 HTML5。浏览器插件：还不至于死 尽管 HTML5 推出了这么多新功能，但不要指望那些插件会一夜消失，纯粹的 HTML5 要实现目前这个插件世界的全部功能还要很长的时间，更不要说那些需要继续支持的旧系统。比如，虽然 Vimeo 和 YouTube 已经开始使用 video 标签输出视频，然而事情并不是那么简单，W3C 还没有确定使用何种编码方案，这意味着，那些视频并不能保证在任何设备上都能看。比如 Apple， Google 以及微软都主推 H.264 编码，而开源的 Firefox 则不愿意，因为存在许可问题。另外，并不是所有旧系统都会以 HTML5 重写，比如，尽管 Google 自己都不再看好 Google Gears 而主推 HTML5，但 Gooel 承认，HTML5 并不能实现 Google Gears 的全部功能，将基于 Google Gears 的应用转换为纯 HTML5 是不可能简单实现的。最后，五花八门的浏览器也会阻碍 Web 开发者们向 HTML5 转移，IE6，旧版本的 Firefox，Opera，Safari 都不支持 HTML5，因此，除非，绝大多数人的浏览器都升级到最新状态，否则，面向 HTML5 的开发仍将面临各种困境。早期采用者 尽管微软已经表示，IE9 会支持 HTML5，但他们对此事也抱谨慎态度，微软认为，在 HTML5 标准都未确立的今天，说自己的浏览器支持多数 HTML5 功能是不妥的。事实上，任何组织都不可能比 W3C 更清楚 HTML5 的进度，而 W3C 认为，HTML5 标准仍未成熟，功能确立要到2011年前才能完成，即使到了那时，将这些东西确立为标准也需要到2022年，也就是说，XHTML1.1 到 HTML5 大约要15年。不管怎么说，HTML5 将是未来 5 到 10 年最前沿的技术，那些早期采用这可以在网络中找到大量的体验站点，目前，体验 HTML5 的最好浏览器是那些基于 Webkit 引擎的浏览器，如 Chrome 和 Safari，Firefox 不太流畅。Web 开发者们可以使用目前的 HTML5 草案创建试验站点，当然在当前浏览器分布体系下，还会有些问题，线上最好的 HTML5 开发资源是 Mark Pilgrim's excellent Dive into HTML5。
W3C发布7个HTML工作草案
最近 W3C 一口气推出 7 个 HTML 工作草案，涵盖了 HTML5，HTML RDF，HTML Microdata，HTML Canvas， HTML Bidi 等标准。这些草案多数与 HTML5 有关，虽然 HTML5 标准的真正发布与实现还有很远的路，但这个未来最有前途的 HTML 标准正引起业界广泛的关注。W3C 发布的 7 个 HTML 工作草案是:
经验分享:关于网页布局排版的流程问题
网络上形形色色的网站，网页布局排版各有差异（当然除了完全copy），但为何布局排版存在差异呢，不同布局排版的目的是什么呢？是否有什么依据可循呢？若有，这些被遵守的依据又是基于什么考虑的呢？在项目经历过程中，经常看到这样的情形：领导：我们要做一个…负责人：好的。负责人：你们每人设计*套效果图出来；设计人员：好的… 等到设计人员（指视觉设计人员，下同）把页面效果图设计好了之后，我们针对效果图进行讨论和筛选确定，以确定最终采用哪套设计方案，这个时候大家各抒己见，领导也根据自己看法对不同作品进行筛选，但这个过程中最经常出现的结果就是：每个方案各有不同，包括布局排版、配色方案、整体风格等，但每个作品都不尽人意之处，最后根据讨论结果确定下了一个方案并提供修改意见，项目进入开发阶段。这个流程本身没什么问题，只要能保证大家选择的方案执行后能得到大家想要的结果即可，但可悲的是我们经常无法得到满意的结果，包括栏目设置缺乏考虑造成运营不善，页面布局不合理造成用户体验下降等等；出现这样问题原因在于：在这个流程中我们陷入了到底该选择哪套方案、陷入了对不同方案的对比甄别中，而我们却忘记了为什么需要这样的方案，我们最原始的需求和出发点是什么？今天重点谈谈在这样流程中关于布局排版的问题。 首先，网页排版布局不应该是设计人员为了美化页面而拼凑排列的，就像经常有视觉设计师说“这个地方看起来很空，我得找个*放上去..”一样，我认为：基于页面美化和丰富界面内容的网页布局排版都是不可取的，因此，布局排版体现的是一个网页中各个模块的重要程度和客户可能的关注重点，合理的布局排版应该且必须承担把《我们想要传达的信息》快速高效地提供给用户的重任。
CSS,JavaScript和MooTools制作斑马纹表格
简单的斑马纹表格，如果页面上有大量的表格数据时，隔行变色的斑马纹会帮助我们快速阅读，有利于用户体验。我们今天不讨论在动态语言中的方法，只讨论CSS，JavaScript，MooTools 是如何实现的，并有三种可行性方案。 <table id="playlist" cellspacing="0"> <tbody> <tr> <td>1</td> <td>Lost In The Plot</td> <td>The Dears</td> </tr> <tr> <td>2</td> <td>Poison</td> <td>The Constantines</td> </tr> <tr> <td>3</td> <td>Plea From A Cat Named Virtute</td> <td>The Weakerthans</td> </tr> <tr> <td>4</td> <td>Melissa Louise</td> <td>Chixdiggit!</td> </tr> <tr> <td>5</td> <td>Living Room</td> <td>Tegan And Sara</td> </tr> <tr> <td>6</td> <td>Speed</td> <td>Bran Van 3000</td> </tr> <tr> <td>7</td> <td>Fast Money Blessing</td> <td>King Cobb Steelie</td> </tr> <tr> <td>8</td> <td>Sore</td> <td>Buck 65</td> </tr> <tr> <td>9</td> <td>Love Travel</td> <td>Danko Jones</td> </tr> <tr> <td>10</td> <td>You Never Let Me Down</td> <td>Furnaceface</td> </tr> </tbody> </table> 我们上面所看到的表格，就是我们要美化的表格，要实现斑马纹的表格。在CSS3中有许多的伪类选择器，其中的 E:nth-child(n) ： {attribute} 它可以匹配父元素中的第n个子元素E。The CSS3 Code