引入CSS样式表后，对于URL的引用，特别是图像的引用比较麻烦的。一般有下面几种方式：
1、相对网站根目录的引用：”/”开头的，如”/xiangmu/images/tuxiang.gif”指向网站根目录》xiangmu 文件夹》images文件夹》tuxiang.gif
2、相对打开的网页的盘路径的：”../”开头的，且可以在开头多次使用，如”../image/tuxiang.gif”相当于指向 所打开网页所存放的文件夹 的上一级目录》images文件夹 》tuxiang.gif；”../../image/tuxiang.gif”相当于指向 所打开网页所存放的文件夹 的上一级目录（文件夹）》images文件夹》tuxiang.gif。
3、”./”开头未考证
4、”"相对打开的网页盘路径的同目录，
CSS在当代Web设计中已经成为重要的环节，如果没有CSS现在的网站将像10年前一样不堪入目。随着CSS技术的普及，越来越多的高质量CSS教程涌入互联网，让我们的学习更加方便。下面彬Go向大家推荐21个惊人的CSS技巧，相信其中必有你想不到的。还等什么，继续往下看吧！
您还可以参考以下CSS相关教程及资源:
《CSS Sprites(CSS图像拼合技术)教程、工具集合》
《学无止境的CSS(xHTML+CSS技巧教程资源大全)》
《精选30个优秀的CSS技术和实例
《使用CSS为图片添加更多趣味的5种方法》
点击上图查看清晰原图
演示了如何仅适用CSS打造一个跨浏览器的图片画廊
这个教程演示了如何使用纯CSS创建一个”疯狂”的图片地图。
点击上图查看清晰原图
使用CSS将表单提交按钮替换为图片，如果禁用CSS将变回普通按钮。
点击上图查看清晰原图
很容易理解的关于使用CSS border属性或CSS背景图属性实现目录菜单的教程。
点击上图查看清晰原图
你也许会遇到这种情况:当你为每个页面设置相同的页脚后，有些页面的主题内容量很少，使得页脚自动向上移动，看上去的浏览器下面很空。这个教程将教你如何使用CSS固定页脚在页面底部来解决这个头疼的问题。
点击上图查看清晰原图
无需JavaScript，仅使用CSS背景图属性实现图片的预载。
点击上图查看清晰原图
翻译原文:你需要了解的21个CSS惊人技巧(彬Go)
借鉴别人UI作品设计制作流程：
今天展示一下五月底用4天时间完成的一个小项目，天津麻将电视大奖赛的专题官网UI设计+前端开发。这个项目要的很急，呵呵，所以非常非常赶…界面方面可能还有很多不如意的地方，但是网页的前端代码我是在既追求效率又追求质量的基础上完成的。这个项目的交互原型和详细需求不是我出的，所以内容结构和内容量、布局等不是我能大规模修改的。我只能在原型的基础上进行创意设计和修饰配色等。
先来两张首页效果图:
两个版本之间的区别只在于赛事进程版块内，由于需求的内容量过大，所以导致页面很单调，版本一是我优化的，版本二是按需求的内容量设计的。这个需求我看到第一眼就觉得很无奈，这么庞大的信息量，有必要吗？！用户100%不会耐着性子把内容看完的，反倒是需要一些突出的图片或是颜色来引导用户浏览网页中最重要的内容，比如这个页面中的”报名”按钮、”赛事进程”板块和参赛步骤。再有就是既然是麻将游戏的电视比赛，那就一定要通过设计元素突出主题，能让用户在没有看到文字的时候也能大致了解页面的主题内容是什么，提高页面的可识别性。Banner的Q版电视人物和一些麻将就是起到这个效果。
关于页面的风格，我借鉴了很多腾讯的设计风格，走清新路线，希望能在炎炎夏日给人以清爽的感受….导航是Copy的，哇咔咔….时间紧迫啊….尽管拍我吧，哈
顺便说个题外话，哈，那个”易游开心”很山寨… 囧rz
点击小图查看清晰大图
点击小图查看清晰大图
天津麻将电视大赛专题网站Demo (点击查看)
下面来总结一下我使用的一些前端技术和经验，希望能对大家有所帮助，大家如果有更好的意见欢迎留言，互相学习。
注重CSS书写顺序使很多前端开发新人所忽视的，其实这种习惯的好处不用说大家也能猜出一二，最最主要的还是方便日后的查询和维护。
将CSS代码结构化之后，让它符合树形结构，便于查找各级元素的CSS样式属性。
很多前端新人都把学习重点放在CSS Hack上，为了让大部分主流浏览器兼容自己的网页，想方设法在CSS代码中插入适用于各种不同浏览器的Hack。其实完全没有必要，通常情况下的网页，基本上都可以在不使用CSS Hack的情况下达到浏览器兼容效果，当然，这需要扎实的CSS基础和丰富的经验。
如果是IE6单独存在的问题，那我会单独命名一个CSS文件，把适合IE6的标准CSS样式写在这个文件中，并在网页里使用IE条件注释达到仅让IE6读取该CSS文件的目的。呵呵，出于我对IE6的愤慨之情，所以把文件名命名为这个比较不”和谐”的名字。
注释如下:
<!-[if IE 6]>
<link rel=”stylesheet” type=”text/css” href=”style/fuck_ie6.css” />
<![endif]->
这个没什么好说的，作用类似图书的目录，大家有兴趣可以阅读彬Go关于CSS索引注释的文章《CSS最佳实践:为今后的项目制作空白CSS模板文件》，这里面详细讲解了关于如何写CSS索引注释和它的好处。
命名规范对于一个团队来说是相当重要的，对于个人来说也是有一定的好处的。之前彬Go发表过一篇《Web UI 设计(网页设计)命名规范》，是我个人总结的一些相关命名规范内容，感兴趣的话可以看看。
我个人认为这个没什么可说的，但是考虑到很多前端新人可能不太了解如何实现，所以简单说一下实现的原理。它的效果就是让导航(已选择)标签停留在相应的页面上。比如首页的话，导航标签的”首页”高亮；在”奖品详情”页面，相应的”奖品详情”标签高亮。
基本实现原理就是在不同的页面为<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;}
CSS Sprites近期收到了国内前端们的热烈追捧，但我只在网站中的导航上使用了这个技术。为什么呢？原因有以下两点:
1.CSS Sprites增加了切图时间，但这个项目时间很紧。
2.这个网站的流量不大，使用CSS Sprites技术没什么意义，不会有什么明显的减小流量和请求的效果。
也就是说CSS Sprites的优势基本无法在这个网站上得到体现。所以我这次放弃使用CSS Sprites技术，从而换来了开发(切图)效率上的提高。
如果大家想了解更多关于CSS Sprites的知识，可以看看《CSS Sprites(CSS图像拼合技术)教程、工具集合》。
这个是必须的，这玩意儿地球人都知道，我就不多说了。但遗憾的是，这个认证只停留在我的Demo中，运营中的实际网站已经有很多错误了，是为网站填充内容的运营客服人员搞乱的，无奈一下….我也懒得改了，有Demo就行了。
天津麻将电视大赛专题网站Demo (点击查看)
好了，关于使用到的技术我目前只想到这些，以后可能还会补充新的。最后想说一下，前端开发并不是非要追求所有高级技术，并不是在一个项目中使用最高级的技术就能证明米的能力有多强。真正的高手是懂得分析一个前端开发项目，用最适合的前端技术实现当前项目的人，这样才能记得到质量有追求了最高的效率。比如我刚才说的CSS Sprites，它明显不适用于这个项目。再比如滑动门，我也没有使用在导航上，因为这个专题网站是有有效期的，基本上不会涉及到导航文字的改变，所以浪费时间在使用这些技术上的话毫无意义。我相信有更多的高手能使用比我更恰当的技术来完成自己的项目，所以在下才把这篇文章发上来，希望能互相学习。大家尽管拍砖啦….嘎嘎嘎~~
原载:彬Go–集前端开发/网页设计/网站可用性/用户体验于一体的趣味互联网生活
本文链接:http://blog.bingo929.com/tianjin-ma-jiang-mahjong-contest-website-ui-design-css.html
英文原文:95 Fresh Examples Of Single Page Website Designs
翻译原文:推荐95个极富创意的单页网站设计实例欣赏(彬Go)
网站用户界面设计(俗称网页设计)命名规范。
这套规范并非单纯的CSS、html或JavaScript命名规范，它涉及了很多使用PhotoShop这类设计工具进行网页设计过程中的命名规范。(好久没写文章了，有点罗嗦，吼吼~)。首先我是出于公司几位美工的设计效果图源文件没有对图层命名而开始考虑总结一套的，还有一个原因就是网上大多命名规范都是关于编码的，也就是那些css、html、js和一些服务器端语言的，至于设计方面的命名规范实在是很少。但是毕竟设计师也是技术团队的成员，而且前端开发工程师是要使用设计师的效果图源文件的，所以统一命名规范和设计规范对于团队的协作和工作效率肯定是有好处的。
这套WebUI设计命名规范总结自我的一些Web设计经验和国外设计师的命名方式推荐。
一.网站设计及基本框架结构:
1. Container
“container” 就是将页面中的所有元素包在一起的部分，这部分还可以命名为: “wrapper”, “wrap”, “page”.
2. Header
“header” 是网站页面的头部区域，一般来讲，它包含网站的logo和一些其他元素。这部分还可以命名为:”page-header” (或 pageHeader).
3. Navbar
“navbar”等同于横向的导航栏，是最典型的网页元素。这部分还可以命名为:”nav”, “navigation”, “nav-wrapper”.
4. Menu
“Menu”区域包含一般的链接和菜单，这部分还可以命名为: “subNav “, “links”，”sidebar-main”.
5. Main
“Main”是网站的主要区域，如果是博客的话它将包含的日志。这部分还可以命名为: “content”, “main-content” (或”mainContent”)。
6. Sidebar
“Sidebar” 部分可以包含网站的次要内容，比如最近更新内容列表、关于网站的介绍或广告元素等…这部分还可以命名为: “subNav “, “side-panel”, “secondary-content”.
7. Footer
“Footer”包含网站的一些附加信息，这部分还可以命名为: “copyright”.
二.需要注意的几点:
1.尽量考虑为元素命名其本身的作用或”用意”，达到语义化。不要使用表面形式的命名.
如:red/left/big等。
2.组合命名规则:
[元素类型]-[元素作用/内容]
如:搜索按钮: btn-search
登录表单:form-login
新闻列表:list-news
3.涉及到交互行为的元素命名:
凡涉及交互行为的元素通常会有正常、悬停、点击和已浏览等不同样式，命名可参考以下规则:
鼠标悬停:：hover 点击：click 已浏览：visited
如:搜索按钮: btn-search、btn-search-hover、btn-search-visited
三.Photoshop图层结构规范:
Photoshop图层命名遵循树形结构，凡某元素组成的图层大于3层，即可形成组，所有图层尽量避免使用默认命名(图层+编号)。
第一级图层结构如下图:
第二级结构图例(医院网站):
第三级结构图例及效果图对比(医院新闻栏目)：
效果图
图层命名结构
四．常用命名汇总:
页头:header
登录条:loginbar
标志:logo
侧栏:sidebar
广告条:banner
导航:nav
子导航:subNav
菜单:menu
子菜单:subMenu
下拉菜单:dropMenu
工具条: toolbar
表单:form
栏目:column
箭头:arrow
搜索:search
搜索按钮:btn-search
滚动条:scroll
内容:content
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
链接:links
页脚:footer
服务:service
热点:hot
新闻:news
下载:download
注册:regsiter
状态:status
按钮:btn
投票:vote
合作伙伴:partner
版权:copyright
网站地图: sitemap
以上命名规范仅供参考。如果大家对于Web UI设计规范有自己的见解，欢迎大家在此留言一同讨论，互相学习，共同进步:)
原载:彬Go–集前端开发/网页设计/网站可用性/用户体验于一体的趣味互联网生活
本文链接:http://blog.bingo929.com/web-ui-design-name-convention.html
今天在看我博客的访问统计的时候，看到了一个比较熟悉的网址，就是帕兰映像的博客，遂点击链接过去看看，结果发现了一个非常非常值得收藏的文章，这篇文章总结了许许多多CSS(xHTML+CSS或称DIV+CSS)的技巧、教程及资源。其中也有很多值得我学习的知识，相信这些资源对大家来说也是非常值得收藏的，看过之后收获是一定滴！所以转载到自己的博客上跟大家分享一下，在这里先感谢帕兰映像的辛苦总结。值得高兴的是，这篇文章中也包含了很多彬Go以前发表过的一些CSS教程或资源等。各位读者瞪大眼睛准备好哦，以下是原文:
我总是对每一个想学CSS的朋友说: “学CSS真的很简单，一个星期就搞定。” 但真的这么简单吗？魔方也很简单，拿到手里就知道怎么玩了，但最高境界却不是几天或几个月就能修成的，甚至根本就不可能达到，永远需要提高，看似痛苦，同时也享受升华的乐趣，CSS也一样，痛并快乐指的就是这些东西吧。
本文里面收集一些有关CSS的技巧、教程、工具和观点等，其中一些你也许早就运用的炉火纯青，也可能有的你听都没听说过。不管是新手还是高手，大家都继续学习吧。
要玩游戏，就得先了解规则。要学CSS，就应该先了解一下Web标准。尽管看上去不是必须的(我在学CSS之前，根本不知道也不想知道Web标准是 个啥玩意儿)。应该说，你是否学Web标准，跟你是否能学会CSS没有什么关系，但跟你能写出什么样的CSS，以及XHTML或其它代码，跟你能做出什么 质量的网页有很大的关系。
其实我自己对Web标准也不甚了解，尽管我看过不少关于Web标准的文章和书。(我总是这样，对学术性的概念名词永远都似懂非懂的)，所以每次谈到Web标准，我头里就会有一堆问号:
我个人比较乐意看成前者，努力靠拢就好了，但没必要为了标准而标准，自己为难自己。
呃，本来只是想随便写点文章引语，闲扯太多了，还是看看下面这些有关Web标准的东西吧，有助于你了解这个东西。
这篇译文里介绍了14个工具可以方便的验证你的CSS以及HTML和RSS源。你别看我上面说了一堆看似反验证的话，其实我也挺在乎这个东西的，我也每次都玩验证，只是当碰到很难解决无关痛痒的东西时，我不会为难自己。我只是想告诉你，别对自己太苛求了，别让自己太累。
我不是什么Web前端观察家，我个人发现的两个可能并不正确的网页布局趋势是:两栏和水平条。
说两栏是趋势似乎有点唬烂，两栏本身就是最基本最常用的布局，但之所以成为更加流行的网页设计趋势得益于Web 2.0的流行，你很少会看到一个Web 2.0网站把自己做成门户般的杂志型布局，大家都力求简洁。当然，在国内，还是有很大一部份个人站长和企业喜欢把自己的网站挤得密密麻 麻，Magazine的非常厉害。这恐怕也不能说谁前卫谁落后，好的Magazine布局确实能让人产生一个感觉或错觉: 这个网站很专业，做的很大，很优。我个人是希望简洁两栏真的能成为趋势，每次进入门户型布局的非门户级网站时，就感觉自己掉进了一堆链接的海洋里。
水平条成为趋势则源于宽屏浏览器的普及，它能让你的网页不管在各种宽屏分辨率下显得协调美观。比如帕兰映像的网页主体是960像素固定宽度，我的电 脑分辨率是1440*990像素，如果没有水平条，总感觉网页太空，尽管留白也是一种设计技巧，但并不是这样的留白。尽管还有另一种解决方案是自适应宽 度，但我个人觉得，对于大多数网站来说，自适应宽度并不是一个好方法，它解决了宽度的问题，却又让网页产生了很大其它破坏视觉的问题。
还是让我们看一些关于CSS布局的技巧吧。
网格布局的页面能给人简洁明快、层次分明的感觉。之前帕兰映像里面也介绍过一些网格布局相关的文章: 探索极简派设计/Minimalist Design，32个网格布局的网页设计欣赏和960网格系统等。如果你也想制作一个网格布局，可以看看这些在线生成器。
我喜欢3栏布局的网页设计，尽管时下正火的Web2.0似乎很少采用3栏布局。但没关系，我们是非非非主流。 但是3栏布局相对来说就比较复杂，有些难以控制，Noupe发表一篇文章，收集了9个号称永不过时的三栏布局设计技巧(9 Timeless 3 Column Layout Techniques)。
使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效。本文里介绍了使对象垂直集中的5种不同方法，以及它们各自的优缺点。
网络上有朋友把CSS BUG编成了顺口溜了！是否有效不好说，但至少是蛮有趣的。
讲解如何通过设计一个HTML/CSS的基本结构，来创造一个简单且常用的三列式固定页面布局。
使用XHTML+CSS来实现元素的垂直居中一直是前端开发中的一个比较复杂且棘手的问题，作为网页设计师或前端开发工程师，这个垂直居中问题也是 必须掌 握的技巧之一，一些互联网公司面试题中也会出现这类题目。本文分享一个由aka Yuh?发明完美通过CSS实现垂直居中的方法。
经典得一塌糊涂的表格布局，在渐进增强面前落花流水–表格布局要求书写HTML代码时，首先考虑布局，而不是内容。不啰嗦，直接枪毙。
这份列表收集一些比较优秀的CSS布局，这些布局都免费供个人和商业使用。当然，你使用之前还是得看版权说明，也许会发生许可协议变更。 Layout Gala- 这个网站收集了40多个专业的CSS布局，每个布局都通过了CSS和HTML验证，且不需要Hack，兼容各大主流浏览器。
推荐43个实例xHTML+CSS(DIV+CSS)网页及导航布局教程，在国外也可以叫做PSD2XHTML。如果你是以为网 页设计师，可能会对将自己的效果图实现成语义化的xHTML页面感到头痛，还有一些CSS初学者对于xHTML+CSS处于懵懂状态，希望大家通过这43 个”DIV+CSS”实例教程学习到语义化xHTML+CSS布局的精髓，即使你已经成为高手，我也相信其中有你值得学习的地方。
这篇文章详细介绍了CSS定位属性Position的各个值的用法，和一些实例说明，以及相关的绝对定位布局和清除浮动列等CSS技巧。
定位一直是WEB标准应用中的难点，如果理不清楚定位那么可能应实现的效果实现不了，实现了的效果可能会走样。如果理清了定位的原理，那定位会让网页实现的更加完美。
使用Position:fixed属性可以实现固定元素于窗口某位置，比如帕兰映像的头部工具栏和底部工具栏就是使用这种效果, 但IE6并不支持这个属性，帕兰映像里使用的方法是利用IE的条件注释让IE6下非固定，显示不同样式。如果你想实现高度统一，可以看看这篇文章教你如何实现。
这些设计里面，有紧凑型的网格布局设计，同样也有使用大量空白间距的网格布局。
最初知道CSS Sprites的时候，大家都还不知道该如何恰当的翻译这个技术名词，有人称其为CSS妖精，CSS小鬼等，听上去是蛮可爱蛮特别的，但会让人纳闷这倒底是个什么东西。最近发现大家开始把这项CSS技术称为图片合并，感谢还是蛮贴切的。
CSS Sprites目前已经成为非常流行的CSS技术应用，你随便到一个经常逛的著名网站看看，会发现大家都在使用这项技术，比如淘宝、谷歌、豆瓣、土豆等等等等。简单的说，CSS Sprites主要就是提高网页载入速度和防止图片加载延迟，这对于大流量的网站来说是非常重要的。
学习CSS Sprites是件很简单的事情，比较麻烦的是合并图片和写CSS时的定位，更麻烦的后期的维护管理。但不管怎样，做为一项有效实用的CSS技术来说，如果你是一个Web前端开发者，你很有必要掌握这项小技术。
本文的目的并不是讲CSS Sprite如何让一个网站更快，而是说一些使用CSS Sprite的时候的一些最佳实践。
不只背景图片可以合并，前景图片同样可以合并，本文介绍了Google网页里是如何对两个元素进行定位和溢出截断，来实现前景的图片合并。
P.S 其实才学习CSS Sprites的时候，就想着前景图片也一定是可以合并的，可自己却又一下子想不出来什么方法。看过这篇文章后，才发现是如此的简单，不禁为自己的智商挫败了好几秒
非常非常全面的一篇文章，详细介绍了什么是CSS Sprites, 哪些著名网站使用了CSS Sprites，使用更好的使用CSS Sprites等等。
我知道现在有成千上万个关于 用CSS处理圆角 的教程，但不管怎么说，我仍然想把这篇文章展示给您。也希望您会发现这篇文章会非常有用。需要重点指出的是，这篇教程彻底地应用高级CSS技术，但是，我 会尽力使初学者看起来简单。CSS3 在这里还没有得到完全的应用，所以，知道现在，我会保持W3C验证的有效。
这篇文章不是告诉你什么是CSS Spries，也不是告诉你如何使用CSS Sprites，而是 — 为什么要使用CSS Sprites?
我个人对CSS优化的看法是: 在语义化的前提下，对代码进行精简。如果是大型网站，则又考虑CSS的结构化和模块化。所以CSS的优化就包含了命名规范、CSS Reset、语义化、结构化和模块化等等。
至于CSS与SEO一说，倒还真不敢苟同。不过，不管它们是否有关联，你都应该尽量去学着写出一份拥有良好语义并尽量简洁高效的CSS样式表。
CSS的优化通常包括两方面: 格式化CSS和精简CSS。精简CSS的办法是把具有相同属性的元素合并在一起，但这会降低代码的可读性，使代码的后期维护很麻烦，稍不注意就出错。格式 化CSS一般就是多行模式或单行模式的选择。本文里面介绍了8款工具能让你方便的优化和格式化CSS的在线工具。
管通常一个CSS文件占用不了什么带宽, 但之于网页设计, 在不影响整个网页构架与功能的情况下, 网页文件越小越好. 因为更小的网页文件有利于缩短页面的载入时间. 更重要的是, 相同的页面排版和结构, 能用最简洁的代码来实现, 也应该是每个网页设计师对自己的一种要求.
作为一个网站设计/开发人员，你必须不断寻找方法来减少设计/开发过程中所花费的时间。这对于提高你的工作效率并最大化你的利润是非常重要的。下面介绍的按功能分类的CSS工具可以有效地节省你设计网站的时间。
CSS简写就是指将多行的CSS属性声明化成一行，又称为CSS代码优化。CSS简写的最大好处就是能够显著减少CSS文件的大小，其实还有很多其 他益处。臃肿而杂乱的CSS样式表会使你遇到问题是难以调试。尤其是当一个团队在进行设计的时候，你的臃肿的CSS代码会使你的团队其他成员的工作效率下 降。
CSS的命名规则入手会有意想不到的收获，最基础的就是最有效的。 下面从前端设计的角度整理的DIV+CSS的命名规则，就很好地考虑到了搜索引擎的喜好，在页面设计的过程中，尽量做你懂，搜索引擎也懂，何乐而不为呢。
Web UI设计命名规范，也就是网站用户界面设计(俗称网页设计)命名规范。这套规范并非单纯的CSS、html或JavaScript命名规范，它涉及了很多使用PhotoShop这类设计工具进行网页设计过程中的命名规范。
收集了15套CSS重设实例，您可以在前端开发工作中进行参考和使用，有些是很简化的CSS Reset，有些则是非常复杂非常全面的CSS Reset，至于使用哪套，全看您的爱好或需要。
CSS代码的命名惯例一直是大家热门讨论的话题。本文通过分析一个流行三栏布局中的必要元素，来为大家讲解关于使用语义化方法替代结构化方法来命名CSS类的建议和指导。
关于如何模块化CSS来实现更有效管理CSS的一些见解。
这是一篇关于如何编写具有良好结构的CSS文件的帖子。我已经讲过CSS文件的代码可读性，但在讨论之后，一些更具体的要求被提出（主要是关于一些读者在管理具有大量布局元素CSS文件时的困难之处），所以我决定在这些案例中说明我自己的开发流程。
我个人是觉得讨论CSS属性的书写顺序有点没意义，或者说即使有意义，一定要弄一套书写顺序去框住自己，实在又是一件自己为难自己的事儿。只要保证每一个属性和值都有用，当冲突时，该前的在前，该后的在后，也就好了。
想一想，我们花上一大把的时间去研究CSS Hack，研究IE为何如此的叛逆，做项目时可能就因为某个兼容问题给卡死个半天，这些时间如果用来学一门其它技术，可能早已修炼成该技术的专家了，并且 是有用的。而精通Hacks并不是件值得骄傲的事情，而是所有开发者的无奈和悲哀。
没关系，我是这么安慰自己的:当年没有CSS的时候，多少站长花了比现在10倍甚至百倍的辛苦来建站和维护，当有CSS后，他们默默的选择过渡，而不是难过的去自杀。那个不是说了嘛，往往都是事情改变人，人改变不了事情，我们能做的，只能是适应每个过程。
本文里面，介绍了10个很实但IE却不支持的CSS属性，列出这些属性并不是为了数落IE(数落也没用), 而是你了解了哪些CSS属性是IE不支持的，就更有针对性的去编写CSS和Hack。
我们知道，IE6可能过不了多久就会消失了，但是我们还能继续支持这个浏览器并且避免hack和有约束的CSS吗？这里是10个使用有效的HTML和CSS代码来修正IE6主要问题的方法。
一个系列文章，包含了很多IE6 BUG的详细介绍，比如IE6中奇数宽度的BUG，PNG Alpha透明，像素BUG的实例，IE6文字溢出BUG等等。
CSS兼容问题一直困扰着CSSer，面对各浏览器，往往感觉束手无策，愁眉不展。CSS Hack是在标准CSS没办法兼容各浏览器显示效果时才会用上的补救方法，在各浏览器厂商解析CSS没有达成一致前，我们只能用这样的方法来完成这样的任 务。本文里面收集了非常详细的CSS兼容问题。
Web 开发人员的使命就是面对不同的浏览器。自 Web 标准运动的诞生起，有个宿命从 Netscape Navigator 4 开始就被延续着，就是那些过时的浏览器拒绝死亡。它们顽强的存在，阻碍了现代标准的发展。而今天，这个宿命降落到了 Internet Explorer 6 身上。
就像本文开头所说的，CSS像魔方一样，有数不清的玩法，即使你是高手，永远都有你不了解的地方。有一些CSS技巧并不常用，一些CSS技巧完全是实验性质的，还有一些完全甚至是代码写错误打误撞搞出来的结果，比如本站之前介绍的CSS实现的标签云远视效果。
你很可能没有听过上面这些CSS术语？事实上，我在这之前也不了解，但你可能看到过conten:after和content:before这样的 CSS代码，利用这样一些CSS属性可以实现内容的渲染。尽管这些属性存在浏览器兼容性和W3C验证的问题，但了解一下还是蛮有趣的。
zip文档链接前面显示显示一个zip文档图标，PDF则显示PDF图标，以此类推，听上去很酷吧。更酷的是，你只需要使用CSS而不是JS就能实现这项功能。这篇教程告诉你如何通过CSS的属性选择器来制作个性化链接样式。
当做一个页面时，如果页面内容很少，不足于填充一屏的窗口区域，按普通的布局，就会出现下面图片中的样子(也就是底部内容并没有位于窗口的底部，而 留下了大量空白。对于追未完美的设计师来说，这是不美观的。网上有一些解决方案，但会出现当改变窗口高度时，底部和正文重叠的BUG。尽管没有多少人会有 事没事儿的去改变窗口高度，但设计嘛，追求的就是尽善尽美。
一个超强的CSS 布局，没有div，没有float, 没有clear, 没有hack， 没有和你开玩笑，确实是一个CSS 布局。出自TJKDesign 之手，你可以查看DEMO 演示 或阅读该布局设计师的文章说明。
在前端开发的时候，经常用到板块背景的透明度， 但当父层透明时，其中嵌套的子层也会继承其透明性。而这并不是我们想要的，比如，我们只是想要某个块状元素背景透明，而背景层里面的文本子层则非透明。
为你平淡乏味的图片添加更多趣味情调的简单技巧。使用Photoshop为每个图片添加某种样式虽然可行，但会是相当乏味且困难的长久工作。本文要介绍的CSS技巧将帮助你从痛苦中解脱出来！
一些比较高阶的CSS技术应用介绍，全学完这些教程，你的CSS水平将提高很多，废话
都说了必备了，你不看看实在对不住自己千万的Web开发同胞了…
CSS2的出现让web顿时丰富起来，特别是web2.0时代CSS成为每个web页面都必不可少的元素。但是随着web技术的发展，CSS2已经 不能满足web开发的需求，例如属性选择、AJAX出现后与JS的交互等，因此对下一代的CSS需求越来越明显。目前CSS3还处于草稿阶段，但是其某些 特征已经让人兴奋不已。
目前主流浏览器Firefox、IE7/8、Webkit等都已经部分地支持CSS3。因此提前了解CSS3是十分必要的。下面提供的20个学习资 源中，多数是单篇的文章和访谈记录等，可见这方面的资源还是比较少的，作为一个真正的CSS开发者，走在别人的前面提前了解、运用、研究CSS3也是十分 必要的。
一些有关CSS 3技巧和教程的资源整理。
如果你关注CSS，那么你一定听说过CSS3,它是本应该在几年前问世的下一代样式表语言。 是的，CSS 3样式文档至今还没有最终完成。如果你已经急不可待了，那么你也不必感到孤独。虽然这它还没有最终定型但是很多浏览器厂商已经开始支持其中的一些新特性了。
本文列出了20个对你学习CSS3大有帮助的网站资源。
不需要图片，只需要充分利用CSS3的圆角、盒子阴影和文字阴影效果，同时使用RGBa色彩，就能实现非常漂亮、非常流行的文字阴影圆角按钮效果。
CSS是众所周知且应用广泛的网站样式语言，在它的版本三(CSS3)计划中，新增了一些能够节省时间的特性。尽管只有当前最新了浏览器版本才能支 持这些效果，但了解它们还是必须且很有趣味性的。本文向大家展示CSS中的5个有趣的新技术:圆角、个别圆角、不透明度、阴影和调整元素大小。
能用CSS实现的效果，就尽量不要使用JS。但如果使用CSS需要很繁琐的代码，那用CSS也不见得是好事儿。这里是25个高级CSS技巧，有助于你提高你的CSS水平，让你对CSS的掌握更上一个台阶。
SS可以让网页设计中实现很多丰富和独特的技术. 今天,我们就围绕着CSS技术展示全面的探讨, 为你找寻一些最具创造性的CSS技术和使用技巧. 绝对值得喜欢网页设计的你一看.
nettuts带来的5个css书写技巧9(link)，简单翻译一下它的中心思想。包括一些代码书写顺序、CSS Reset等，不一定对，但可以做参考。
对于小的Web开发项目来说，CSS 框架并不一定就适用，至少不见得能提高多少工作效率。但对于一个开发团队和规模比较大的项目来说，CSS 框架不仅能加快设计进程，更能解决网站改版中带来的诸多麻烦和问题。
最好的解决方案往往是最简单的，这里列出8个CSS技巧，非常简单，简单到只需要写一行代码，只需要定义一个属性参数。非常适合学习CSS的新手朋友阅读。
按钮是网站中非常重要的一部分, 它们常用于引发访客点击和产生互动。下面收集了11个css按钮教程，教你如何创建吸引访客目光的按钮。我最想推荐的其实是第一个， Google custom buttons. 在Recreating the button这篇文章中，作者详细向我们介绍了google现在很多应用服务中（google reader, gmail等）。其中包括需要用到一张渐变背景图的3.0版本…
如果您经常性地需要建立和开发新的网站，那么您就应该考虑使用模板创建，收集有用的代码片段等等。为了加快开发的进程，您就应该这样做，在需要的适 合您可以使用、修改并优化这些模板文件；如果是作为商业用途的您应该检查下许可条款。然而，到目前为止，这是从最榜的站点中挑选出来的最好的站点的普通清 单。好好地使用它们吧！
CSS的学习过程既可以说简单又可以说是复杂。CSS的语法比较简单，但CSS的应用中有一些概念(一可以说是原理)还是很难掌握的。本文推荐了 20个出色的CSS技术类(英语)网站帮你更好的理解和掌握CSS，其中包括各种各样的网站，从博客到清单风格列表甚至网站，它们都侧重于研究同一个主 题，那就是CSS。
发现很多朋友对 CSS 的优先权不甚了解，规则很简单。需要说明的一点，如果你的样式管理需要深层判断 CSS 的优先权，更应反思自己的 CSS 代码，是否合理？是否优化？ CSS2.1 中规定了关于 CSS 规则 Specificity（特异性）的计算方式，用一个四位的数字串（注：CSS2 中是用三位）来表示，最后以 Specificity 的高低判断 CSS 的优先权。
CSS2各个属性被各个浏览器支持的问题，css>继承，css叠加等等，我们经常因为这些而需要调试页面中css。 本文里面，作者分享了自己一些页面中css调试和问题解决的的经验。
你见过的最炫目的网站设计通常都是个人网站，尤其是设计师的Portfolio。但最漂亮不代表最成功，CSS是用来玩花俏的视觉效果的吗？一些设 计师在尽可能的发挥着想象力做些炫目和富有创意的网页，也有一些设计师，在反对对网页中过度的视觉设计。到底该选择什么呢，看你自己了。
我们在写css的时候最常用的长度单位是px（像素），经常看到的还有em，pt等等，其实css中的长度单位一共有8个，分别是px，em，pt，ex，pc，in，mm，cm；那我们到底该用哪种单位呢?
网页设计中的每个元素都是长方形的盒子。 了解盒模型这个概念有什么好处呢？我只能用我的感受来向你描述一个这个东西: 当开始样式化一个网页时，你就会把网页看成一个杂乱堆放了很大不同大小盒子的地方，而你所需要做的，只是把这些盒子拉高、拉宽和移动。然后，一个网页的布 局就OK了。
本文转自:60+CSS技巧教程资源大全(帕兰映像)
CSS3为我们带来了令人惊叹的新特性，而最有趣的就是CSS动画。今天彬Go向大家推荐这50个CSS动画集合可以让你通过使用JavaScript函数来让动画更生动。为了能够预览到这些惊人的CSS3技术带来的动画特效，请大家使用如Safari和Chrome这类基于WebKit内核的浏览器。(IE浏览器谢绝观赏~)
您还可以参考以下CSS3相关文章:
《5个CSS3技术实现设计增强》
《一起感受HTML5和CSS3的能量》
《提升你设计水平的CSS3新技术》
使用CSS3的基本变形特性:rotate，并结合了jQuery这类javaScript框架制作的CSS3时钟效果。 
模拟时钟基于过渡webkit和CSS3变形，javascript用于将其按当前时间转动。 
你可以使用上、下、左、右方向键控制这个3D立方体，它是基于webkit-perspective, -webkit-transform 和 -webkit-transition 创建。 
多种3D立方体使用CSS3和它的属性’transform’ 和 ‘transition’ ，我个人觉得效果很震撼，你能看到写在3D立方体上的透视感极强的文字。 
使用CSS3实现的手风琴菜单效果，基于webkit浏览器专有属性。 
自动滚动视差效果使用WebKit的 CSS transition 属性。该效果无需JavaScript。 
Isocube有些类似于3D立方体，但也有不同之处，它可以让他片贴在立方体面。 
黑客帝国是最棒的科幻小说改编电影之一，现在使用纯CSS就能实现电影中的矩阵效果。 
7种CSS3结合javascript技术的特效实例. 所包含的效果有淡入淡出, 震动, 轻移, 扩大, 跳动, 旋转 和 手风琴效果。 
六个由CSS3替代JavaScript而实现的鼠标悬停图片效果，CSS3实现这种悬停效果依然很炫！ 
宝利来画廊是由CSS3技术实现的将一些照片堆在一起，有趣的是鼠标悬停照片是，照片会旋转并缓慢放大~ 
CSS3模拟的mac操作系统菜单… 
该效果使用了CSS3过渡和些许HTML，在它上面放一个唱片专辑会看上去更生动。 
该效果会将一个照片列表按顺序排列，并把它们按不同的角度旋转，使用了CSS2和CSS3技术，无JavaScript。它从图片的alt属性中读取出照片描述并放到了照片的下方。 
第一个CSS3逐帧动画实例需要你持续使用鼠标点击图片，当播放到最后一帧时它会自动播放第一帧，如此循环，但第一个实例只能在FireFox和Opera下实现。第二个Css3逐帧动画实例需要你使用鼠标在图片上移动，依旧是mousemove这个动作，只要鼠标在移动图片动画就会持续播放，但动画的播放速度是与你的鼠标移动速度有关的，该实例支持Safari, Google Chrome, IE8, Firefox 和 Opera。 
英文原文:50 Awesome Animations made with CSS3
翻译原文:用CSS3制作50个超棒动画效果教程(彬Go)
如果说是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设计实例开始吧！
这是一个非常简单的table应用的例子，它的1px边框及行列的长宽设置使得整个的表格表现出来的内容更直观易读。
这个table是对上面那个的改进，增加了背景色并减少了横向border的数量，使得表格数据垂直方向的对比性更强。
这个table则对上面效果的横向可读性作了改进，通过为header设置相对于其他元素更为突出的背景色实现。
通过设置橙色和table内部的虚线框，使得table的外观更具视觉辨识度。
使用单双行间的交替色提高table的可读性。这种效果更适合阅读习惯，减轻视觉疲劳。
这种设计使用间隔色和突出的header背景色，更适合data显示。
这是一个使用jQuery建立表格的应用，这个Table jQuery插件设计的也是非常的简单易用，。
在这个设计中，使用了黑底白字的显示效果，并且将header行用渐变的对比色、分类图标和内容块区分开来，该设计最特色的功能就是，使用jQuery TableSorter Pager可以将每列的数据进行递增和递减排序。
文档地址： http://motherrussia.polyester.se/docs/tablesorter/
3， EXT JS
这是一个XML Grid实例，告诉你怎么load XML数据形成grid。这个table有蓝色和灰色两种风格。你可以点击这里查看实例演示。
这是另一个来自Ext JS的table设计实例。这个实例教你怎么创建一个可以进行单元格编辑功能的table。所有的table内容全部可以由你来定义。你可以点击这里查看实例演示。
4， ZAPATEC
很喜欢这个table设计效果，包括它的3D效果和灵活的可操作性，都让我叹为观止。这个table的边框设计的很好，使整个的table看起来有了3D效果。还有header的背景图设计和当前操作行的突出色彩都是非常的到位。
实例演示地址： 点击这里查看
5， VALIDWEB.NL
又一个单双行交替色使用的table设计，整个的鼠标操作事件的样式做的很不错。点击这里查看一个实例。
来自知名博客Veerle.com的一个table设计实例，除了很好的色彩搭配外，其可用性也是非常的好。
详细的文档可参考博客原文：http://veerle.duoh.com/demoblog/comments/a_css_styled_table/
这个设计充分利用了橙色素的对比度，来区分heade行和第一列。如果你是要在一个大的table中，突出显示一个单元格数据的话，这个效果就非常的有用了。当鼠标点击某一个单元格时，该单元格的样式会突出显示。实例的最终演示效果，查看这里。
这是一个来自著名的技术博客 SMASHINGMAGAZINE 的一个table应用项目，该项目把table的应该发挥到了一个如火纯清的地步，有很多实用的例子可供参考。
最后，告诉大家一个链接地址http://icant.co.uk/csstablegallery/ – 该网站整理里非常多的CSS Table设计实例，在你进行table设计时，不妨先去看看别人的东西。文章翻译整理自：30+ Nicest Table CSS Designs You Can Apply Into Your Project。
一般而言，CSS类名的语义化声明方式应当考虑你的页面中某个相对元素的”用意”，独立于它的”定位”或确切的特性(结构化方式)。像left-bar, red-text, small-title…这些都属于结构化定义的例子。
让我们看看下面这个例子:
…而现在我们想把页面中的元素调换一下位置，如果你使用的是结构化方式(1)，那么你就要把所有CSS类名重新进行定义，因为它们的位置变了。在布局(3)中，我们看到元素都倒转了: right-bar 现在成了 “left-bar”，而 left-content 成了 “right-content”。如果你使用语义化方式则避免了此类问题。
换句话说，使用语义化方式的话，你在修改网站布局的时候可以仅仅修改相关CSS类的属性即可，而不用修改它们的类名了，如果网站的代码很庞大，这将节省大量的时间。
彬Go会经常更新前端开发/网页设计等相关技术及教程文章，欢迎订阅本博客来及时浏览本博客的最新教程及资源。
在开始之前，我想推荐两种简单的编写较好的CSS代码的指导方针:
<div class=”main”>
<div class=”main-title”>…</div>
<div class=”main-paragraph”>…</div>
</div>
而要这样写:
<div class= “main” >
<h1 >…</h1>
<p > … </p>
</div>
让我们来通过这个简单的例子讲解一下如何为经典的三栏布局使用语义化方式命名:
使用语义化方式为CSS命名可以像这样:
#container{…}
/*– Top section –*/
#header{…}
#navbar{…}
/*– Main –*/
#menu{…}
#main{…}
#sidebar{…}
/*– Footer –*/
#footer{…}
原载:彬Go
本文链接:http://blog.bingo929.com/css-coding-semantic-naming.html
英文原文:99 High-Quality Free (X)HTML/CSS Templates
翻译原文:99款高质量免费(X)HTML/CSS模板(彬Go)
