今天我們來學(xué)習(xí),如何使用有趣的自定義標(biāo)記來布局頁面。有的朋友可能有這樣的疑問,自己隨便定義的標(biāo)記瀏覽器怎么能正確的認(rèn)識呢?
這里我們就要用到文檔的命名空間,那么命名空間又是指什么?
大家知道XML有一個(gè)很大的特點(diǎn)就是他的可擴(kuò)展性。你可以創(chuàng)建你自己的標(biāo)記或使用別人創(chuàng)建的標(biāo)記,這里就存在了一個(gè)問題,即你所定義的標(biāo)
記和別人定義的標(biāo)識有可能相同,但他們各自所表示的意義卻不同。
打一個(gè)形象的比喻,比如有兩個(gè)人名字都叫藍(lán)色,一個(gè)人在經(jīng)典,一個(gè)人在天涯,如果你要找他們就可以這樣說明,天涯:藍(lán)色、經(jīng)典:色,這樣就不會混淆了。
命名空間的意義就是要告訴別人這個(gè)文檔是屬于誰的。xhtml是html向xml過渡的產(chǎn)物,這里他也提供給了我們一個(gè)命名空間。
看下面的例子,我們命名一個(gè)名稱為blueidea的前綴,http://bbs.blueidea.com是用來說明命名空間的url。xmlns是指xhtml namespace
<html xmlns:blueidea="http://bbs.blueidea.com">
有意思的是我們甚至可以用中文來做標(biāo)記(用中文可能會出現(xiàn)編碼問題)。這樣的文檔看起來真的是一目了然。
下面我們定義一個(gè)標(biāo)記叫做“新聞標(biāo)題”格式因該是“blueidea:新聞標(biāo)題”
<blueidea:新聞標(biāo)題>最新更新</blueidea:新聞標(biāo)題>
然后用CSS定義他 ,格式:
blueidea\:新聞標(biāo)題 {
}
需要注意的是我們自定義的標(biāo)記默認(rèn)屬性,有點(diǎn)象a、span等內(nèi)聯(lián)元素。
下面是我寫的一個(gè)基本布局,(兼容IE5、6、7 FF2 OP9)是不是很有意思,象XML,其實(shí)本來自定義標(biāo)記就是用在xml上地。大家趕緊自己來試一下吧,因?yàn)楹芏鄸|西都是自己從實(shí)踐中摸索出來的。
運(yùn)行代碼框
[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運(yùn)行]
經(jīng)典論壇討論: http://bbs.blueidea.com/thread-2684422-1-1.html
出處:藍(lán)色理想
責(zé)任編輯:moby
◎進(jìn)入論壇網(wǎng)頁制作、網(wǎng)站綜合版塊參加討論
|