編碼的世界 / 優質文選 / 生涯

《CSS3實戰》筆記--多列布局

2021年7月05日
-   

通過閱讀和學習書籍《CSS3實戰》總結 《CSS3實戰》/成林著.—北京機械工業出版社2011.5
  多列布局適合純文字版式設計，如報紙內和雜志類網頁布局，不適合做網頁結構布局。靈活使用多列布局特性，可以實現在多列中顯示文字和圖片，從而節省大量的網頁空間。如果網頁上的文字很長，多列布局特性就能夠發揮它的用武之地。 兼容性參考：http://www.w3.org/TR/css3-multicol/
columns屬性–定義多列布局
  columns是多列布局特性的基本屬性，類似邊框特性中的border屬性，該屬性可以同時定義多列的數目和每列的寬度。基本語法如下：
columns ： <column-width> || <column-count>

取值簡單說明：
<column-width>:定義每列的寬度。
<column-count>:定義列數。

column-width屬性：定義列寬度
column-count屬性：定義列數
column-width:<length> | auto
column-count:<integer> | auto

取值簡單說明：
<length>：由浮點數字和單位標識符組成的長度值。不可為負值。 auto：根據瀏覽器計算值自動設置。 <integer>:定義欄目的列數，取值為大於0的整數。如果column-width和column-count屬性沒有明確值，即該值為最大列數。
column-gap屬性–定義列間距
column-gap：normal | <length>

取值簡單說明：
normal：根據瀏覽器默認設置進行解析，一般為1em。 <length>:由浮點數字和單位標識符組成的長度值，不可為負值。
column-rule屬性–定義列邊框樣式
column-rule：<length> | <style> | <color> | <transparent>

取值簡單說明： <length>:由浮點數字和單位標識符組成的長度值，不可為負值。功能與column-rule-width屬性相同。 <style>:定義列邊框樣式。功能與column-rule-style屬性相同。 <color>:定義列邊框的顏色。功能與column-rule-color屬性相同。 <transparent>:設置邊框透明顯示。
column-span屬性–定義跨列顯示
column-span：1 | all

取值簡單說明：
1：只在本欄中顯示。 all：將橫跨所有列，並定位在列的Z軸之上。
column-fill屬性–定義欄目高度
column-fill ： auto | balance

簡單取值說明：
auto：各列的高度隨其內容的變化而自動變化。 balance：各列的高度將會根據內容最多的那一列的高度進行統一。
分列打印（略）
參考文章：
  • page-break-before和page-break-after 實現分頁打印
  • CSS page-break-before 屬性

實戰體驗：
HTML代碼：
<body>
<h1>故都的秋（選段）</h1>
<h2>鬱達夫</h2>
<p> 秋天，無論在什麼地方的秋天，總是好的；可是啊，北國的秋，卻特別 地來得清，來得靜，來得悲涼。我的不遠千裏，要從杭州趕上青島，更要從青島趕上北平來的理由，也不過想飽嘗一嘗這"秋"，這故都的秋味。 </p>
<p>江南，秋當然也是有的；但草木雕得慢，空氣來得潤，天的顏色顯得淡，並且又時常多雨而少風；一個人夾在蘇州上海杭州，或廈門香港廣州的市民中間，渾沌沌地過去，只能感到一點點清涼，秋的味，秋的色，秋的意境與姿態，總看不飽，嘗不透，賞玩不到十足。秋並不是名花，也並不是美酒，那一種半開，半醉的狀態，在領略秋的過程上，是不合適的。 </p>
<p>不逢北國之秋，已將近十餘年了。在南方每年到了秋天，總要想起陶然亭的蘆花，釣魚台的柳影，西山的蟲唱，玉泉的夜月，潭柘寺的鐘聲。在北平即使不出門去罷，就是在皇城人海之中，租人家一椽破屋來住著，早晨起來，泡一碗濃茶，向院子一坐，你也能看到很高很高的碧綠的天色，聽得到青天下馴鴿的飛聲。從槐樹葉底，朝東細數著一絲一絲漏下來的日光，或在破壁腰中，靜對著像喇叭似的牽牛花（朝榮）的藍朵，自然而然地也能夠感覺到十分的秋意。說到了牽牛花，我以為以藍色或白色者為佳，紫黑色次之，淡紅色最下。最好，還要在牽牛花底，教長著幾根疏疏落落的尖細且長的秋草，使作陪襯。 </p>
<p> 北國的槐樹，也是一種能使人聯想起秋來的點綴。象花而又不是花的那一種落蕊，早晨起來，會鋪得滿地。腳踏上去，聲音也沒有，氣味也沒有，只能感出一點點極微細極柔軟的觸覺。掃街的在樹影下一陣掃後，灰土上留下來的一條條掃帚的絲紋，看起來既覺得細膩，又覺得清閑，潛意識下並且還覺得有點兒落寞，古人所說的梧桐一葉而天下知秋的遙想，大約也就在這些深沉的地方。 </p>
<p>秋蟬的衰弱的殘聲，更是北國的特產；因為北平處處全長著樹，屋子又低，所以無論在什麼地方，都聽得見它的啼唱。在南方是非要上郊外或山上去才聽得到的。這秋蟬的嘶叫，在北平和蟋蟀耗子一樣，簡直像是家家戶戶都養在家裏的家蟲。 </p>
<p> 還有秋雨哩，北方的秋雨，她似乎比南方的下得奇，下得有味，下得更像樣。 </p>
</body>

