Web Standard Layout Instance Tutorial

Source: Internet
Author: User
Tags relative
Web|web Standard | tutorials

I believe that the classic forum to learn the standard of friends, 99% is not to enter the international conference, not to become a professional researcher, then what is the purpose of everyone? Very simple, actually all want to pass the standard study to let oneself add a skill more only, let yourself in the search for a job will not be in the "need to master the Web Standards", and in the following example XHTML does not have any semantics, the purpose of the article is only to let you have a better grasp of the CSS relative, The use of absolute positioning (the novice asked the question is indeed a lot), and how to effectively combine the background to achieve a more complex layout. Deficiencies also hope that predecessors can guide twos, thanks!

First step:

First to design a complex layout of the (layout is not regular) Demo:

Step Two:

We're going to write the code.

<HTML>
<HEAD>
<TITLE>model</TITLE>
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 ">
<style>
html,body{
margin:0;
padding:0;
Background: #A1A9B6 URL (images/allbg.jpg);
Text-align:center;
}
#main {
margin:0 Auto;
position:relative; /* I am relative positioning * *
width:780px;
height:659px;
Background:url (images/model.jpg) no-repeat;
}
#main #menu {
Position:absolute;
right:12px;
width:354px;
height:115px;
Background:url (images/menu.gif) no-repeat;
}
#main #menu a#page, #main #menu a#about, #main #menu a#services, #main #menu a#contacts{
Float:left;
width:112px;
height:30px;
}
#main #menu a#about{
width:80px;
height:55px;
}
#main #menu a#services{
width:70px;
height:80px;
}
#main #menu a#contacts{
width:80px;
height:115px;
}
#main #menu a:hover{
Background:url (images/menu.gif) no-repeat;
}
#main #menu a#page:hover{
background-position:0px-115px;
}
#main #menu a#about:hover{
Background-position: -112px-115px;
}
#main #menu a#services:hover{
Background-position: -192px-115px;
}
#main #menu a#contacts:hover{
Background-position: -262px-115px;
}
#main h1{
position:absolute;/* I was absolutely positioned, and I was relative to my upper level #main to be positioned as he set the position:relative; if position:relative was not found at my parent level; Then I will be relative with the body to locate the ... * *

    top:0;left:1px;
    width:151px;
    height:56px;
    Background:url (images/logo.jpg) no-repeat;
   }
#main h2{
    position:absolute;/* I am also absolutely positioned as I mentioned above */
    top:133px;
    right:7px;
    width:404px;
    height:190px;
    Background:url (images/about.gif) no-repeat;
   }
#main h6{
    position:absolute;/* I am also absolutely positioned as I mentioned above */
    bottom:75px;
    right:10px;
    width:265px;
    height:44px;
    Background:url (images/cars-logo.gif) no-repeat;
   }
</style>
<body>
<div id= "main"
<div id= "menu"

* * How does this menu work?
How does a picture make a background switch?
Oh, it is also very simple? We know that the background image has: the horizontal ordinate position of images, this example is the use of this feature, will have a different ID link a background offset, to achieve background switching purposes. */

<a href= "#" id= "page" title= "page" ></a>
<a href= "#" id= "about" title= "about" ></a>
<a href= "#" id= "Services" title= "Services" ></a>
<a href= "#" id= "Contacts" title= "Contacts" ></a>
</div>
</div>
</BODY>
</HTML>

Actual Page effect:

Run Code Box

<ptml><pead><title>model</title><meta http-equiv= "Content-Type" CONTENT= "text/html; charset=gb2312 "><style>html,body{margin:0 padding:0 background: #A1A9B6 URL (/uploadpic/2007-7/ 200777205439920.jpg); Text-align:center; } #main {margin:0 auto; position:relative; width:780px; height:659px; Background:url (/uploadpic/2007-7/ 200777205439805.jpg) No-repeat; #main #menu {position:absolute; right:12px; width:354px; height:115px; Background:url (/uploadpic/2007-7/ 200777205440607.gif) No-repeat; #main #menu a#page, #main #menu a#about, #main #menu a#services, #main #menu a#contacts{float:left; width:112px px #main #menu a#about{width:80px; height:55px;} #main #menu a#services{width:70px; height:80px;} #main #menu a#contacts{width:80px; height:115px;} #main #menu a:hover{background:url (/uploadpic/2007-7/200777205440607.gif) no-repeat;} #main #menu a#page:hover{background-position:0px-115px;} #main #menu a#about:hover{background-position:-112px-115px; } #main #menu a#services:hover{background-position: -192px-115px;} #main #menu a#contacts:hover{background-position: -262px-115px;} #main h1{position:absolute; top:0;left:1px width:151px; height:56px Background:url (/uploadpic/2007-7/ 200777205440160.jpg) No-repeat; #main h2{position:absolute; top:133px; right:7px; width:404px; height:190px; Background:url (/UploadPic/2007-7/ 200777205440195.gif) No-repeat; #main h6{position:absolute; bottom:75px; right:10px; width:265px; height:44px; Background:url (http:// Www.blueidea.com/articleimg/2006/07/3738/cars-logo.gif) No-repeat; }</style></pead><body><div id= "main" ><div id= "menu" ><a href= "#" id= "page" title= " Page "></a><a href=" # "id=" about "title=" about "></a><a href=" # "id=" Services "title=" services "></a><a href=" # "id=" Contacts "title=" Contacts "&GT;&LT;/A&GT;&LT;/DIV&GT;&LT;H1&GT;&LT;/H1&GT;&LT;H2" ></p><p></p></div></body&gT;</ptml>

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

Well, this example tutorial is over, I hope for the future of the XHTML Web page design, layout can help!



Related Article

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

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 >

Contact Us

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.