div+css网前台工程师设计之路必修.doc

div+css网站前台工程师设计之路必修 　文章来源：河南新华电脑学院 這篇文章，算是我在 CSS 的學習中，一個段落的結束。其實 CSS 是非常有趣且多變的，多看看國內外一些利用 CSS 製作出來的優等網站，你就會了解 CSS 有多麼強大。這裡，我將以「樂多 Blog 」的版型製作，作為這篇文章的主題。在這之前，建議您先看看之前我所寫的 CSS 排版觀念系列文章。 第一步 了解頁面結構 要化粧前，也得先知道自己的臉屬於何種性質；同理我們也得先掌握樂多的 Blog 的頁面結構 (DOM) 。 檢視自己的樂多 Blog 首頁原始碼，你就可以看到以下的結構： 每個色塊都是一個 DIV ，而這裡我直接用 CSS 的表示法來標示 DIV 的 ID 。 再來我們分析 #content 和 #links ，如下圖： 一樣地，我用 CSS 表示法來標示每個區塊的 CLASS 屬性。 #content 就是我們的 Blog 記事區，而 #links 則是功能選單的集合體，這裡我們暫時不對細部的區塊作討論。 第二步 決定版型 沒有適當的動線規劃及版面設計，再豐富的網站內容也是枉然。在決定我們的 Blog 要長什麼樣子之前，應該要思考如何讓瀏覽者能夠方便地操作你所提供的功能。另外，一個好的視覺設計也是必要的，除非你想標新立異，那麼舒服的色系及精緻的版面都是你應該要追求的。 不過這裡我不多談如何設計這些視覺上的效果，畢竟我並非設計系出身；相關的知識可以請教身邊有美術涵養的高手們，他們會給你很好的建議。 這裡我決定實作全版面兩欄式的版型，其中 #container 及 #content 的寬度會隨著瀏覽視窗大小作動態調整，而 #links 則是固定寬度且靠在視窗右邊，如下圖： 至於背景圖的部份，就請大家自行發揮天份製作囉。 第三步 用 CSS 製作初步的畫面 首先，我們要把 body 和 #container 設定好，如下： html, body {margin: 0; } #container {position: relative;width: 100%; } 首先我們將 html 和 body 的邊界設為 0 ，然後再把 #container 的寬度設為 100% 。 (註：你可以在建構版型時，利用背景色來讓自己知道區塊跑到哪兒去了。) 接下來，我們指定 #banner 的高度： #banner {height: 80px; } 這裡我假設背景圖的高度是 80px ，當然你可以視需要自行更改。 然後我們利用浮動技巧，將 #content 放到左邊， #links 放到右邊。我們不指定 #content 的寬度，因為它會變動。我們僅需要固定住 #links 的寬度即可 (假設為 200px ) 。 #content {float: left;} #links {float: right;width: 200px; } 咦？為什麼還是沒有效果？ #links 並沒有跑到 #content 的右邊？而是跑到 #content 的右下方去了： 這是因為現在 #content 的內容區寬度是 100% ，所以 #links 被 #content 擠了下來。解決的方式是把 #links 的 margin-left 指定為負值，讓它往左拉回 200px ： #links {float: right;width: 200px;margin-left: -200px; } 好啦，現在版面變成這樣： 呃...可是 #content 的內容和 #links 的內容疊在一起了，怎麼辦？很簡單，我們用 padding-right 把 #cotent 的內容往左擠進來： #content {float: left;padding-right: 200px; } #footer 因為 #content 和 #links 浮動的關係，自動跑到上面來了。我們只要設定： #footer {clear: both;height: 40px; } 雖然 IE 不用設定就會正常 (其實是不正常) ，但是為了其他瀏覽器，一定要設定。 好啦，現在實際上的完整版面會變成這樣了： #content 的可視寬度其實是和 #container 的內容區寬度一樣為 100%，虛線部份才是 #content 的內容區。 有幾點要注意： #content 的內容寬度不可過長，不然會讓 #links 往下掉。 #footer 不一定會在 #content 下方出現，這要看 #content 和 #links 哪個元素較高而定。 #banner 、 #content 、 #links 、 #footer 屬於結構元素，所以除非