1877056308

網站製作學習誌
簡單介紹一下我的小新版型是怎麼做的。

首先準備小新的圖，並切成頭、身體背景及腳。

接下來在腦袋裡想像一下網頁的結構：

1. #container 的實際寬度為 760px ，但內容寬度為 600px ，這是為了置放 #content 裡的文字，使它們能夠縮在小新的身體裡。所以我把 #container 左右兩邊的 padding 設為 80px (760px 減掉 600px 再除以 2) 。

2. 因為 #container 的寬度被限制在 600px ，但是 #banner 及 #footer 的實際寬度必須維持在 760px ，所以我把 #banner 和 #footer 設為 position: relative 後，把它們往左拉回 80px ，這樣小新的頭和腳才能與身體對齊。

3. 接下來的 #content 及 #links 部份，其實和兩欄式版型的製作方式雷同。

4. 把架構固定後，接著就把小新的頭、腳及身體當做背景放上去。因為頭和腳的大小剛好固定，所以我就不特意再下什麼語法去調整。但是身體因為是 #container 的背景，所以只能用縱軸重覆，不然會版型的左右兩邊會跑出奇怪的白色區塊。

   不過有個地方很麻煩，那就是樂多在 #footer 後面沒事加了一個 div ，而且沒 id 值。這樣一來我就沒辦法把它藏起來，只好把 body 的底部邊界往上拉。可是 IE 和 Firefox 對這個方式解釋又不同，所以用 IE 看的話，就會發現小新的腳底有個奇怪的白色區塊。當然我是有辦法解決，但就是懶字訣作祟…

5. 最後的裝飾就是苦工了，我是直接拿舊的 site.css 來改的。沒辦法，我這個人對沒什麼意義的事就很懶得去做。

CSS 碼就不貼了，有興趣的朋友用 Firefox 自行找吧。

只要觀念對了， CSS 不會很難的。