大主宰天蚕土豆小说,遮天辰东小说笔趣阁,新寡妇村传奇

主頁 > 知識庫 > 使用有趣的自定義標記布局頁面

使用有趣的自定義標記布局頁面

今天我們來學習,如何使用有趣的自定義標記來布局頁面。有的朋友可能有這樣的疑問，自己隨便定義的標記瀏覽器怎么能正確的認識呢？

這里我們就要用到文檔的命名空間，那么命名空間又是指什么？

大家知道XML有一個很大的特點就是他的可擴展性。你可以創(chuàng)建你自己的標記或使用別人創(chuàng)建的標記，這里就存在了一個問題，即你所定義的標

記和別人定義的標識有可能相同，但他們各自所表示的意義卻不同。

打一個形象的比喻，比如有兩個人名字都叫藍色，一個人在經(jīng)典，一個人在天涯，如果你要找他們就可以這樣說明，天涯:藍色、經(jīng)典:藍色，這樣就不會混淆了。

命名空間的意義就是要告訴別人這個文檔是屬于誰的。xhtml是html向xml過渡的產(chǎn)物,這里他也提供給了我們一個命名空間。

看下面的例子，我們命名一個名稱為blueidea的前綴，http://bbs.blueidea.com是用來說明命名空間的url。xmlns是指xhtml namespace

復制代碼代碼如下:

html xmlns:blueidea="http://bbs.blueidea.com">

有意思的是我們甚至可以用中文來做標記(用中文可能會出現(xiàn)編碼問題)。這樣的文檔看起來真的是一目了然。

下面我們定義一個標記叫做“新聞標題”格式因該是“blueidea:新聞標題”

復制代碼代碼如下:

blueidea:新聞標題>最新更新/blueidea:新聞標題>  
然后用CSS定義他 ，格式:   

blueidea\:新聞標題 {  

}

需要注意的是我們自定義的標記默認屬性，有點象a、span等內(nèi)聯(lián)元素。

下面是我寫的一個基本布局，(兼容IE5、6、7 FF2 OP9)是不是很有意思，象XML，其實本來自定義標記就是用在xml上地。大家趕緊自己來試一下吧，因為很多東西都是自己從實踐中摸索出來的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns:blueidea="http://bbs.blueidea.com"> <style> * {     padding:0;     margin:0     } body{     text-align:center;     } blueidea\:頁面上部 {     position:relative;     display:block;     margin:0 auto;     width:700px;     height:150px;     border-bottom:3px solid orange;     background:black     } blueidea\:主體部分 {     display:block;     margin:0 auto;     width:700px;     text-align:left;     background:#eee         } blueidea\:主體部分 blueidea\:主體左側 {     display:block;     width:220px;     height:500px;     border-right:1px solid #ddd;     background:#f3f3f3     } blueidea\:新聞標題 {     display:block;     padding-left:5px;     height:25px;     line-height:25px;     background:#ccc     } blueidea\:新聞列表 {     display:block;     list-style:none;     height:160px;     background:#eee     } blueidea\:頁面下部 {     display:block;     margin:0 auto;     width:700px;     height:100px;     background:black     } blueidea\:站點標志 {     position:absolute;     top:20px;     left:20px;     padding-top:2px;     display:block;     width:90px;     height:31px;     background:#eee         } blueidea\:導航菜單 {     position:absolute;     top:124px;     left:300px;     display:block;     } blueidea\:導航菜單 a {     float:left;     margin-left:2px;     width:60px;     height:25px;     font:12px/25px 宋體;     color:white;     text-decoration:none;     border:1px solid orange;     border-bottom:0;     } blueidea\:導航菜單 a:hover {     border:1px solid #FDE201;     border-bottom:0;     } blueidea\:頁面 {     border:1px solid #FDE201;     } </style> </head> <body> <blueidea:頁面上部> <blueidea:站點標志><img src="http://bbs.blueidea.com/images/blue/logo.gif" /></blueidea:站點標志> <blueidea:導航菜單> home work contact </blueidea:導航菜單> </blueidea:頁面上部> <blueidea:主體部分> <blueidea:主體左側> <blueidea:新聞標題>最新更新</blueidea:新聞標題> <blueidea:新聞列表> <li>·aaaaaaaaaaa</li> <li>·aaaaaaaaaaa</li> <li>·aaaaaaaaaaa</li> <li>·aaaaaaaaaaa</li> <li>·aaaaaaaaaaa</li> <li>·aaaaaaaaaaa</li> </blueidea:新聞列表> </blueidea:主體左側> </blueidea:主體部分> <blueidea:頁面>ssssss</blueidea:頁面> <blueidea:頁面>ssssss</blueidea:頁面> <blueidea:頁面>ssssss</blueidea:頁面> <blueidea:頁面下部></blueidea:頁面下部> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

標簽：衢州云南寧夏晉中鹽城陽泉北海來賓

巨人網(wǎng)絡通訊聲明：本文標題《使用有趣的自定義標記布局頁面》，本文關鍵詞使用,有趣,的,自定義,標記,；如發(fā)現(xiàn)本文內(nèi)容存在版權問題，煩請?zhí)峁┫嚓P信息告之我們，我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡，涉及言論、版權與本站無關。

濮阳杆衣贸易有限公司

使用有趣的自定義標記布局頁面