Category Archives: CSS

Blueprint是一个CSS框架，使用Blueprint可以大大缩短CSS的开发时间以及质量，它的设计思想来自作者Jeff Croft的《Frameworks for Designers》一文（中文版； 理解Web框架，和如何构建一个CSS框架），简单来说，Blueprint将网页分成了许多长度为40的长条（column），每个长条的宽度（span）为30（蓝色部分），空白（margin）为10（白色部分），你可以通过名为span-n的class来指定div的宽度，比如，下面的代码就是一个典型的3栏设计： <div class=”container”>   <div class=”span-24″>     Header   </div>   <div class=”span-4″>     Left sidebar   </div>   <div class=”span-16″>     Main content   </div>   <div class=”span-4 last”>     Right sidebar   </div> </div> container默认width为950，也就是24栏（24*40 － 10 ＝ 950），你可以通过在container后增加showgrid class来显示背景格子，Blueprint还提供了几个很有用的Ruby脚本用于压缩CSS文件以及进行W3C CSS检查，这里是详细指南（英文），这篇中文介绍很不错。