使用有趣的自訂標籤布局頁面_經驗交流
來源：互聯網
上載者：User
今天我們來學習,如何使用有趣的自訂標籤來布局頁面。有的朋友可能有這樣的疑問，自己隨便定義的標記瀏覽器怎麼能正確的認識呢？
這裡我們就要用到文檔的命名空間，那麼命名空間又是指什嗎？
大家知道XML有一個很大的特點就是他的可擴充性。你可以建立你自己的標記或使用別人建立的標記，這裡就存在了一個問題，即你所定義的標
記和別人定義的標識有可能相同，但他們各自所表示的意義卻不同。
打一個形象的比喻，比如有兩個人名字都叫藍色，一個人在經典，一個人在天涯，如果你要找他們就可以這樣說明，天涯:藍色 、 經典:藍色，這樣就不會混淆了。
命名空間的意義就是要告訴別人這個文檔是屬於誰的。xhtml是html向xml過渡的產物,這裡他也提供給了我們一個命名空間。
看下面的例子，我們命名一個名稱為blueidea的首碼，http://bbs.blueidea.com是用來說明命名空間的url。xmlns是指xhtml namespace
複製代碼 代碼如下:
有意思的是我們甚至可以用中文來做標記(用中文可能會出現編碼問題)。這樣的文檔看起來真的是一目瞭然。
下面我們定義一個標記叫做“新聞標題”格式因該是“blueidea:新聞標題”
複製代碼 代碼如下:最新更新
然後用CSS定義他 ，格式:
blueidea\:新聞標題 {
} 需要注意的是我們自訂的標記預設屬性，有點象a、span等內嵌元素。
下面是我寫的一個基本布局，(相容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:網站標誌></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需重新整理才能執行]
