Use interesting custom tags to lay out the page

Page

Today we're going to learn how to use interesting custom tags to lay out the page. Some friends may have such a question, their casual definition of the tag browser how to correctly understand it?

Here we need to use the namespace of the document, then what does the namespace mean?

You know that one of the big features of XML is his scalability. You can create your own markup or use a tag created by someone else, and there is a problem where you define a label

It is possible to have the same identity as others, but they are different in meaning.

Play an image of the analogy, such as two names are called Blue, a person in the classic, a person in the end of the Earth, if you want to find them can be described, Tianya: blue, Classic: color, so it will not be confused.

The meaning of namespaces is to tell someone who this document belongs to. XHTML is the product of HTML transition to XML, which he also provides us with a namespace.

Looking at the example below, we name a prefix called Blueidea, http://bbs.blueidea.com is the URL that describes the namespace. xmlns refers to the XHTML namespace

The interesting thing is that we can even mark in Chinese (there may be coding problems in Chinese). Such a document looks really straightforward.

Here we define a tag called the "news headline" format because it's "Blueidea: News headlines."

<blueidea: News Headlines > Latest updates </blueidea: News headlines >

Then use CSS to define him, format:

Blueidea\: News Title {

}

Note that our custom tag default attributes are somewhat like inline elements such as a, span, and so on.

Here is a basic layout I wrote, (compatible with IE5, 6, 7 FF2 OP9) is not very interesting, like XML, in fact, the original custom tag is used in XML. Let's try it yourself, because a lot of things are found out from the practice.

Run Code Box

<! 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\: Top of page {position:relative;display:block;margin:0 auto;width:700px;height:150px;border-bottom:3px solid orange ; background:black}webjx\: Main part {display:block;margin:0 auto;width:700px;text-align:left;background: #eee}webjx\: The main part webjx\: The left side of the main body {display:block;width:220px;height:500px;border-right:1px solid #ddd; background: #f3f3f3}webjx\: News Title {display:block;padding-left:5px;height:25px;line-height:25px;background: #ccc}webjx\: News list {display:block; List-style:none;height:160px;background: #eee}webjx\: The lower part of the page {display:block;margin:0 auto;width:700px;height:100px; Background:black}webjx\: Site logo {position:absolute;top:20px;left:20px;padding-top:2px;display:block;width:90px; Height:31px;background: #eee}webjx\: navigation menu {position:absolute;top:124px;left:300px;display:block;} Webjx\: Navigation menu 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\: Navigation menu A:hover {border:1px solid #FDE201; border-bottom:0;} Webjx\: page {border:1px solid #FDE201;} &LT;/STYLE&GT;&LT;/HEAD&GT;&LT;BODY&GT;&LT;WEBJX: Page Upper &GT;&LT;WEBJX: Site logo ><webjx: navigation menu ><a href=" # ">home</a><a href= "#" >work</a><a href= "#" &GT;CONTACT&LT;/A&GT;&LT;/WEBJX: Navigation menu &GT;&LT;/WEBJX: Page Upper &GT;&LT;WEBJX: Main part &GT;&LT;WEBJX: Main left &GT;&LT;WEBJX: News title > Latest update &LT;/WEBJX: News title &GT;&LT;WEBJX: News list ><li> AAAAAAAAAAA </li><li>·aaaaaaaaaaa</li><li>·aaaaaaaaaaa</li><li>·aaaaaaaaaaa</li> <li> aaaaaaaaaaa</li><li> AAAAAAAAAAA&LT;/LI&GT;&LT;/WEBJX: News listing &GT;&LT;/WEBJX: Main left ></ WEBJX: Main part &GT;&LT;WEBJX: page &GT;SSSSSS&LT;/WEBJX: page &GT;&LT;WEBJX: page &GT;SSSSSS&LT;/WEBJX: page &GT;&LT;WEBJX: page > SssSSS&LT;/WEBJX: page ><webjx: Lower &GT;&LT;/WEBJX page: page Lower ></body></ptml>

[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]