本文介绍的是封装好的jQuery插件，而非网上那种写死ID或类名的方法，适用于单个页面不同元素多次调用。
Html代码：
<table width="100%" border="1" cellspacing="0" cellpadding="0" id="tabs"> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> </table>
JS代码： 继续查看全文
HTML 5 是一个新的网络标准，目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准。它希望能够减少浏览器对于需要插件的丰富性网络应用服务（plug-in-based rich internet application，RIA)，如Adobe Flash, Microsoft Silverlight, 与 Sun JavaFX 的需求。
HTML 5 提供了一些新的元素和属性，反映典型的现代用法网站。其中有些是技术上类似 <div> 和 <span> 标签，但有一定含义，例如 <nav>（网站导航块）和 <footer>。这种标签将有利于搜索引擎的索引整理、小屏幕装置和视障人士使用。同时为其他浏览要素提供了新的功能，通过一个标准接口，如 <audio> 和 <video> 标记。
一些过时的 HTML 4 标记将取消，其中包括纯粹用作显示效果的标记，如 <font> 和 <center>，因为它们已经被 CSS 取代。还有一些透过 DOM 的网络行为（via）。下面我们来看一下HTML 5提供的一些新的标签用法以及和HTML 4的区别。
继续查看全文
下面是Google的用户体验设计师Jon Wiley在一 次讲座中提到的Google的10大设计原则。这些设计原则对于中国设计市场可能并不是那么的适用，但值得每一个设计师去借鉴和学习。
1. 有用（Useful）：以用户为焦点，关注他们的生活、工作和梦想。
2. 快速（Fast）：争取节省每一个毫秒。
3. 简单（Simple）：简洁就是力量。
4. 魅力（Engaging）：能够唤起新手的好奇心，能够吸引资深用户。
5. 革新（Innovative）：勇于创新。
6. 通用（Universal）：全世界适用的设计。
7. 盈利（Profitable）：为现行的和将来的商业模式做好安排。
8. 优美（Beautiful）：外观具有视觉愉悦性，但是不会令用户分心。
9. 可信（Trustworthy）：值得用户信赖。
10. 人性（Personable）：加入人性化因素。
让我们看看，Google如何在它自己的主页上，实践这些原则。
首先，它的载入速度很快；
其次，这个页面对访问Google的用户很有用；
再次，它 的设计非常简单，几乎没有分散用户注意力的元素，因此不会令人有压迫感；
然后，你几乎本能地就会使用它，不需要查阅复杂的说明手册， 除非你想使用一些高级功能；至于这个页面是否具有创新性，可能有不同看法，但是确实有许多其他网站照搬了这种设计； 因为用户可以按照直觉使用它，因此不存在文化壁垒；盈利通过网络广告实现，但是在首页上没有放置广告，因为这样可能会疏远用户；这个页面很宽敞，很优雅，还带着一点幽默感（“手气不错”按钮），随着不同节日而变化的Logo带 来了人性化因素；至于可信性，由于所有一切都很直接了当，因此增强了用户的信心，使他们感到这里没有暗藏的机关，Google会为你提供最好的结果。
英文原文：Google Operating System
中文译文：阮一峰的网络日志
一年一度的“裸奔”节又到了，当然，这里说的是css裸奔，而非你们想的裸奔！
去年的裸奔是有官方组织的，今年不知道为什么没有，是忘了还是睡过头了？
不过国外的没组织，国内WebReBuild.org组织了这次裸奔节。
按照惯例介绍一下：
什么是CSS裸奔节？
CSS裸奔节就是将这整站的css样式都去掉，这样所有的布局，颜色，背景什么的就都没有了(除非你使用table布局)，只剩下html实体显示出来，起源好像是比较无聊的想法，就是剥去css的外衣，让大家看看你的(x)html代码是否工整，但是时至html语义被极力推崇的今日，CSS裸奔节就给外的有意义！
CSS裸奔节的意义
不管CSS裸奔节的原始意义是什么，或许只是一个网络恶作剧，但是从第一届CSS裸奔节（2006年4月5日）开始，CSS裸奔节的意义在于：推动Web标准、提倡简洁为美、使用正确的 (x)html语义标记、良好的层次结构。
告诫大家做页面不仅仅是把还原设计稿，更不是所谓的css+div，更多的是使用正确的 (x)html语义标记、良好的层次结构。
[版权归作者ZeroZ所有，欢迎转载，但请事先告知作者并注明出处]
这个题目不知道合适不合适，但我实在不知道怎么来描述了，就这样吧。
平时做带圆角的页面的时候，我为了图省事，通常会这样做：
提示：你可以先修改部分代码再运行。
但是现在需求改了，tr里面一行要求放置无限个td，也就是这样： 继续查看全文
刚刚看到腾讯的webteam发布的CSS 3.0 参考手册 (中文版)，很不错的总结，还给翻译成中文。只是这ie8压根就不支持css3，firefox有些很方便的属性页不支持，如九宫格那个，opera亦是如此，在国外推广css3还好一些，但在国内……ie6还是主流，难啊！
CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
手册难点
- 中文资料少，对英文翻译功底要求较高；
- 基础语法要求字斟句酌，避免产生歧义；
- 兼容性列表涉及浏览器及版本众多；
- 草案中的Grid布局被业界同仁普遍认为比“天书”还难…
CSS3 还是草案，中文资料少之又少，基本上都是一篇内容转来转去，而我们的手册从基础语法到示例制作，都是根据W3C工作草案进行翻译，并结合自身的沉淀制作示例。
备受期待的 CSS 3 新功能
圆角、多背景、@font-face 用户自定义字体、动画与渐变、渐变色、盒阴影、RGBa – 加入透明色、文字阴影等等
CSS3 的出现，让代码更简洁、页面结构更合理，性能和效果得到兼顾。
CSS 3.0 参考手册 (中文版) 预览：
[版权归作者ZeroZ所有，欢迎转载，但请事先告知作者并注明出处]
注：此列不兼容ie6
效果图：
点击查看演示
看一下HTML结构：
<div class="openwin">
<div class="openwin_bg"></div>
<div class="openwin_main">
<div class="top">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<div class="middle">
<div class="left"></div>
<div class="center">
<div class="openwin_nav">
<div class="nav">当前位置：视频 > 修改频道属性</div>
<div class="close"><a href="#" title="关闭"></a></div>
</div>
<div class="openwin_iframe"><iframe frameborder="0" src="iframe-form.html" style="width:100%;height:378px;" scrolling="no" allowTransparency="true"></iframe></div>
</div>
<div class="right"></div>
</div>
<div class="bottom">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</div>
</div>因为这个例子需要边上有阴影，也就是必须用到透明的png，所以只能用这种最复杂的结构来实现效果。
刚开始的时候我是给.openwin_main .top .center和.openwin_main .bottom .center一个固定的宽度，再填充背景，不然就会变成这样：
看.openwin_main .bottom .center：
这样的话.openwin_main .top .center和.openwin_main .bottom .cente就不能自适应宽度的，后来我受到弹出窗口（层）结构的启发，给.openwin_main .bottom .center和.openwin_main .top .center都写一个left;21px;right:21px;的值，发现.openwin_main .bottom .center和.openwin_main .top .center不用写宽度都能使背景自动填充他们的最大宽度。
具体的方法我就不详细解释了，因为一个字—-懒。
有需要的童鞋可以仔细看看演示中的代码。
这里还有一个比较好的方法【冰极峰教程系列之五】：无hack并支持透明圆角框的全兼容九宫格布局。但这种方法对持背景半透明且带阴影效果的例子支持的不是很好，我是说该死的ie6。
对于英文，只需要设定text-align:justify;就可以实现两端对齐
对于中文，则需要添加text-justify:inter-ideograph;或者text-justify:distribute;属性
[版权归作者ZeroZ所有，欢迎转载，但请事先告知作者并注明出处]
想这个题目花了我半个小时的时间，因为就我所知（只是就我所知），现在自适应宽度的圆角按钮方法有很多，而且都非常不错，兼容性也很好，这里我就不再阐述，baidu或者google一下就会有一堆方法任你选。
近日，在开发公司的cms时，遇到一个小按钮的问题，先看一下设计图：
按照以前的方法，我肯定会这样做：
提示：你可以先修改部分代码再运行。
上面的方法成立的基础是背景图片不透明，当背景图片是透明的话，如
，那么就会出现按钮右侧不是圆角，而是很直的直角：
造成这种情况的原因是因为按钮右上角和右下角的一个像素是透明的，那么就显示出后面的背景图片，后面背景图片是有颜色的，这样就造成一个视错觉，span这个层和a这个层的背景图片叠加在一起就会显示为直角。不知道我这样解释有没有解释清楚，我想应该清楚了，有点基础的稍微想想就明白（我刚开始也不明白，费了好大劲才想明白是怎么回事）。
出现这种情况之后，一时不知道该怎么办了，因为这些按钮要用到很多地方，背景不一定是白色，所以背景图片一定要是透明的。我就想啊想，想啊想，想啊想，终于，我想不到该怎么解决了。然后我就在网上找啊找，找啊找，找啊找，找了很多自适应宽度的圆角使用例子，但要不然背景图片不是透明的，要不然兼容性不行，当我准备放弃的时候，想到了google。google的页面兼容性绝对好，于是就找到他们的其中一个产品中的按钮，仔细分析了一下，终于明白其中的诀窍。
首先，是结构不一样，我上面的方法结构是列表的结构，利用float属性来实现按钮横向排列。但google的按钮最外层就是一个div标记，而且也是横向排列结构，先来看代码：
<div class="top_button button_inline_block">
<a href="#">
<div class="top_button_outer button_inline_block">
<div class="top_button_inner button_inline_block">
<span class="txt">修改属性</span>
</div>
</div>
</a>
</div>有点意思吧，别急，接下来还有！
其次，是背景图片不一样，我先前用的背景图片是带边框的：
而google的按钮使用的背景图片是不带边框的：
那么，按钮的边框哪来的呢？对，是用border属性来实现的。看到这里有人会奇怪了，用border的话，那不成直角了么？我们要的是圆角，别着急，我现在就是要用border来实现圆角效果，看一下整体代码：
提示：你可以先修改部分代码再运行。
我们来分析一下代码，看看边框是如何来的。
1、给了button这个层一个背景图片，并让他平铺；
2、给button_outer这个层上、下边框，并写上颜色
3、给button_inner这个层左、右边框，并让左边框往左移动一个像素，右边框往右移动一个像素，也就是margin:0 -1px;
4、最后加上各个属性来兼容各个浏览器（这里面的东西我不一定能解释清楚，好在代码中都有注释，应该能看懂！）
完成以上四个步骤，这个按钮就出来了，看看效果是不是和设计图一样是圆角？哈哈，虽然方法复杂了点，也运用了很多hack，语义基本也没有了，但是这种按钮我只运用到产品软件中，并没有运用改到网站里。google也是运用改到了他们的产品软件中，所以，不存在什么语义重要不重要之类的，达到目的就行。
文中可能有解释的不到位或者错误的地方，欢迎对此有深入研究的童鞋批评指正！