Use interesting custom markup layout pages _ Experience Exchange
Source: Internet
Author: User
Today we are going to learn how to use interesting custom tags to lay out pages. Some friends may have such doubts, their own casual definition of the tag browser how to correctly understand it?
Here we are going to use the namespace of the document, so what does the namespace mean?
Everyone knows that XML has a big feature of his extensibility. You can create your own tag or use a tag created by someone else, there is a problem here, that is, the label you define
The identities that are defined by others may be the same, but the meaning they each represents is different.
To play an image of the metaphor, such as the name of two people are called Blue, a person in the classic, a person in the Tianya, if you want to find them can be described, the horizon: Blue, Classic: blue, so it will not be confused.
The meaning of the namespace is to tell someone who the document belongs to. XHTML is the product of HTML transitions to XML, and here he provides a namespace for us.
Looking at the following example, we name a prefix called Blueidea, and http://bbs.blueidea.com is the URL used to describe the namespace. xmlns refers to the XHTML namespace
Copy CodeThe code is as follows:
The interesting thing is that we can even mark it in Chinese (there may be coding problems in Chinese). Such a document looks really clear at a glance.
Below we define a tag called "news headline" format because it is "Blueidea: News Headlines"
Copy CodeThe code is as follows: Latest Updates
Then use CSS to define him, format:
Blueidea\: News Title {
It is important to 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 the XML. Everyone hurriedly to try it, because a lot of things are self-developed from the practice.
<! 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\: Upper page {position:relative; Display:block; margin:0 Auto; width:700px; height:150px; BORDER-BOTTOM:3PX solid Orange; Background:black} blueidea\: main part {display:block; margin:0 Auto; width:700px; Text-align:left; Background: #eee} blueidea\: Body part blueidea\: left of main body {display:block; width:220px; height:500px; border-right:1px solid #ddd; Background: #f3f3f3} blueidea\: News title {Display:block; padding-left:5px; height:25px; line-height:25px; Background: #ccc} blueidea\: News list {display:block; List-style:none; height:160px; Background: #eee} blueidea\: The lower part of the page {display:block; margin:0 Auto; width:700px; height:100px; Background:black} blueidea\: Site flag {position:absolute; top:20px; left:20px; padding-top:2px; Display:block; width:90px; height:31px; Background: #eee} blueidea\: navigation menu {Position:absolute; top:124px; left:300px; Display:block; } blueidea\: Navigation menu a {float:left; margin-left:2px; width:60px; height:25px; font:12px/25px song body; Color:white; Text-decoration:none; border:1px solid Orange; border-bottom:0; } blueidea\: Navigation menu A:hover {border:1px solid #FDE201; border-bottom:0; } blueidea\: page {border:1px solid #FDE201; } </style> </pead> <body> <blueidea: Page Top > <blueidea: Site flag ></blueidea: Site logo > < Blueidea: navigation menu > Home Work Contact </blueidea: navigation menu > </blueidea: Upper page > <blueidea: Body part > <blueidea: Main left > <blueidea: News headlines > Latest update </blueidea: News headlines > <blueidea: News list > <li>·aaaaaaaaaaa</li> <li> aaaaaaaaaaa</li> <li>·aaaaaaaaaaa</li> <li>·aaaaaaaaaaa</li> <li> Aaaaaaaaaaa</li> <li>·aaaaaaaaaaa</li> </blueidea: News list > </blueidea: Main left > </ Blueidea: Main part > <blueidea: Page >ssssss</blueidea: page > <blueidea: Page >ssssss</blueidea: page > <blueidea: Page >ssssss</blueidea: page > <blueidea: page Lower ></blueidea: Lower page > </body> </ptml >
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion;
products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the
content of the page makes you feel confusing, please write us an email, we will handle the problem
within 5 days after receiving your email.
If you find any instances of plagiarism from the community, please send an email to:
info-contact@alibabacloud.com
and provide relevant evidence. A staff member will contact you within 5 working days.
