到現(xiàn)在為止,只有一些已經(jīng)工作的CSS3特性.
多欄
該特性使生活更加容易，呵呵。這個(gè)新特性允許網(wǎng)頁設(shè)計(jì)師將文字填入欄中。這可以通過兩種方法實(shí)現(xiàn)，定義各欄的寬度，或者是定義欄數(shù)。
多欄布局目前只支持Mozilla核心的瀏覽器和Safari 3， 它們支持各自的屬性前綴 -moz-和-webkit-。下面的例子使用欄寬：
-moz-column-width: 13em;
-webkit-column-width: 13em;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
下一個(gè)例子使用欄數(shù)：
-moz-column-count: 3;
-moz-column-gap: 1em;
-moz-column-rule: 1px solid black;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
-webkit-column-rule: 1px solid black;
這兩個(gè)例子輸出如下：

還有一個(gè)特性尚未生效，它就是“column-space-distribution”，這個(gè)屬性可以描述當(dāng)頁面中還有剩余空間時(shí)如何分配欄目之間的間距。
關(guān)于CSS3 中的 Gird 布局
我們看看下面這張圖：

圖中藍(lán)色的線不會(huì)出現(xiàn)在實(shí)際的網(wǎng)頁中。對(duì)于這個(gè)布局復(fù)雜的三欄網(wǎng)頁來說，如果使用 CSS3 Gird 布局的話，我們只需這樣寫：
body { columns:3; column-gap:0.5in; }
img { float：page top right; width:3gr; }
其中，body 部分聲明頁面為 3 欄，欄間距為 0.5英寸；img 中 float 屬性指明圖片浮動(dòng)位置為頁面的右上角（CSS3 定位好強(qiáng)大 -__-），而寬度為 3 個(gè)欄寬。只需這樣兩行 CSS，我們就可以實(shí)現(xiàn)這個(gè)復(fù)雜的布局了。真的很神奇。
Gird 布局是好，不過如果你認(rèn)為它很簡單的話，你就大錯(cuò)特錯(cuò)了。看看 w3c 中關(guān)于它的介紹，你會(huì)發(fā)現(xiàn)理解它的意義不亞于看懂天書。好在還是個(gè)草案，但愿它到了正式版的時(shí)候，能夠更加簡單易用點(diǎn)。
Gird 布局應(yīng)用很廣泛，最簡單的例子就是內(nèi)容的分欄顯示。但這個(gè) CSS3 特性目前還沒有任何瀏覽器可以支持它。誰要是能第一個(gè)支持它（以及其它 CSS3 草案），那就酷斃了。不知道，最近異常低調(diào)的 IE8，會(huì)不會(huì)是這第一個(gè)吃螃蟹的人呢？

最新評(píng)論