tion %> 山东麻将有几种胡法
當前位置:首頁 > 建站知識

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

更新時間:2009.06.21 瀏覽次數:

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

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

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

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

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

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

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

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

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

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

<blueidea:新聞標題>最新更新</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:站點標志><img src="http://bbs.blueidea.com/images/blue/logo.gif" alt="藍色理想"/></blueidea:站點標志>

<blueidea:導航菜單>
<a href="#">home</a>
<a href="#">work</a>
<a href="#">contact</a>
</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>

烟台麻将规则 山水广西麻将下载 股票交易的税费 江苏十一选五任三推 科乐吉林麻将群哪里找 1112赛季英超比分 11选5每期必中 行动哈尔滨麻将外挂 吉利汽车股票代码 3d绝杀6码 安徽池州麻将规则 雷速体育里面的人在哪里下单 杭州麻将胡牌规则 钱盈配资 5分是什么 福州全民麻将下载版 河南十一选五