欧美性猛交XXXX免费看蜜桃,成人网18免费韩国,亚洲国产成人精品区综合,欧美日韩一区二区三区高清不卡,亚洲综合一区二区精品久久

CSS單元的位置和層次-div標簽 
 

　　我們都知道，在網(wǎng)頁(yè)上利用HTML定位文字和圖象是一件“令人心痛”的事情。我們必須使用表格標簽和隱式GIF圖象，即使這樣也不能保證定位的精確，因為瀏覽器和操作平臺的不同會(huì )使顯示的結果發(fā)生變化。
　　而CSS能使你看到希望的曙光。利用今天我們即將學(xué)到的CSS屬性，你可以精確地設定要素的位置，還能將定位的要素疊放在彼此之上，還有...還有......你自己慢慢看吧！
　　Cascading Style Sheets（CSS）是 DHTML 的基礎。CSS 用來(lái)設定你網(wǎng)頁(yè)上的元素是如何展示的。Cascading Style Sheets Positioning（CSS-P）是 CSS 的一個(gè)擴展，它可用來(lái)控制任何東西在網(wǎng)頁(yè)上或是說(shuō)在窗口中的位置。請你記住這兩個(gè)名詞：CSS 和 CSS－P。下面四個(gè)英文網(wǎng)址提供了詳細的關(guān)于 CSS 和 CSS-P 的文件和解釋。
　● 1．使用 DIV 標簽 （div）

　　當我們使用 CSS-P 的時(shí)候， 我們主要把它用在 DIV（division）tag 上。當你把文字，圖象，或其他的放在 DIV 中，它可稱(chēng)作為“DIV block”，或“DIV element”或“CSS-layer”，或干脆叫“layer”。而中文我們把它稱(chēng)作“層次”。所以當你以后看到這些名詞的時(shí)候，你就知道它們是指一段在 DIV 中的 HTML。
　　使用 DIV 的方法跟使用其他 tag 的方法一樣：
　　　　<DIV>This is a DIV tag .</DIV>
　　如果單獨使用 DIV 而不加任何 CSS-P, 那么它在網(wǎng)頁(yè)中的效果和使用 <P></P> 是一樣的。
　　但當我們把 CSS-P 用到 DIV 中去以后，我么就可以嚴格設定它的位置。首先我們需要給這個(gè)可以被 CSS-P 控制的 DIV 一個(gè) ID 或說(shuō)是它的名字。比如說(shuō)我們給下面這個(gè) DIV 的名字是 truck。給名字的目的是我們以后可用 JavaScript 來(lái)控制它， 比如說(shuō)移動(dòng)它或改變它的一些性質(zhì)等等。
　　　　<DIV ID="truck">
　　　　This is a truck
　　　　</DIV>
　　給層次取什么名字是隨意的，名字可以是任何英文字母和數字，但第一個(gè)必須是字母。有兩種把 CSS-P 應用到 DIV 的方法。
　　Inline CSS：Inline 是最常用的方法。
　　　　<DIV ID="truck" STYLE="styles go here">
　　　　This is a truck .
　　　　</DIV>
　　External STYLE tag：使用 External 方法的結果是一樣的。我們會(huì )在以后的課程里再詳細解釋這種方法?，F在我們主要討論Inline 方法。請注意在 External 方法里，在 STYLE 里的 ID 和 DIV 里的關(guān)系。
　　　　<STYLE TYPE="text/css">
　　　　<!--　#truck {styles go here}　-->
　　　　</STYLE>
　　　　<DIV ID="truck">This is a truck .</DIV>

　　Cross-Browser CSS 性質(zhì)：
　　我們這個(gè)課程的主要目的是讓你寫(xiě)出的網(wǎng)頁(yè)在 NS4 和 IE4 上都能工作， 所以我們主要討論那些對倆者都通用的性質(zhì)。下面這些性質(zhì)符合由 W3C 給出的標準。

position　決定 DIV tag 是如何放置的。“relative”意思是DIV的位置是相對于其他 tag 的，而“absolute”是說(shuō) DIV tag 的位置是相對于它所在的窗口。
left　相對于窗口左邊的位置
top　相對于窗口上邊的位置
width　DIV tag 的寬度。所有在 DIV 里的文字或html都在里面。
height　DIV tag 的高度。這個(gè)性質(zhì)很少用除非你想 Clip 層次。
clip　給出 layer 的 clipping（可看的見(jiàn)的）部分。Clip 可使得 DIV 顯示為一個(gè)可以定義的很準確的方塊。你可以用以下的四個(gè)值來(lái)給出這個(gè)方塊的在 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 的背景圖象。
　● 2．絕對定位和相對定位 （position）

