使用 DIV佈局

使用 DIV Tags
當我們使用 CSS-P 的時候， 我們主要把它用在 DIV (division) tag 上.當你把文字, 圖象, 或其他的放在 DIV 中， 它可稱作爲 "DIV block", 或 "DIV element" 或 "CSS-layer", 或乾脆叫 "layer". 而中文我們把它稱作 "層次". 所以當你以後看到這些名詞的時候， 你就知道它們是指一段在 DIV 中的 HTML。

使用 DIV 的方法跟使用其他 tag 的方法一樣

<div>  
<p><font face="Arial">This is a DIV tag </font></p>
</div>

但當我們把 CSS-P 用到 DIV 中去以後， 我麼就可以嚴格設定它的位置. 首先我們需要給這個可以被 CSS-P 控制的 DIV 一個 ID 或說是它的名字。比如說我們給下面這個 DIV 的名字是 truck. 給名字的目的是我們以後可用 JavaScript 來控制它， 比如說移動它或改變它的一些性質等等。

 
<div ID="truck">  
<p><font face="Arial">This is a truck </font></p>
</div>
給層次取什麼名字是隨意的, 名字可以是任何英文字母和數字, 但第一個必須是字母. 有兩種把 CSS-P 應用到 DIV 的方法.

Inline CSS:

Inline 是最常用的方法。

   
<div ID="truck" STYLE="styles go here">  
<p><font face="Arial">This is a truck</font></p>
</div>
我們下面將會告訴你都有哪些 style 和如果把它們寫到 DIV 裏。

External STYLE tag:

使用 External 方法的結果是一樣的。 現在我們主要討論 Inline 方法。請注意在 External 方法裏,在 STYLE 裏的 ID 和 DIV 裏的關係。

 
<div ID="<" SPAN CLASS="orange">  
<p><font face="Arial">truck">
This is a truck</font></p>
</div>
Cross-Browser CSS 性質:

我們這個課程的主要目的是讓你寫出的網頁在 NS4 和 IE4 上都能工作， 所以我們主要討論那些對倆者都通用的性質。 下面這些性質符合由 W3C 給出的標準。 position

決定 DIV tag 是如何放置的。 "relative" 意思是DIV的位置是相對於其他 tag 的。而"absolute" 是說 DIV tag 的位置是相對於它所在的窗口. 這裏主要討論 absolute.
left
相對於窗口左邊的位置 (pixels)
top
相對於窗口上邊的位置 (pixels)
width
DIV tag 的寬度。 所有在 DIV 裏的文字或html都在裏面。
height
DIV tag 的高度。 這個性質很少用除非你想 Clip 層次。
clip
給出 layer 的 clipping (可看的見的) 部分. Clip 可使得DIV 顯示爲一個可以定義的很準確的方塊。 你可以用以下的四個值來給出這個方塊的在 DIV 位置和大小。
clip:rect(top,right,bottom,left);
visibility
隱蔽或展現DIV 根據它的值 "visible", "hidden", "inherit".
z-index
DIV tag 的立體位置。 值越大 DIV 的位置越高。
background-color
DIV 背景的顏色。
layer-background-color
Netscape 的 DIV 背景顏色.
background-image
DIV 的背景圖象
layer-background-image
Netscape 的 DIV 的背景圖象。
CSS 的語法是用冒號來分開性質和它的值, 用半分號來分開性質:

position: absolute; left: 50px; top: 100px; width: 200px;  
height: 100px; clip: rect(0,200,100,0); visiblity: visible;  
z-index: 1; background-color:#FF0000;  
layer-background-color:#FF0000;  
background-image:URL(filename.gif);  
layer-background-image:URL(filename.gif);