佈局說明與CSS疏漏補充 - Re: [Blog] 樣式二 YoungButStrong
首先，補充幾個原作者 style.css 少漏或疏乎的地方：
1. 第15行 body{} 裡面的 color 少打了冒號 ( : )。
2. 第96行的 #footer_sponsors {} 應該要加上 margin: 0 auto; 這樣 #footer_sponsors 才會置中。
接下來說明 index.tpl 與 style.css 相互搭配而構成的整體佈局。同時參考上文 JinJin 老師所畫的圖示。
學習重點：指定寬度的雙欄式佈局－DIV float 的運用
1. 整個頁面是以 div#container (紅色大框的那一塊) 為主進行排版。裡面包括 logo、ad_space、top、content、footer 五塊子 DIV。整個佈局的重點在以div#content中的 #left 和 #right 作為雙欄式佈局的核心。以下對 container 作簡要的介紹。
div#container {
width: 850px;
background: #342b22 url('{TEMPLATE_PATH}images/bg_body.jpg') repeat-y;
margin: 0 auto;
overflow: auto;
}
這裡的 margin: 0 auto; 的意思是，上下margin是 0px，左右是置中(auto在margin中的效果就是置中)。在CSS的 margin 或 padding 簡寫中，若是遇到margin後接兩組數字，就是指上下margin共用第一個值，左右margin共同第二個值。所以，例如 margin:10px 15px; 意思就是上下各是10px margin，左右各是15px margin。
另外，overflow: auto; 是指若 container 裡面的內容左右或上下超過了原本的寬度或高度，要超出欄位呈現、只顯示欄位寬高的內窩，或是產生左右或上下的scroll bar以供捲動。這裡的 auto 的意思就是若左右超過了原有寬度就會在左右方向出現 scroll bar 可以捲動，若上下高度超過亦然(若設定為 scroll 則會左右和上下的捲軸同時出現)。
這個 div 最後要注意的是寬度設定為 850px，一般指定寬度(相對於width: 100%的全幅寬度)的雙欄式佈局可以以底下會介紹的 float: left 和 float: right 作佈局設定，若是全幅寬度的雙欄佈局，若用 float 在一些特殊情況會遇到問題。
2. #logo 與 #ad_space
這二個 div 可以視為一組，仔細觀察可發現裡面分別運用了 float: left 與 float: right，目的就是讓這二個 div 平行地並列，一個置左，一個置右，可以算是對後面 div#left 和 div#right 的雙欄佈局的預習。
float 就是「飄浮」，可以想成是咖啡的飄浮冰淇淋，設成了 float 了之後就會像飄浮冰淇淋一樣飄了起來，不會和其他的冰塊擠在一起。你要它向左它就向左，你要它向右它就向右。而且，很重要的是，它不會像巧克力分層或牛奶分層，一個人就占了一整層 (就像DIV一樣，一個 DIV 就占了100%的寬度，使得其他 DIV 就要換行，排在下面)，如果向老闆加錢的話，他是會給你二個「並排」的 DIV 的（冰淇淋）。
層次分明的冰咖啡剛好體現了 DIV 在設定為「飄浮 float」前層層獨立的特性（而且這張居然剛好是我常去的 ORSiR咖啡的教學網頁）
不過言歸正傳，以比較專業的角度來說，當一個 div 設定為 float 之後，它的「呈現屬性」(display)就會從占據整行的 display: block，轉變為只占據「內容寬度」的 display: inline。inline 的意思也就是如果 div 裡面只有「飄浮冰咖啡」五個字的話，這個 div 的寬度就只有五個字的寬度，如果後面再接了也是 inline 的「鮮奶油也很好吃」的話，這二個 div 就會接再一起，不會換行。
例如：
原始碼：<div style="display:inline;color:brown">飄浮冰咖啡</div><div style="display:inline">鮮奶油也很好吃</div> 結果：
我們可以發現雖然我們是用二個 DIV，但結果二段文字卻是連在一起。
(續)
div#logo {
width: 374px;
height: 90px;
background: #ffffff url('{TEMPLATE_PATH}images/logo.gif') no-repeat;
float: left;
}
div#ad_space {
width: 476px;
height: 90px;
background: #ffffff url('{TEMPLATE_PATH}images/ad_space_bg.gif') no-repeat;
float: right;
}
1. 第15行 body{} 裡面的 color 少打了冒號 ( : )。
2. 第96行的 #footer_sponsors {} 應該要加上 margin: 0 auto; 這樣 #footer_sponsors 才會置中。
接下來說明 index.tpl 與 style.css 相互搭配而構成的整體佈局。同時參考上文 JinJin 老師所畫的圖示。
學習重點：指定寬度的雙欄式佈局－DIV float 的運用
1. 整個頁面是以 div#container (紅色大框的那一塊) 為主進行排版。裡面包括 logo、ad_space、top、content、footer 五塊子 DIV。整個佈局的重點在以div#content中的 #left 和 #right 作為雙欄式佈局的核心。以下對 container 作簡要的介紹。
另外，overflow: auto; 是指若 container 裡面的內容左右或上下超過了原本的寬度或高度，要超出欄位呈現、只顯示欄位寬高的內窩，或是產生左右或上下的scroll bar以供捲動。這裡的 auto 的意思就是若左右超過了原有寬度就會在左右方向出現 scroll bar 可以捲動，若上下高度超過亦然(若設定為 scroll 則會左右和上下的捲軸同時出現)。
這個 div 最後要注意的是寬度設定為 850px，一般指定寬度(相對於width: 100%的全幅寬度)的雙欄式佈局可以以底下會介紹的 float: left 和 float: right 作佈局設定，若是全幅寬度的雙欄佈局，若用 float 在一些特殊情況會遇到問題。
2. #logo 與 #ad_space
這二個 div 可以視為一組，仔細觀察可發現裡面分別運用了 float: left 與 float: right，目的就是讓這二個 div 平行地並列，一個置左，一個置右，可以算是對後面 div#left 和 div#right 的雙欄佈局的預習。
float 就是「飄浮」，可以想成是咖啡的飄浮冰淇淋，設成了 float 了之後就會像飄浮冰淇淋一樣飄了起來，不會和其他的冰塊擠在一起。你要它向左它就向左，你要它向右它就向右。而且，很重要的是，它不會像巧克力分層或牛奶分層，一個人就占了一整層 (就像DIV一樣，一個 DIV 就占了100%的寬度，使得其他 DIV 就要換行，排在下面)，如果向老闆加錢的話，他是會給你二個「並排」的 DIV 的（冰淇淋）。
層次分明的冰咖啡剛好體現了 DIV 在設定為「飄浮 float」前層層獨立的特性（而且這張居然剛好是我常去的 ORSiR咖啡的教學網頁）
不過言歸正傳，以比較專業的角度來說，當一個 div 設定為 float 之後，它的「呈現屬性」(display)就會從占據整行的 display: block，轉變為只占據「內容寬度」的 display: inline。inline 的意思也就是如果 div 裡面只有「飄浮冰咖啡」五個字的話，這個 div 的寬度就只有五個字的寬度，如果後面再接了也是 inline 的「鮮奶油也很好吃」的話，這二個 div 就會接再一起，不會換行。
例如：
原始碼：
飄浮冰咖啡
鮮奶油也很好吃
我們可以發現雖然我們是用二個 DIV，但結果二段文字卻是連在一起。
(續)
Edited 2 time(s). Last edit at 07/14/2011 01:53AM by HP.
(編輯記錄)