　　絕對定位：
　　定位屬性將是網(wǎng)蟲(chóng)們打開(kāi)幸福之門(mén)的鑰匙：
　　H4 { position: absolute; left: 100px; top: 43px }
　　這項CSS規則讓瀏覽器將<H4>的起始位置精確地定在距離瀏覽器左邊100象素，距離其頂部43象素的位置。注意這里唯一設置了的是左邊和頂部，也就說(shuō)，文字將從左到右，從上到下載入瀏覽窗口。
　　左邊和頂部屬性很直觀(guān)，左邊（left）設定要素距瀏覽器窗口左邊的距離，頂部（top）設定距離瀏覽器窗口頂部的距離。設定這些距離時(shí)，你可以使用所學(xué)過(guò)的各種度單位或比例值。使用比例值時(shí)，比例值的是相對于母體要素的尺寸。
　　你可以定位什么呢？任何東西！段落、單詞、GIF和JPEG圖象、QUICKTIME電影等等。
　　相對定位：
　　絕對定位使你能精確地定位要素在頁(yè)面的獨立位置，而不考慮頁(yè)面其它要素的定位設置。相對定位指你所定位的要素的位置相對于在文件中所分配的位置。例：
　　I { position: relative; left: 40px; top: 10px }
　　相對定位的關(guān)鍵在于定位了的要素的位置是相對于它通常應在的位置進(jìn)行定位。相對定位單元出現在普通的靜態(tài)定位單元的行間，定位時(shí)沒(méi)有把自己和靜態(tài)定位單元完全分開(kāi)。如果你停止使用相對定位，則文字的顯示位置將恢復正常。使用相對定位時(shí)要小心，否則容易將頁(yè)面弄得非常亂。
　　除了相對定位和絕對定位，你還可以使用static（靜止）參數值。Static 是 position 特性的缺省值。它的使用方法同普通HTML中的定位方法，不能附加特殊的定位設置。也就是說(shuō)，除了邊距特性，或通過(guò)使用 float 特性來(lái)浮動(dòng)單元可影響單元的定位外，其它均不可以。

　● 3．定位單元的控制 （width、height、visiblility）

　　除了控制定位單元的左上角位置，你還可以控制單元的寬度和高度，及單元在頁(yè)面的可視性。

　　寬度：定位了的要素在頁(yè)面上顯示時(shí)仍然會(huì )從左到右一直顯示。利用寬度屬性就可以設定字符向右流動(dòng)的限制，即設定要素的寬度。
　　DIV { position: absolute; left: 200px; top: 40px; width: 150px }
　　瀏覽器接到這項規則時(shí)，它將文字按照規則規定的效果顯示，還將段落的最大水平尺寸限制在150象素。
　　寬度屬性只適用于絕對定位的要素。你可以使用我們學(xué)過(guò)的任何一種長(cháng)度單位，或使用比例值設定寬度，比例值指相對于母體要素的比例。IE 4中，這項屬性還可用于圖象。你可以通過(guò)寬度設置人為地拉寬或壓縮圖象。

　　高度：理論上講，高度應該和寬度的設置類(lèi)似，只不過(guò)是在垂直方向上：
　　DIV { position: absolute; left: 200px; top: 40px; height: 150px }
　　這里我用了“理論上講”，因為有些瀏覽器不支持高度屬性。

　　可視性：利用CSS，你可以隱藏要素，使其在頁(yè)面上看不見(jiàn)。這條屬性對于定位了的和未定位的要素都適用。
　　H4 { visibility: hidden }
　　選項：

visible 使要素可以被看見(jiàn)
hidden 使要素被隱藏
inherit 指它將繼承母體要素的可視性設置。
　　值 inherit 為缺省值。這使單元繼承父單元的可見(jiàn)性。所以，如果某一段是隱藏的，則它包含的任何行間單元也都被隱藏。這一繼承性可被明確指定的可見(jiàn)性取代。例如，段內的 EM 單元被指定為可見(jiàn)，這時(shí)如果該段被隱藏，則段內的所有其它內容都將消失，而唯有 EM 單元中的文本是可見(jiàn)的。