基礎CSS3代碼
<style type="text/css" media="screen">
h1 {
 color:#333333;
 background:#DCDCDC;
 padding:5px 8px;
 font-size:20px;
 text-align:center;
 padding:12px;
}
h2 {
 font-size:16px;
 text-align:center;
}
p {
 color:#333333;
 font-size:14px;
 line-height:180%;
 text-indent:2em;
}
</style>

未設置多列布局演示效果：

實戰體驗一：設計文章多欄顯示
再上面基礎CSS3代碼基礎上補充：
body {
 -webkit-columns: 250px 3;
 columns: 250px 3;//設計網頁文檔分三欄顯示，每欄寬度為250px
}

演示效果：

實戰體驗二：設計固定寬度的欄目版面
再上面基礎CSS3代碼補充：
body {/*定義網頁列寬為300px,則網頁中每個欄目的最大寬度為300px*/
 -webkit-column-width:300px;
 -moz-column-width:300px;
 column-width:300px;
}

演示效果：

實戰體驗三：設計固定列數的版面
再上面基礎CSS3代碼補充：
<style type="text/css" media="screen">
body {/*設置文檔內容為固定的三列*/
 -webkit-column-count:3;
 -moz-column-count:3;
 column-count:3;
}

演示效果：
實戰體驗四：設計疏朗的文檔版面
再上面基礎CSS3代碼基礎上補充：
body {
 -webkit-column-count:3;
 -moz-column-count:3;
 column-count:3;//定義頁面內容顯示為3列
 -webkit-column-gap:3em;
 -moz-column-gap:3em;
 column-gap:3em;//定義列間距為3em，默認為1em line-height:2.5em;
}

演示效果：

實戰體驗五：為多列布局版面設計邊框效果
再基礎CSS3代碼基礎上補充：
body {
 -webkit-column-count:3;
 -moz-column-count:3;
 column-count:3;
 -webkit-column-gap:3em;
 -moz-column-gap:3em;
 column-gap:3em;
 line-height:2.5em;
 -webkit-column-rule:dashed 2px gray;
 -moz-column-rule:dashed 2px gray;
 column-rule:dashed 2px gray; //定義列邊框為2像素寬的灰色虛線
}

演示效果：

實戰體驗六：設計文章標題跨列顯示
再基礎CSS3代碼基礎上補充：
body {
 -webkit-column-count:3;
 -moz-column-count:3;
 column-count:3;
 -webkit-column-gap:3em;
 -moz-column-gap:3em;
 column-gap:3em;





 line-height:2.5em;
 -webkit-column-rule:dashed 2px gray;
 -moz-column-rule:dashed 2px gray;
 column-rule:dashed 2px gray;
}
h1 {
 -webkit-column-span:all;
 -moz-column-span:all;
 column-span:all;//設置一級標題跨越所有列顯示
}
h2 {
 -webkit-column-span:all;
 -moz-column-span:all;
 column-span:all; //設置二級標題跨越所有列顯示
}

演示效果：

實戰體驗七：設計不等高的多列布局效果
代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css" media="screen">
body {
 -webkit-column-count:3;
 -moz-column-count:3;
 column-count:3;//定義頁面內容顯示為3列
 -webkit-column-gap:3em;
 -moz-column-gap:3em;
 column-gap:3em;//定義列間距為3em
 line-height:2.5em;
 -webkit-column-rule:dashed 2px gray;
 -moz-column-rule:dashed 2px gray;
 column-rule:dashed 2px gray;//定義列邊框為2px
 -webkit-column-fill:auto;
 -moz-column-fill:auto;
 column-fill:auto;//設置各列高度自動調整
}
.c1 {
 width:100%;
 height:500px;
 background:red;
}
.c2 {
 width:100%;
 height:300px;
 background:green;
}
.c3 {
 width:100%;
 height:100px;
 background:blue;
}
</style>
<title>column-fill</title>
</head>
<body>
<div class="c1"><img src="images/pic1.jpg" width="100%" height="600" /></div>
<div class="c2"><img src="images/001.gif" width="100%" height="120" /></div>
<div class="c3"><img src="images/img2.jpg" width="100%" height="600" /></div>
</body>
</html>

演示效果：

熱門文章