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

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

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

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

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

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

　　命名空間的意義就是要告訴別人這個文檔是屬於誰的xhtml是html向xml過渡的產物這裡他也提供給了我們一個命名空間

　　看下面的例子我們命名一個名稱為blueidea的前綴是用來說明命名空間的urlxmlns是指xhtml namespace

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

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

　　<blueidea:新聞標題>最新更新</blueidea:新聞標題>

　　然後用CSS定義他格式:

　　blueidea\:新聞標題 {

　　}

　　需要注意的是我們自定義的標記默認屬性有點象aspan等內聯元素

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

　　運行代碼框

　　<!DOCTYPE html PUBLIC //WC//DTD XHTML Strict//EN strictdtd>
<html xmlns:webjx=>
<style>
* {
padding:;
margin:
}
body{
textalign:center;
}
webjx\:頁面上部 {
position:relative;
display:block;
margin: auto;
width:px;
height:px;
borderbottom:px solid orange;
background:black
}
webjx\:主體部分 {
display:block;
margin: auto;
width:px;
textalign:left;
background:#eee
}
webjx\:主體部分 webjx\:主體左側 {
display:block;
width:px;
height:px;
borderright:px solid #ddd;
background:#fff
}
webjx\:新聞標題 {
display:block;
paddingleft:px;
height:px;
lineheight:px;
background:#ccc
}
webjx\:新聞列表 {
display:block;
liststyle:none;

　　height:px;
background:#eee
}

　　webjx\:頁面下部 {
display:block;
margin: auto;
width:px;
height:px;
background:black
}
webjx\:站點標志 {
position:absolute;
top:px;
left:px;
paddingtop:px;
display:block;
width:px;
height:px;
background:#eee
}
webjx\:導航菜單 {
position:absolute;
top:px;
left:px;
display:block;
}
webjx\:導航菜單 a {
float:left;
marginleft:px;
width:px;
height:px;
font:px/px 宋體;
color:white;
textdecoration:none;
border:px solid orange;
borderbottom:;
}
webjx\:導航菜單 a:hover {
border:px solid #FDE;
borderbottom:;
}
webjx\:頁面 {
border:px solid #FDE;
}
</style>
</head>
<body>
<webjx:頁面上部>
<webjx:站點標志><img src=_//gif alt=網頁教學網/></webjx:站點標志>

　　<webjx:導航菜單>
<a #>home</a>
<a #>work</a>
<a #>contact</a>
</webjx:導航菜單>

　　</webjx:頁面上部>

　　<webjx:主體部分>
<webjx:主體左側>

　　<webjx:新聞標題>最新更新</webjx:新聞標題>

　　<webjx:新聞列表>
<li>·aaaaaaaaaaa</li>
<li>·aaaaaaaaaaa</li>
<li>·aaaaaaaaaaa</li>
<li>·aaaaaaaaaaa</li>
<li>·aaaaaaaaaaa</li>
<li>·aaaaaaaaaaa</li>
</webjx:新聞列表>

　　</webjx:主體左側>

　　</webjx:主體部分>

　　<webjx:頁面>ssssss</webjx:頁面>
<webjx:頁面>ssssss</webjx:頁面>
<webjx:頁面>ssssss</webjx:頁面>
<webjx:頁面下部></webjx:頁面下部>
</body>
</html>

From:http://tw.wingwit.com/Article/program/Java/Javascript/201311/25455.html