你對DIV標簽的概念和使用你是否了解,DIV標簽稱為區隔標記,DIV的起始標簽和結束標簽之間的所有內容都是用來構成這個塊的。
DIV標簽簡介
DIV元素是用來為Html文檔內大塊(block-level)的內容提供結構和背景的元素。DIV的起始標簽和結束標簽之間的所有內容都是用來構成這個塊的,其中所包含元素的特性由DIV標簽的屬性來控制,或者是通過使用樣式表格式化這個塊來進行控制。
DIV標簽稱為區隔標記。作用:設定字、畫、表格等的擺放位置。當你把文字,圖象,或其他的放在DIV中,它可稱作為“DIVblock”,或“DIVelement”或“CSS-layer”,或干脆叫“layer”。而中文我們把它稱作“層次”。所以當你以後看到這些名詞的時候,你就知道它們是指一段在DIV中的Html。
DIV標簽應用於StyleSheet(式樣表)方面會更顯威力,它最終目的是給設計者另一種組織能力,有Class;Style;title;ID等屬性,將會於【StyleSheet】一節才作詳述,這處只介紹一個屬性設定。
范例
以以下內容為例:
align="center"
可選值:center;left;right。決定字、畫、表格等居中、靠左或靠右的作用和居中標記<CENTER>一樣,前者是由Html3.0開始的標准,後者是通用己久的標示法。
◆CSS單元的位置和層次-div標簽
我們都知道,在網頁上利用Html定位文字和圖象是一件“令人心痛”的事情。我們必須使用表格標簽和隱式GIF圖象,即使這樣也不能保證定位的精確,因為浏覽器和操作平台不同會使顯示的結果發生變化。
而CSS能使你看到希望的曙光。利用今天我們即將學到的CSS屬性,你可以精確地設定要素的位置,還能將定位的要素疊放在彼此之上,還有...還有......你自己慢慢看吧!
CascadingStyleSheets(CSS)是DHtml的基礎。CSS用來設定你網頁上的元素是如何展示的。CascadingStyleSheetsPositioning(CSS-P)是CSS的一個擴展,它可用來控制任何東西在網頁上或是說在窗口中的位置。請你記住這兩個名詞:CSS和CSS-P。下面四個英文網址提供了詳細的關於CSS和CSS-P的文件和解釋。
使用DIV標簽(div)
當我們使用CSS-P的時候,我們主要把它用在DIV(division)tag上。當你把文字,圖象,或其他的放在DIV中,它可稱作為“DIVblock”,或“DIVelement”或“CSS-layer”,或干脆叫“layer”。而中文我們把它稱作“層次”。所以當你以後看到這些名詞的時候,你就知道它們是指一段在DIV中Html。
使用DIV的方法跟使用其他tag的方法一樣:
◆ThisisaDIVtag.
如果單獨使用DIV而不加任何CSS-P,那麼它在網頁中的效果和使用是一樣的。
但當我們把CSS-P用到DIV標簽中去以後,我麼就可以嚴格設定它的位置。首先我們需要給這個可以被CSS-P控制的DIV一個ID或說是它的名字。比如說我們給下面這個DIV的名字是truck。給名字的目的是我們以後可用JavaScript來控制它,比如說移動它或改變它的一些性質等等。
◆Thisisatruck
給層次取什麼名字是隨意的,名字可以是任何英文字母和數字,但第一個必須是字母。有兩種把CSS-P應用到DIV的方法。
InlineCSS:Inline是最常用的方法。
Thisisatruck.
ExternalSTYLEtag:使用External方法的結果是一樣的。我們會在以後的課程裡再詳細解釋這種方法。現在我們主要討論Inline方法。請注意在External方法裡,在STYLE裡的ID和DIV裡的關系。
- <STYLETYPESTYLETYPE="text/CSS">
- <!-- #truck{stylesgohere} -->
- </STYLE>
Thisisatruck.
◆Cross-BrowserCSS性質:
我們這個課程的主要目的是讓你寫出的網頁在NS4和IE4上都能工作,所以我們主要討論那些對倆者都通用的性質。下面這些性質符合由W3C給出的標准。
position 決定DIVtag是如何放置的。“relative”意思是DIV的位置是相對於其他tag的,而“absolute”是說DIVtag的位置是相對於它所在的窗口。
left 相對於窗口左邊的位置
top 相對於窗口上邊的位置
width DIVtag的寬度。所有在DIV裡的文字或Html都在裡面。
height DIVtag的高度。這個性質很少用除非你想Clip層次。
◆clip 給出layer的clipping(可看的見的)部分。Clip可使得DIV顯示為一個可以定義的很准確的方塊。你可以用以下的四個值來給出這個方塊的在DIV位置和大小。
clip:rect(top,right,bottom,left);
visibility 隱蔽或展現DIV根據它的值“visible”,“hidden”,“inherit”。
z-index DIVtag的立體位置。值越大DIV的位置越高。
background-color DIV背景的顏色。
layer-background-color Netscape的DIV背景顏色。
background-image DIV的背景圖象。
layer-background-image Netscape的DIV的背景圖象。
【編輯推薦】