Layout pages with interesting custom tags_Experience exchange

Today we will learn how to use interesting custom tags to layout pages. Some friends may have this question, how can the browser correctly recognize the tags that they have defined casually?

Here we will use the namespace of the document, so what does the namespace refer to?

Everyone knows that one of the great features of XML is its scalability. You can create your own tags or use tags created by others. There is a problem here, that is, the tags you define

may be the same as those defined by others, but they each represent the same meaning. But different.

To give an analogy, for example, there are two people named Blue, one is in Classic and the other is in Tianya. If you want to find them, you can explain it like this, Tianya: Blue, Classic: Blue color so there is no confusion.

The meaning of the namespace is to tell others who this document belongs to. xhtml is the product of the transition from html to xml, and it also provides us with a namespace here.

Look at the example below, we name a prefix named blueidea, http://bbs.blueidea.com is the url used to describe the namespace. xmlns refers to xhtml namespace

Copy code The code is as follows:

Interestingly, we can even use Chinese for markup (there may be encoding problems in Chinese). Such a document looks really self-explanatory.

Below we define a tag called "news title" format which should be "blueidea: news title"

Copy code The code is as follows:

latest updatetitle>
Then define it with CSS, format:


blueidea: News title {

}

要注意的是我們自訂的標記預設屬性，有點象a、span等內嵌元素。

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

<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> <blueidea:> <blueidea:><img src="/static/imghwm/default1.png" data-src="http://bbs.blueidea.com/images/blue/logo.gif?x-oss-process=image/resize,p_40" class="lazy" alt="Layout pages with interesting custom tags_Experience exchange"></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:>页面下部>
[Ctrl+A 全選 註:如需引入外部Js需刷新才能執行]