css入門教程之學習網頁布局(1)

2024-07-11 08:24:34

字體：大中小

來源：轉載

供稿：網友

原文：http://jorux.com/archives/layout-1-if-you-love-css/
從本篇開始講述如何用css實現網頁的布局，即如何用css控制網頁內各個元素的顯示位置。如果你是一個初學者，很可能覺得做一個網頁的第一步就是布局。其實不然，css網頁的設計過程可以參考分為以下幾步：
平面設計—>頁面切割—>布局—>細節控制

平面設計是一個網頁的精髓所在，讀者直接面對的界面，在本站以后的文章中會涉及此方面內容。也許你會認為在腦子里形成一個網站的大概印象就可以了，那么這種想法直接就給你貼上業余的標簽。推薦工具：Photoshop；頁面切割其實可以劃分到布局里，因為你的頁面切割方式直接影響了布局方式，也體現了你是屬于表格布局陣營還是css布局陣營。它是布局(前)的關鍵步驟。將在本章重點講述。推薦工具：Photoshop；如果把布局說簡單點，就先得把你的網頁簡單化。簡單到把你的網站分為header，content，sidebar，footer四個部分。細節控制，將header，content，sidebar，footer的表現細節化。
本章將針對頁面切割講述一些Jorux的私人觀點與技術。
首先，我們要有一個被切割的對象，這里以Jorux.com的原始photoshop平面設計圖為例。如下（Fig.01）：

點擊查看大圖
如果使用表格布局的話，你可能就想到在photoshop里把頁面切割為無數個固定寬高的格子。但用css布局的話，你首先要明確的以下幾點是：

你是要橫著切，還是要豎著切；第一次切割，只需要把網頁中的背景圖片切割出來(因為背景圖片是在css里聲明的)；切的的圖片要盡量小，然后讓css去做更多的事情；設計比較復雜的部分，可以不分割，從而減少css編碼的難度；讀者應該根據自己的能力，找出哪些效果css可以輕松實現，而哪些效果用圖片更加簡單而且size不大，仔細在3.4之間權衡利弊；
現在我們來看Fig.01, 最靠上的部分是個黑色的尺子，遮住了“Jorux記事本”，更遭的是它居然還有黑色的投影。等到要切割的時候，我才后悔當初怎么能設計得如此復雜。但沒關系，一切都會好起來的?，F在跟著來重溫我的切割思路：
1. 整個網頁背景色大家應該很清楚，就是深灰色#444，這無需圖片，在css里的body選擇器里聲明就好；
2. 這一步是最關鍵的一步，請讀者仔細體會。對于css布局的網頁，Jorux建議你首先給你的原始平面設計來兩個橫刀(紅色)，接著就來個豎刀(藍色)。實現如下效果(Fig.02)：