用BluePrint进行Web页面设计
用BluePrint进行Web页面设计
一、Blueprint是什么？
根据Blueprint官方描述，“Blueprint是一个旨在缩短您开发时间的CSS框架，它提供了一个易用的网格、合理的排版布局（甚至还包含一个用于打印的样式表），从而给您一个坚实的基础，使您在其上建立自己的项目”。
从Blueprint提供的样例和源文件来看，它提供了以下几个方面的功能——
1、对大多数标签进行了统一风格定制（并使HTML5标签在老浏览器中表现为DIV）：
/* reset.css */
html {margin:0;padding:0;border:0;}
body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section {margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article, aside, details, figcaption, figure, dialog, footer, header, hgroup, menu, nav, section {display:block;}
body {line-height:1.5;background:white;}
table {border-collapse:separate;border-spacing:0;}
caption, th, td {text-align:left;font-weight:normal;float:none !important;}
table, th, td {vertical-align:middle;}
blockquote:before, blockquote:after, q:before, q:after {content:'';}
blockquote, q {quotes:"" "";}
a img {border:none;}
:focus {outline:0;}
2、将页面定制为960px、居中，并将页面以24列（列宽40px）进行分割，用于精细排版（详见源文件）：
如：.span-1 表示一列的空间（宽度30px + margin-right: 10px, 共40px）；
.span-24 表示二十四列的空间（宽度960px + margin-right: 0px, 共960px）；
用于布局的类还有：.push, .pull, .append, .prepend等等。
3、对form元素的外观进行了简洁而美观的定义。
4、对IE的问题进行了HACK处理。
5、定义了打印网页的基本规则。
二、如何使用？
从Blueprint官方网站下载压缩包，解压后可看到一些文件和目录。就使用来说，我们关心的只是blueprint目录下的几个文件，分别是：
screen.css -- 主样式表文件
print.css -- 打印样式表文件
ie.css -- IE浏览器兼容性样式表文件
只要将此三个文件链接到页面头部，就可应用blueprint所定义的各种风格了。链接形式如下：
<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print">
<!--[if lt IE 8]>
<link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection">
<![endif]-->
*请注意你的CSS文件位置以保证链接正确。
*请注意屏幕一共24列，每列40px。
*不要轻易修改上述三个文件，若有特殊需求，自行定义CSS以覆盖原有定义即可。
三、举例（https://github.com/joshuaclayton/blueprint-css/wiki/quick-start-tutorial）
1、三列网页（两窄一宽），页首，页尾
<div class="container">
<div class="span-24">
The header
</div>
<div class="span-4">
The first column
</div>
<div class="span-16">
The center column
</div>
<div class="span-4 last">
The last column
</div>
<div class="span-24">
The footer
</div>
</div>
<div class="container">
<div class="span-5 border">
The first column
</div>
<div class="span-5 append-4">
The second column
</div>
<div class="span-5 border">
The third column
</div>
<div class="span-5 last">
The fourth (last) column
</div>
</div>
3、自己分析，想像一下应该是什么模样？
<div class="container">
<div class="span-12">
<div class="span-6">
Top left
</div>
<div class="span-6 last">
Top right
</div>
<div class="span-6">
Bottom left
</div>
<div class="span-6 last">
Bottom right
</div>
</div>
<div class="span-12 last">
Second half of page
</div>
</div>
——完——
