使用有趣的自訂標籤來布局頁面

來源:互聯網
上載者:User
頁面

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

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

大家知道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:webjx="http://bbs.webjx.com"><style>* {padding:0;margin:0}body{text-align:center;}webjx\:頁面上部 {position:relative;display:block;margin:0 auto;width:700px;height:150px;border-bottom:3px solid orange;background:black}webjx\:主體部分 {display:block;margin:0 auto;width:700px;text-align:left;background:#eee}webjx\:主體部分 webjx\:主體左側 {display:block;width:220px;height:500px;border-right:1px solid #ddd;background:#f3f3f3}webjx\:新聞標題 {display:block;padding-left:5px;height:25px;line-height:25px;background:#ccc}webjx\:新聞列表 {display:block;list-style:none;height:160px;background:#eee}webjx\:頁面下部 {display:block;margin:0 auto;width:700px;height:100px;background:black}webjx\:網站標誌 {position:absolute;top:20px;left:20px;padding-top:2px;display:block;width:90px;height:31px;background:#eee}webjx\:導覽功能表 {position:absolute;top:124px;left:300px;display:block;}webjx\:導覽功能表 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;}webjx\:導覽功能表 a:hover {border:1px solid #FDE201;border-bottom:0;}webjx\:頁面 {border:1px solid #FDE201;}</style></head><body><webjx:頁面上部><webjx:網站標誌><img src="/UploadPic/2007-7/200777164011574.gif" alt="網頁教學網"/></webjx:網站標誌><webjx:導覽功能表><a href="#">home</a><a href="#">work</a><a href="#">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>

    [Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。