十年網(wǎng)站開發(fā)經(jīng)驗(yàn) + 多家企業(yè)客戶 + 靠譜的建站團(tuán)隊(duì)
量身定制 + 運(yùn)營維護(hù)+專業(yè)推廣+無憂售后,網(wǎng)站問題一站解決
這篇文章給大家介紹如何深入學(xué)習(xí)DIV標(biāo)簽概念及其用法,內(nèi)容非常詳細(xì),感興趣的小伙伴們可以參考借鑒,希望對(duì)大家能有所幫助。

創(chuàng)新互聯(lián)成立與2013年,公司以成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、系統(tǒng)開發(fā)、網(wǎng)絡(luò)推廣、文化傳媒、企業(yè)宣傳、平面廣告設(shè)計(jì)等為主要業(yè)務(wù),適用行業(yè)近百種。服務(wù)企業(yè)客戶成百上千,涉及國內(nèi)多個(gè)省份客戶。擁有多年網(wǎng)站建設(shè)開發(fā)經(jīng)驗(yàn)。為企業(yè)提供專業(yè)的網(wǎng)站建設(shè)、創(chuàng)意設(shè)計(jì)、宣傳推廣等服務(wù)。 通過專業(yè)的設(shè)計(jì)、獨(dú)特的風(fēng)格,為不同客戶提供各種風(fēng)格的特色服務(wù)。
你對(duì)DIV標(biāo)簽的概念和使用你是否了解,DIV標(biāo)簽稱為區(qū)隔標(biāo)記,DIV的起始標(biāo)簽和結(jié)束標(biāo)簽之間的所有內(nèi)容都是用來構(gòu)成這個(gè)塊的。
DIV標(biāo)簽簡介
DIV元素是用來為HTML文檔內(nèi)大塊(block-level)的內(nèi)容提供結(jié)構(gòu)和背景的元素。DIV的起始標(biāo)簽和結(jié)束標(biāo)簽之間的所有內(nèi)容都是用來構(gòu)成這個(gè)塊的,其中所包含元素的特性由DIV標(biāo)簽的屬性來控制,或者是通過使用樣式表格式化這個(gè)塊來進(jìn)行控制。
DIV標(biāo)簽稱為區(qū)隔標(biāo)記。作用:設(shè)定字、畫、表格等的擺放位置。當(dāng)你把文字,圖象,或其他的放在DIV中,它可稱作為“DIVblock”,或“DIVelement”或“CSS-layer”,或干脆叫“l(fā)ayer”。而中文我們把它稱作“層次”。所以當(dāng)你以后看到這些名詞的時(shí)候,你就知道它們是指一段在DIV中的HTML。
DIV標(biāo)簽應(yīng)用于StyleSheet(式樣表)方面會(huì)更顯威力,它最終目的是給設(shè)計(jì)者另一種組織能力,有Class;Style;title;ID等屬性,將會(huì)于【StyleSheet】一節(jié)才作詳述,這處只介紹一個(gè)屬性設(shè)定。
范例
以以下內(nèi)容為例:
align="center"
可選值:center;left;right。決定字、畫、表格等居中、靠左或靠右的作用和居中標(biāo)記
◆CSS單元的位置和層次-div標(biāo)簽
我們都知道,在網(wǎng)頁上利用HTML定位文字和圖象是一件“令人心痛”的事情。我們必須使用表格標(biāo)簽和隱式GIF圖象,即使這樣也不能保證定位的精確,因?yàn)闉g覽器和操作平臺(tái)不同會(huì)使顯示的結(jié)果發(fā)生變化。
而CSS能使你看到希望的曙光。利用今天我們即將學(xué)到的CSS屬性,你可以精確地設(shè)定要素的位置,還能將定位的要素疊放在彼此之上,還有...還有......你自己慢慢看吧!
CascadingStyleSheets(CSS)是DHTML的基礎(chǔ)。CSS用來設(shè)定你網(wǎng)頁上的元素是如何展示的。CascadingStyleSheetsPositioning(CSS-P)是CSS的一個(gè)擴(kuò)展,它可用來控制任何東西在網(wǎng)頁上或是說在窗口中的位置。請(qǐng)你記住這兩個(gè)名詞:CSS和CSS-P。下面四個(gè)英文網(wǎng)址提供了詳細(xì)的關(guān)于CSS和CSS-P的文件和解釋。
使用DIV標(biāo)簽(div)
當(dāng)我們使用CSS-P的時(shí)候,我們主要把它用在DIV(division)tag上。當(dāng)你把文字,圖象,或其他的放在DIV中,它可稱作為“DIVblock”,或“DIVelement”或“CSS-layer”,或干脆叫“l(fā)ayer”。而中文我們把它稱作“層次”。所以當(dāng)你以后看到這些名詞的時(shí)候,你就知道它們是指一段在DIV中HTML。
使用DIV的方法跟使用其他tag的方法一樣:
◆ThisisaDIVtag.
如果單獨(dú)使用DIV而不加任何CSS-P,那么它在網(wǎng)頁中的效果和使用是一樣的。
但當(dāng)我們把CSS-P用到DIV標(biāo)簽中去以后,我么就可以嚴(yán)格設(shè)定它的位置。首先我們需要給這個(gè)可以被CSS-P控制的DIV一個(gè)ID或說是它的名字。比如說我們給下面這個(gè)DIV的名字是truck。給名字的目的是我們以后可用JavaScript來控制它,比如說移動(dòng)它或改變它的一些性質(zhì)等等。
◆Thisisatruck
給層次取什么名字是隨意的,名字可以是任何英文字母和數(shù)字,但***個(gè)必須是字母。有兩種把CSS-P應(yīng)用到DIV的方法。
InlineCSS:Inline是最常用的方法。
Thisisatruck.
ExternalSTYLEtag:使用External方法的結(jié)果是一樣的。我們會(huì)在以后的課程里再詳細(xì)解釋這種方法?,F(xiàn)在我們主要討論Inline方法。請(qǐng)注意在External方法里,在STYLE里的ID和DIV里的關(guān)系?!?/p>
Thisisatruck.
◆Cross-BrowserCSS性質(zhì):
我們這個(gè)課程的主要目的是讓你寫出的網(wǎng)頁在NS4和IE4上都能工作,所以我們主要討論那些對(duì)倆者都通用的性質(zhì)。下面這些性質(zhì)符合由W3C給出的標(biāo)準(zhǔn)。
position 決定DIVtag是如何放置的。“relative”意思是DIV的位置是相對(duì)于其他tag的,而“absolute”是說DIVtag的位置是相對(duì)于它所在的窗口。
left 相對(duì)于窗口左邊的位置
top 相對(duì)于窗口上邊的位置
width DIVtag的寬度。所有在DIV里的文字或html都在里面。
height DIVtag的高度。這個(gè)性質(zhì)很少用除非你想Clip層次。
◆clip 給出layer的clipping(可看的見的)部分。Clip可使得DIV顯示為一個(gè)可以定義的很準(zhǔn)確的方塊。你可以用以下的四個(gè)值來給出這個(gè)方塊的在DIV位置和大小。
clip:rect(top,right,bottom,left);
visibility 隱蔽或展現(xiàn)DIV根據(jù)它的值“visible”,“hidden”,“inherit”。
z-index DIVtag的立體位置。值越大DIV的位置越高。
background-color DIV背景的顏色。
layer-background-color Netscape的DIV背景顏色。
background-image DIV的背景圖象。
layer-background-image Netscape的DIV的背景圖象。
關(guān)于如何深入學(xué)習(xí)DIV標(biāo)簽概念及其用法就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到。