原文链接：http://www.thinkvitamin.com/features/design/creating-sexy-stylesheets
版权声明：本文版权归原作者所有 译介仅供国内读者参考
如果你想成为一位CSS专家的话，光背出一堆选择器是不够的，还要能够提高CSS样式表的可读性，开发效率以及维护性。这里，Jina Bolton 将给我们分享一下她关于如何创建性感的CSS样式表的十个技巧。
本文主要内容为：CSS代码编码规范，教你如何写出整洁漂亮性感的css代码，如何清晰的组织你的样式表文件。闲言少叙，直接进入正题，完整文字请查看原文。doubanclaimff3e7764f748141c
1. 不要在HTML文件中使用CSS样式定义
相信对于多数有一定工作经验的设计师来说，使用外部样式表来定义CSS样式是小菜一碟的工作。但我在这里仍然需要再次告诉你这点，因为我看到相当多的站点在最开始的时候，有着非常结构清晰，组织良好的代码。但是随着时间的推移，慢慢地内部定义乃至内联样式开始蔓延到站点的各个角落。也许是因为项目周期十分紧迫，抑或只是因为我们有点偷懒。
想象一下，当这样的坏习惯被我们保持了下来，一段时间后，如果老板希望在不改动网页内容的前提下重新设计网站的样式的话，OH，你将不得不去查找这些自己丢在各个角落的垃圾代码，如果项目碰巧规模又非常之大，那我恐怕只有祝你好运，或者推荐你去找黄健翔了。
千万别给自己找这样的麻烦，创建干净的代码，并始终让他们保持干净，这样你会让生活变得充满快乐。
注意：请小心使用过多的外部样式表，如果每次更改你都创建一个新的样式表，这不会给你带来任何好处。过多的样式表会让你将来的调试和更新工作变得更加复杂，当然我理解你希望将样式分组管理的初衷，后面的内容中我会专门和你一起讨论这个问题。
友情提醒：过多的样式表应用，会带来潜在的性能问题，并且在IE6下，最多只能引入32个外部样式表。
2. “语义学Semantics”不是猜字谜游戏
我要告诉你们，“语义学Semantics”将是你们最好的朋友。在你选择最合适，语义最正确的元素来描述文档内容之外，也请选择语义清晰，合适的词语来定义你的class名称以及元素ID名称。不仅仅是做正确的事，这样做还能让你和你的团队成员的工作变得更加简单。让我们来看一条样式定义：
.l13k { color: #369; }
我相信你乍看到这条定义，你能否知道它是用来干嘛的吗？我想你肯定答不上来。这个名称应该是某个只有作者本人知道的缩写，即使作者现在知道含义，但一个月后，一年以后你还能知道它的含义吗？让我们再来看一条定义：
.left-blue { color: #369; }
这条定义，你可能立刻猜到它是用来干什么的了，页面左边区域，文字颜色为蓝色，表述的非常清楚明确。但是让我们来假设一下，不久的将来，老板希望重新设计样式，这个区域的内容位置将换到右边，文字颜色将换成红色。很显然，这个名称将变得不再合适，甚至变得不正确，现在你有两个选择，一是替换掉每个使用该class的地方，二是继续使用这个让人产生误解的名称。
这样看来，名称不是描述清晰就是好的，我建议你们最好是不要采用诸如颜色或者是高度宽度尺寸等非常具体的细节来命名样式定义，同样的也尽量避免使用具有具体形象的词汇来命名（比如使用 box），这样的做法某种程度上破坏了我们希望将内容和样式分离的初衷。怎样做才是最好的呢，让我们来看一下这个：
.product-description { color: #369; }
这个定义命名，无论你重构多少次，它都是非常合适的，美丽的东西永远是美丽的。
原文出处：http://www.smashingmagazine.com/2008/02/26/navigation-menus-trends-and-examples/
版权声明：本文版权归原作者所有 译介仅供国内读者参考
BANG421388A95514C2DCE6B44914XIANGUO
对于一个网站来说，导航栏菜单应该是最为重要的一个元素。由于网页没有什么可供用户作为定位的东西，所以全站一致的导航栏就成了少数可以给用户带来方向，引导他们浏览整个网站的元素之一。用户很依赖它，所以设计师绝对不能在这个地方马虎了事。
还是那句老话，最好的往往是最简单的，当然简单的东西绝对不代表就是乏味的。去年，我们就曾经就导航栏写过一篇文章 modern approaches of navigation design 。现在让我们看看这方面的设计的最新趋势吧。
下面就让我们来看看，最新的导航栏设计趋势，实例和一些非常炫的设计。
1.会“说话”的导航栏 （Speaking navigation）
对于导航栏来说，最重要的任务莫过于非常清楚的引领用户访问站点的每个模块。但是通常来说，很难用1-2个关键字来准确描述这个模块的具体内容和功能，特别是在水平导航栏布局下。这就是为什么通常导航栏不会简单地将关键字一个个排列起来来展示所拥有的选项（“沉默”导航栏 silent navigation），设计师多数会选择使用比较具体的描述来表达该选项的内容或者功能。
过去的几个月里，我们发现这种趋势越来越流行。
为了让信息变得更加容易接受，通常使用相同高度宽度的块状显示，大图标的使用也越来越普遍，当然评判导航栏好坏最主要的还是网页的整体布局和设计。鼠标悬停效果的设计使用，能让你的网页变得更加亲切。
最近在研究CSS，正好结合项目做了一个灵活的Tab页，使用纯HTML＋CSS实现，正好总结一下。
首先看一下预览界面：
样例HTML可以访问：http://www.demo2do.com/htmldemo/school/attendance/AttendanceGlobal.html
下面开始讲述一下完成上述页面的步骤。
1. 构建HTML
构建HTML是整个过程最基础的部分。我们构建HTML比较关键的一个原则就是尊重标签本身的语义。所以在这里，先分析一下期望做到的HTML的结构的情况，并加以分析，选择比较合适的HTML标签，而不是采用非标准的Table布局或者充斥着大量div和class的布局方式。事实上，现在存在着一种误区，就是凡事采用了DIV＋CSS的方式进行页面编程的就是Web标准的，其实这是错误的观点，很容易就导致了“多div症”（divitus）或者“多类症”（classitis）。
回到正题，我们分析一下页面样式，可以将整个Tab页分成2个部分，分别是一级菜单和二级菜单，他们有类似的特点，并以横向方式排列。HTML标签中的无序列表就可以反映出这种逻辑关系。所以我们分别采用2个无序列表来表示一级菜单和二级菜单。代码如下：
<div class=”navg”> <div id=”attendance” class=”mainNavg”><ul>
<li id=”attendanceNavg”><a href=”#” mce_href=”#”>考勤管理</a></li>
<li id=”teachNavg”><a href=”#” mce_href=”#”>教学管理</a></li>
<li id=”communicationNavg”><a href=”#” mce_href=”#”>家校互通</a></li>
<li id=”systemNavg”><a href=”#” mce_href=”#”>系统管理</a></li>
</ul>
</div>
<div id=”dailyAttendance” class=”secondaryNavg”><ul>
<li id=”dailyAttendanceNavg”><a href=”#” mce_href=”#”>当天考勤</a></li>
<li id=”leaveApproveNavg”><a href=”#” mce_href=”#”>请假审批</a></li>
<li id=”attendanceStatisticsNavg”><a href=”#” mce_href=”#”>考勤统计</a></li>
<li id=”attendanceCollectNavg”><a href=”#” mce_href=”#”>考勤汇总</a></li>
</ul>
</div>
</div>
03.1235套让人惊艳的图标下载（免费）
35套非常漂亮，让人难以置信的图标合集，最最重要的一点，他们都是免费的。
原文地址：http://www.smashingmagazine.com/2008/03/06/35-really-incredible-free-icon-sets/
本译介仅供国内用户参考
Bagg & Box Telecharger Icon Pack
Mammoth Icons
Dino Icons
03.12网络小说无责任书评
今天在KDS闲逛的时候看了个讨论网络小说的帖子，果然大家口味分歧还是蛮大的，我也帖些我挺喜欢的小说吧182d320b
1 仙侠类
《诛仙》 红透整一年的书，的确不错，“天地不仁 以万物为刍狗”，可以说修真小说的大红大紫由此正式开始，碧瑶一梦牵动人心啊，后面补出的结局我没看，因为据说不是happy ending，所以放弃了。 9分
《尘缘》 这本书，一位书友的书评“烟大，每月2更吧。。”，烟雨江南既《亵渎》之后的一本修真仙侠小说，十行留一坑，万字不知底，我个人对其评价是S级推荐，只要烟大不放弃。题外话，烟大好像是记者后来改行做资本运营，强大啊。 10分
《子虚》 剧情稍显老套，但整体还能凑合。 8分
《七界传说》 《玉仙缘》 《万神归宗》 《道儒仙缘》 都还不错 8分，《玉仙缘》里的小丫头和小师叔，好似双儿+小龙女，男生看起来总不会失望的。
2玄幻类
《亵渎》 烟大作品，品质保证，感觉跟玻璃渣有的一拼了，“睡觉睡到自然醒，数钱数到手抽筋。这就是罗格的幸福生活。”一个胖子，无意踏入命运的涡流，什么是力量的本质，是规则，很多人说网络小说没有营养，很多时候的确如此，但是有些好书，还是能给人不少启迪的。 9分 尾巴显得仓促了一点，和诛仙一个毛病。
《紫川》 一本太监了很多年却依然让无数人记住的书，大开大阖，波澜壮阔，人物塑造特别成功，或许有很多人和我一样，想到这本书的时候还期待着紫川秀，一马平川，直捣黄龙的后文，可惜作者不更新了，一切只能留在遐想中。书里的主旨和罗德岛战记类似，不论人类还是魔族，都是为生活而战，这样的战争只能说残酷，但没有正义与邪恶，魔皇毅然赴死，何等气概。9分
《佣兵传奇》的说不得大师和小生一样，也是个程序员出身，不过大大已经是天骄的项目经理了，俺还是个张江小民工，这本书也是个大坑之作，但是每章的开篇特别有新意，直到随波逐流的出现。8分
《庆余年》 《师士传说》 《升龙道》以及唐三少的一些列作品，都是能看看，但看完就有些嚼蜡之感的书，但看起来肯定不让人心烦，也是畅销书的一大特色了。
《剑魔异界录》 这倒是一本比较有特色的书，可惜也有tj的嫌疑了，独孤求败，破碎虚空。
3架空历史类
《随波逐流之一代军师》 “腰佩黄金已退藏，个中消息也寻常。世人欲识寒园客，只是江南读书郎”，随波逐流的书很有特点，有点像琼瑶的那些书，字词是非常的优美，古文造诣可见一斑，之前说到《佣兵传奇》的每章开篇，但军师的那些开篇更有了一些味道，我也颇好古文，总觉得读起来很有些味道，“楚江波，如烟柳，一叶轻舟慈父忧。蜀王恨，南廷漠，一朝烽火，几年离索。错！错！错！”推荐大家 10分
《泰坦苍穹下》 一本走了3年走完全程的宏大画卷，中世纪的大陆，宫廷，战场，卧室，我们的小奥斯卡成功扮演了诸多角色，作者花了不少心思在字里行间。“我不是命令你们去进攻，也不是命令你们去防守，我是命令你们去死”，这就是战争。就像谷子地听到的那句“只要集结号没有吹响。。。。”，男生看这个书，多少会血脉澎湃一下的。 9分
4武侠类
《昆仑》《沧海》 凤歌的书，也是很有特点的书，我估摸着凤大是数学系出身，书里对算术的描写颇为地道。文风也很清丽，明快，人物刻画起码在我看来是颇对胃口，也有朋友表示不过尔尔，大家试过也说说自己的看法。9分
《随波逐流之神龙传奇》 随波逐流的新书，一样的华丽文风，文采超卓，又没有卖弄的烟火气，我起点上的vip就是为他准备的，可惜出的实在太慢，其实人在江湖，谁不想能超然世外，过过普通人的生活呢。 9分
5其他
《寒医奇侠传》 一本LBmm的作品，女生写的言情武侠，倒也是颇有不同之处，杀伐之气少了些，细腻的感觉多了点，可惜貌似也tj了，难道mm也会这个？算是一本另类作品，有兴趣可以看看。
最后附个好帖子
http://www.ave7.net/forum/showthread.php?t=3374 百本好书排行，就是稍微老了点
03.118个一句话CSS小诀窍
最棒的解决方案往往是最简单的那个，提供8个一句话CSS小诀窍
原文出处：http://cssglobe.com/post/1392/8-premium-one-line-css-tips
版权声明：本文版权归原作者所有 译文仅供国内读者参考
1. 使用line-height（行高）垂直居中
line-height:24px;
对于拥有确定高度的元素，使用line-height可以将其内部元素垂直居中。PS. 原来的做法 valign 是一个不正确的做法。
2. 防止确定宽度的浮动元素布局被其内部超宽的元素破坏
#main{
overflow:hidden;
}
对于拥有确定宽度的浮动（float）元素，如果内部有一个超宽元素（比如一个很宽的图片），那你精心设计的布局可能就无法正常显示，最简单有效的防止手段就是 overflow:hidden;
虽然会隐藏掉一部分元素，但最大限度保证了整体布局的正确。
3. 防止链接换行
a{
white-space:nowrap;
}
很多时候，链接会非常长，如果换行变成2行乃至多行，可能对用户造成误导，建议使用这个方法防止该情况。（我本人到觉得要根据具体情况分析）