BluePrint (Css Framework)

雷洛 · 发表于 18-5-2010 10:23 AM

本帖最后由雷洛于 18-5-2010 10:27 AM 编辑

引用別人的介紹
Blueprint是一个CSS框架，使用Blueprint可以大大缩短CSS的开发时间以及质量，它的设计思想来自作者Jeff Croft的《Framework for designer》，简单来说，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来显示背景格

之前看到過這樣的一種css的 framework , 用再排版方面, 感覺他把格子分得非常的工整.  我曾經想過說, 為甚麼很多網站的CSS命名方式都差不多 , 是不是有甚麼規範 , 看了這個framework ,終於理解了一點 .
好處:1. 他會修正不同browser的瀏覽效果
      2. 他預設的字體大小比例很不錯
      3. 簡單, 容易懂

我在youtube搜索了他的tutorial, 果然用看的比較好了解 ,  有興趣的可以看看

http://www.youtube.com/watch?v=KHLrEF9tHjw

雷洛 · 发表于 18-5-2010 03:46 PM

發個效果給大家看看 , 只看了1天 , 隨便做做~

背景是他的CSS 格線.
外加一些我個人寫的說明

雷洛 · 发表于 18-5-2010 03:51 PM

<html>
<head>
<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">
</head>
<body>
<div class="container">
<h1>易經 <span class="caps">古文</span></h1>
<div class="span-24" id="maincol">
<div class="box"> <h2>所謂的易經，是將宇宙天地萬物的自然法則，與人類生活行為合為一體。解釋萬物無窮變化的哲理。而通常一般人看到易經，卻總以為只是一種占卜的方法而已。事實上，易經博大經深。在古代，」易經」便已被奉為」群經之首」</h2>
</div>
<div class="span-6" id="leftcol">
<h2>[乾]</h2>大哉乾元，萬物資始，乃統天。云行雨施，品物流形。大明始終，六位時成，時乘六龍以御天。乾道變化，各正性命，保合大和，乃利貞。首出庶物，萬國咸寧。
</div>
<div class="span-6" id="leftcol">
<h2>[坤]</h2>至哉坤元，萬物資生，乃順承天。坤厚載物，德合無疆。含弘光大，品物咸亨。牝馬地類，行地無疆，柔順利貞。君子攸行，先迷失道，後順得常。西南得朋，乃與類行；東北喪朋，乃終有慶。安貞之吉，應地無疆。
</div>
<div class="span-6" id="leftcol">
<h2>[屯]</h2>屯，剛柔始交而難生，動乎險中，大亨貞。
　　　雷雨之動滿盈，天造草昧，宜建侯而不寧。
</div>
<div class="span-6 last" id="leftcol">
<h2>[蒙]</h2>亨。匪我求童蒙，童蒙求我。初噬告，再三瀆，瀆則不告。利貞。
</div>
<div class="span-24 " id="rightcol"><hr>
<h2>由來<br> </h2>
《周易》一名有幾種不同的解釋。　
「周」，東漢鄭玄〈易論〉，認為「周」是「周普」的意思，即無所不備，周而復始。而唐代孔穎達《周易正義》認為「周」是指岐陽地名，是周朝的代稱。有人認為《易經》流行於周朝故稱《周易》，亦有人依據《史記》的記載「文王拘而演周易」，認同《易經》乃周文王所著。然而在幾種較早期的文獻，例如《論語》、《莊子》、《左傳》卻只稱《易經》為《易》，「周易」之名最早見於《周禮》；然而《周禮》的年代，學者還有爭議。所以，就文獻而言，「周」應該是後來加上去。若以《周禮》的系統來看，《三易》的名稱皆無朝代名，所以《周易》的「周」解釋為「周普」和其它兩種占筮書，比較能夠相應。然而夏代是否有《連山》、商代是否有《歸藏》也都還是問題。兩書很可能也是「古史積累說」所言的現象。所以比較肯定的是，《易經》或《周易》原來只稱為《易》<br>
<br>
在《周禮》「太卜」的記載中，亦有《三易》的說法；《三易》是指《連山》、《歸藏》和《周易》，三個不同朝代的占筮書。據說「連山」是夏朝的占筮書，「歸藏」是殷商的占筮書，「周易」是周朝的占筮書。
東漢鄭玄的著作〈易論〉認為「易一名而含三義：易簡一也；變易二也；不易三也。」這句話總括了易的三種意思：「簡易」、「變易」和「恆常不變」。即是說宇宙的事物存在狀能的是1）順乎自然的，表現出易和簡兩種性質；[2]2）時時在變易之中；3）又保持一種恆常。如《詩經》所說「日就月將」或「如月之恆，如日之升」，日月的運行表現出一種非人為的自然，這是簡易；其位置、形狀卻又時時變化，這是變易；然而總是東方出、西方落這是「不易」。
</div>
<div class="span-24 last" id="rightcol">
<br><br>
<hr>
<h4>2010 Copyright .All Rights Reserved.<br> </h4>
</div>
</div>
</div>
</body>
</html>

复制代码

Legend · 发表于 18-5-2010 09:40 PM

不错...简单,容易明白,懂得应用的话也可以做出比较complex的layout..排版时可以省下时间, 不用去算多少width, 算column就可以了.也很整齐

雷洛 · 发表于 18-5-2010 11:52 PM

我以為blueprint已經不錯了
沒想到 52framework 更強

http://52framework.com/

hooi1983 · 发表于 19-5-2010 10:04 AM

我是参考这个网站的 - http://960.gs/
我去 download 它的 css source file 来用

		自动登录	找回密码
密码			注册

BluePrint (Css Framework)

所属分类: 电脑手机

浏览过的版块