用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>

2、四列（等寬）頁面，前后兩列間有border，中間有4列空間間隔 <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>

——完——

轉載于:https://www.cnblogs.com/artman/archive/2012/08/14/blueprint.html

總結

以上是生活随笔為你收集整理的用BluePrint进行Web页面设计的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。