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!
--------------------------------------------------the first step-------------------------------------------
First to design a complex layout of the (layout is not regular) Demo:
document.body.clientwidth-300) {this.height= (document.body.clientwidth-300) *this.height/this.width;this.width= DOCUMENT.BODY.CLIENTWIDTH-300} "border=0>
--------------------------------------------------the second step-------------------------------------------
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, #main #menu a#page{
--> -->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 is not found in my parent's level: Relative, 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>
</HEAD>
<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:---------------------------------------
<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 (http://www.okrmt.com/demo7.8/images/allbg.jpg); Text-align:center; } #main {margin:0 auto; position:relative; width:780px; height:659px; Background:url (http://www.okrmt.com/demo7.8/images/model.jpg) no-repeat; } #main #menu {position:absolute; right:12px; width:354px; height:115px; Background:url (http://www.okrmt.com/demo7.8/images/menu.gif) no-repeat; #main #menu A, #main #menu a#page{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 (http://www.Okrmt.com/demo7.8/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; top:0;left:1px; width:151px; height:56px; Background:url (http://www.okrmt.com/demo7.8/images/logo.jpg) no-repeat; } #main h2{Position:absolute; top:133px; right:7px; width:404px; height:190px; Background:url (http://www.okrmt.com/demo7.8/images/about.gif) no-repeat; } #main h6{Position:absolute; bottom:75px; right:10px; width:265px; height:44px; Background:url (http://www.okrmt.com/demo7.8/images/cars-logo.gif) no-repeat; } </style> </HEAD> <BODY> <div id= "main" > <div id= "Menu "> </div> <p></p> <p></p> <p></p> </div> </b Ody> </HTML>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Well, this example tutorial is over, I hope for the future of the XHTML Web page design, layout can help! Good bye.
