DIV CSS 佈局教程網

讀寫看起來容易，實則非也。對於網頁設計來說，讀寫行為因為多種原因而重要，並且在網頁設計過程中，它們有著較高的優先級。我想說的是，用較好的方式寫代碼是非常重要的。這是因為，要讓其他任何和這些代碼打交道的人感到舒服。

1. 定義好的結構

CSS 可讀性最重要的一點是要有一個好的結構。有好的結構，在尋找特定 CSS 規則的時候才能縮小尋找區域。最好的方法是用 Html 文件構成的風格來結構化 css 文件。這樣的 CSS 文件就比較舒服，而且你也能准確的知道如何定位。本文由網頁教學網（webjx.com）發布！轉載和采集的話請不要去掉！謝謝。

<div id="wrapper">
    <div id="header"></div>
	<div id="body">
		<div id="sidebar"></div>
		<div id="content"></div>
	</div>
	<div id="footer"></div>
</div>

#wrapper {...}
#header {...}
#body {...}
#content {...}
#sidebar {...}
#footer {...}

2. 定義顏色特區

每個網站顏色的數量各不相同。因此，為設計中用到的顏色定義一個特區會是很好的實踐。一個很好的理由就是就算過了一段時間你也可以很容易的認出這些顏色，而且也可以迅速的替換這些顏色。本文是網頁教學www.webjx.com收集整理或者原創內容，轉載請注明出處！

3. 每行一個 CSS 規則

寫 CSS 代碼的時候，要考慮到有事需要粗略的浏覽文件來搜索一些特定規則。在一行中聲明 CSS 規則是個不錯的主意。

這樣就可以利用水平方向上浪費的空間，也能縮短文件的翻頁頁數。

4. 定義排版樣式特區

每個項目中排版都應該是非常重要的。應該為項目中用到的樣式化文本設置一個特區。這會節省很多時間而且會激發你的生產率。

1
2
3
4
5
6
7
8
9
10
11

/*............Typography................*/
 
body { font: 62.5%/1.5em Tahoma, Arial, sans-serif; }
 
h1 { font:700 2.4em/1.5em Arial, sans-serif; }
 
h2 { font:400 2.0em Verdana, sans-serif; letter-spacing:-1px; }
 
h3 { font:700 1.8em Arial, sans-serif; }
 
...

5. 縮進 CSS 規則

對於可讀性來說，縮進是一個非常重要的方面。CSS 文件最好的縮進方式就是 Html 文件的縮進方式。

這樣可以在 CSS 文件中以某種方式重新生成 Html 標簽的可視化結構。縮進 CSS 文件時要想著把聲明排成一行，這樣 CSS 屬性就能形成一個緊湊的塊。我在 Chris CoyIEr 的 CSS 文件中看到這個方式，認為這是個好想法。見下面的源代碼(第二部份)。

1
2
3
4
5
6
7
8

<div id="wrapper">
	<div id="header"> </div>
	<div id="body">
		<div id="content"> </div>
		<div id="sidebar"> </div>
	</div>
	<div id="footer"> </div>
</div>

1
2
3
4
5
6

#wrapper{ width:960px; margin:0 auto; }
#header{ float:left; width:960px; height:116px; }
h1#logo{ float:left; width:188px; }
#menu{ float:right; width:100%; text-align:right;  }
#menu li{ padding:15px; color:#fff; display:inline;  }
#menu li a{ color:#fff; text-decoration:none; }

6. 首先定義顯示屬性

通常，在我的項目中，我的 CSS 版面是基於浮動的。這是我的方式。。。相對與定位來說，我更喜歡浮動。

總之，我認為首先聲明 float，width 和 height 這 3 個屬性是個好的方式。這樣，就可以從CSS 規則中靠前的定義獲得顯示版式。基於這 3 個屬性，也可以幫助你可視化整個網站結構。本文由網頁教學網webjx.com整理發布！轉載請注明出處，謝謝！

1
2
3
4
5
6
7
8
9
10

#wrapper{ width:960px; margin:0 auto; }
    #header { float:left; width:960px; height:116px; }
    h1#logo{ float:left; width:188px; height:61px; }
    #search{ float:right; width:270px; }
    #SearchBox{ float:left; width:180px; height:28px; }
    #SearchBtn{ float:left; width:80px; height:28px; }
    #body{ float:left; }
    #content{ float:left; width:600px;  }
    #sidebar{ float:right; width:300px;}
    #footer{ float:left; width:960px; }

總結

這幾個步驟不會產生完美的可讀性 CSS 代碼，可以肯定的是它們可以讓你的生活簡單些。嘗試下並告訴我你的想法。干杯！