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 "></A></DIV><H1></H1><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!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
