无意中发现这么一套给CSS命名的方式。不过纯属娱乐，5key还是不建议这么弄的。还是要注意语义化，大家看看就好。 一个简单的结构： <div class=”container”> 　<div class=”left-top”> 　　<div class=”right-top”>  　　　<div class=”left-bottom”> 　　　　　<div class=”right-bottom”> 　　　　　　　content 　　　　　</div> 　　　</div> 　　</div> </div> 老外用Unicode来给格式了一下： <div class=”□”> 　<div class=”┌”> 　　<div class=”┐”> 　　　<div class=”└”> 　　　　<div class=”┘”> 　　　　　content 　　　　</div> 　　　</div> 　　</div> </div> 明白吗？看看注释： .□ { /* container styles */ … Continue reading →

前端时间写了一篇《利用CSS框架进行高效率的站点开发》，有不少朋友问我相关的问题。很早5key就在公司进行CSS框架的架构，也对不少朋友提出CSS框架的建议。效果是很明显的。当然，CSS框架有利也有弊，最近也看了一些相关的文章。一些感想，与大家分享。 CSS框架之利： 1、开发效率的提高。 如果你是一个企业建站的前端开发，相信在大部分时间里进行着同类站点的代码工作。定义好的框架可以大大提高你的工作效率，避免一些常见的错误。如果你的工作是按件计费的，你的报酬一定会比别人多。 2、规范代码命名。 在多个站点中你可能会用到一些同样的CLASS或ID。如果你有一套完善的css框架，很快你就能对你的每一个站点的代码进行通读。不用浪费时间在代码的阅读上。 3、更好的团队合作 有些公司会将一些稍大的站点的前端代码分成若干子项目。有过此类经验的朋友应该对这种开发方式深感郁闷，要注意公用css，还有注意相互之间的代码配合。久而久之，废弃代码越来越多，互相之间也难以阅读。如果建立好合适的CSS框架，大家可以减少很多不必要的错误，提升产品质量和工作效率。 4、解决浏览器的兼容性问题 现在大部分项目都要求兼容IE6，7和FF。每个站点可能都会花上一部分时间去处理兼容问题。在框架层面上就将这个问题处理好。就可以为后面的兼容问题节省下大部分时间。 5、一套完整的、结构清晰的结构代码。 CSS框架为你的项目提供一个干净、严谨的基础架构。通过它你可以快速的为你的站点搭建基础的html代码框架。万事开头难，前面的基础工作做好了。后面的开发速度会提高很多。 最近事情多，《css框架之弊》下次再写。

　　提到域名缩短的工具，大家都会想到tinyurl。可惜tiny提供是一串无序的字母与数字的组合。虽然缩短的域名，但并不方便记忆。decentrul很好的解决了这个问题。它能根据你输入的描述标题生成语义化的地址。这么说不太清楚，来做个对比吧。 源地址：http://5key.net/blog/article.asp?id=316  tinyurl生成地址：http://tinyurl.com/3dpds7  decenturl生成地址：http://decenturl.com/5key/blue-theme-for-lbs  这样应该明白了吧。 5key，是以域名设立的子目录。blue-theme-for-lbs则是根据你输入的标题描述生成的最终目录。还不错吧。

记得一个月前发过一篇《性感的CSS Menus》，文章里列举了一堆相关的URL。 例如这个，作者在目录的书写上用”-”进行了分词，不仅利于网站的SEO，也让URL相对利于阅读。 http://www.alvit.de/css-showcase/css-galleries-tabs-navigation-showcase.php  而这个链接，本身域名比较长。再给出这样一个URL感觉会非常的乱。如果再来一串这样的链接，估计会比较晕了。 http://www.smashingmagazine.com/2007/03/14/css-based-navigation-menus-modern-solutions 如果我们将链接的URL进行如下的调整，可以很好的提高URL的可辨识性，用户也能更容易的记住你的站点。 点这里看例子：http://5key.net/demo/url-keyword a span { color: #971212; } a { color: black; font-weight:bold; } a span { color: #971212; } a:hover { color: #971212; } a:hover span { color: black; }

　　为了防止网络上日益猖獗的垃圾广告和灌水评论，大多数网站在信息发布的时候要求输入验证码。图片、文字、字母甚至还有计算题。验证码图片里的信息东颠西倒，难以辨认。拦住了spammer也拦住了用户。为什么不能让验证码更友好一点呢？ 　　国内的门户站，百度、新浪、网易是这样做的。他们都统一的将验证码图片放到了输入框的右边。而且东倒西歪，不好辨识。 　　以百度的注册页面为例。用户在注册过程中，视线的走向一直是由上至下。可当到了验证码的地方，【输入图中字符】然后向右看到图片，回到左边的输入框，填写。再看右边对比。好像不大方便。修改一下（下图）。这样如何？看起来容易一些了吧。 　　在看一个优秀的验证码，然后我们再改改。将图片里的字符大小、字体设置为一样。而且都设置为居中对其。这样是不是更好点。一眼就能看出我有没有填错。