如何寫出Html + CSS 的頁面--入門
用 CSS 做網頁不但頁面載入速度較快，而且修改彈性也大，唯一的缺點就是沒辦法直接用一整張圖來切割，這也是視覺為導向的美編要轉型最大的問題。其實只要把 photoshop 製作流程倒回去，就是 CSS 製版的基礎。
基本的觀念是「由大到小」、「由外而內」。
假設今天我們要做一個這樣的頁面
我們可以把頁面分為三個大範圍
於是在 html 裡面就可以這樣寫
<div id="red_div"></div>
<div id="blue_div"></div>
<div id="green_div"></div>
這三個 DIV 分別加上不同的 ID，這個 id 就等於是這三個區塊的名字，要注意 id 在頁面上是不可重複的。
我們分別為這三個 div 取為 紅、藍、綠。我個人的習慣是在最後面加上這個物件的名稱，例如：「red_div」，就表示這是一個名為 red 的 div。這樣可以避免當頁面上物件很多時會發生重複命名的問題。這種狀況在 ajax 動態變換頁面物件時特別容易發生。
然後來寫 css ：
基本上右邊兩個高度會是固定，左邊雖然偶而稍有變動也不致於太多。
所以當左邊高度夠時，這三個可以都用 float left 來排列；不過因為整體來看就是直列分為左右兩行而已，所以左邊 float left，右邊 float right 也是可以。
#red_div{width:200px;float:left;}
#blue_div{width:760px;float:right;}
#green_div{width:760px;float:right;}
為了方便觀看加上外框，製作完成後可以刪除：
#red_div{border:1px solid #f00;min-height:500px}
#blue_div{border:1px solid #00F;min-height:280px;}
#green_div{border:1px solid #0F0;min-height:220px;}
還要把最外面的 body 寬、高設定好，免得左右分太開。
body{width:980px;height:auto;border:0px; margin:0 auto;}
安排好之後，接著來做紅色內部。
紅色裡面可以分為上下兩塊，所以我們可以這麼劃分
<div id="red_div">
<div id="red_1_div"></div>
<div id="red_2_div"></div>
</div>
這裡是範例，實際上 id 最好取有意義的名字，例如放選單的，取為 id=menu_div 會比 id=1_1_div 好多了。
為新增加的兩個小紅框加上 css
#red_1_div{width:196px;height:auto;margin:10px auto;}
#red_2_div{width:196px;height:auto;margin:10px auto;}
以下這行也是方便觀察用，實際編輯時大多不需要(腦中自動補完)。
#red_1_div,#red_2_div{border:1px solid #E00;min-height:200px;}
然後藍色可以分成三塊，所以可以這麼寫
<div id="blue_div">
<div id="blue_1_div"></div>
<div id="blue_2_div"></div>
<div id="blue_3_div"></div>
</div>
CSS 可以這麼寫：
#blue_1_div{width:200px;min-height:280px;float:right;}
#blue_2_div{width:545px;min-height:130px;float:left;margin:0px 5px 10px}
#blue_3_div{width:545px;min-height:130px;float:left;margin:0px 5px}
#blue_1_div,#blue_2_div,#blue_3_div{border:1px solid #00E;}
最後，綠色裡面的物件都是重複產生，所以可以先製作一個基本顯示區塊，然後重複顯示。在這我一樣用 float 的方式，讓後面的區塊跟隨著前面的左邊來排列，當右邊空間不足以容納一個區塊寬度時會自動跑到下一行
因為需要重複使用相同 css 設定所以這次不用 id 改採 class 。
與 id 不同， class 在一個頁面上可以多次出現。
<div id="green_div">
<div class="green_in_div"></div>
<div class="green_in_div"></div>
<div class="green_in_div"></div>
<div class="green_in_div"></div>
<div class="green_in_div"></div>
<div class="green_in_div"></div>
<div class="green_in_div"></div>
<div class="green_in_div"></div>
</div>
CSS
.green_in_div{width:180px;height:200px;margin:4px;float:left;}
.green_in_div{border:1px solid #0E0;}
好啦～這樣一個基本頁面就完成啦！
接下來裡面的東西要放什麼、要怎麼擺放，基本都不會跳出剛剛做的範圍了。
這樣是不是很簡單呢～一起來用 css 與 html 製作網頁吧！
基本的觀念是「由大到小」、「由外而內」。
假設今天我們要做一個這樣的頁面
我們可以把頁面分為三個大範圍
於是在 html 裡面就可以這樣寫
<div id="red_div"></div>
<div id="blue_div"></div>
<div id="green_div"></div>
這三個 DIV 分別加上不同的 ID，這個 id 就等於是這三個區塊的名字，要注意 id 在頁面上是不可重複的。
我們分別為這三個 div 取為 紅、藍、綠。我個人的習慣是在最後面加上這個物件的名稱，例如：「red_div」，就表示這是一個名為 red 的 div。這樣可以避免當頁面上物件很多時會發生重複命名的問題。這種狀況在 ajax 動態變換頁面物件時特別容易發生。
然後來寫 css ：
基本上右邊兩個高度會是固定，左邊雖然偶而稍有變動也不致於太多。
所以當左邊高度夠時，這三個可以都用 float left 來排列；不過因為整體來看就是直列分為左右兩行而已，所以左邊 float left，右邊 float right 也是可以。
#red_div{width:200px;float:left;}
#blue_div{width:760px;float:right;}
#green_div{width:760px;float:right;}
為了方便觀看加上外框，製作完成後可以刪除：
#red_div{border:1px solid #f00;min-height:500px}
#blue_div{border:1px solid #00F;min-height:280px;}
#green_div{border:1px solid #0F0;min-height:220px;}
還要把最外面的 body 寬、高設定好，免得左右分太開。
body{width:980px;height:auto;border:0px; margin:0 auto;}
安排好之後，接著來做紅色內部。
紅色裡面可以分為上下兩塊，所以我們可以這麼劃分
<div id="red_div">
<div id="red_1_div"></div>
<div id="red_2_div"></div>
</div>
這裡是範例，實際上 id 最好取有意義的名字，例如放選單的，取為 id=menu_div 會比 id=1_1_div 好多了。
為新增加的兩個小紅框加上 css
#red_1_div{width:196px;height:auto;margin:10px auto;}
#red_2_div{width:196px;height:auto;margin:10px auto;}
以下這行也是方便觀察用，實際編輯時大多不需要(腦中自動補完)。
#red_1_div,#red_2_div{border:1px solid #E00;min-height:200px;}
然後藍色可以分成三塊，所以可以這麼寫
<div id="blue_1_div"></div>
<div id="blue_2_div"></div>
<div id="blue_3_div"></div>
</div>
CSS 可以這麼寫：
#blue_1_div{width:200px;min-height:280px;float:right;}
#blue_2_div{width:545px;min-height:130px;float:left;margin:0px 5px 10px}
#blue_3_div{width:545px;min-height:130px;float:left;margin:0px 5px}
#blue_1_div,#blue_2_div,#blue_3_div{border:1px solid #00E;}
最後，綠色裡面的物件都是重複產生，所以可以先製作一個基本顯示區塊，然後重複顯示。在這我一樣用 float 的方式，讓後面的區塊跟隨著前面的左邊來排列，當右邊空間不足以容納一個區塊寬度時會自動跑到下一行
因為需要重複使用相同 css 設定所以這次不用 id 改採 class 。
與 id 不同， class 在一個頁面上可以多次出現。
<div id="green_div">
<div class="green_in_div"></div>
<div class="green_in_div"></div>
<div class="green_in_div"></div>
<div class="green_in_div"></div>
<div class="green_in_div"></div>
<div class="green_in_div"></div>
<div class="green_in_div"></div>
<div class="green_in_div"></div>
</div>
CSS
.green_in_div{width:180px;height:200px;margin:4px;float:left;}
.green_in_div{border:1px solid #0E0;}
好啦～這樣一個基本頁面就完成啦！
接下來裡面的東西要放什麼、要怎麼擺放，基本都不會跳出剛剛做的範圍了。
這樣是不是很簡單呢～一起來用 css 與 html 製作網頁吧！