I believe that none of my friends who come to the classic forum to learn standards are intended to enter W3C, not to become professional researchers. So what are the purposes of everyone? It is very simple. In fact, they all want to use standard learning to add one more skill, so that they will not be "proficient in web standards" when looking for a job, in the following example, XHTML has no semantics, Article The purpose is to allow everyone to better understand the usage of relative and absolute positioning in CSS (a lot of questions for beginners) and how to effectively combine the background, complicated layout. I hope our predecessors can give me some advice. Thank you!
-------------------------------------------------- Step 1 -------------------------------------------
First, design a Complex layout (irregular layout) Demo:
-------------------------------------------------- Step 2 -------------------------------------------
Let's proceed Code Write
<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; --------------------------------> 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: pixel PX;
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:-pixel PX-115px;
}
# Main # menu a # services: hover {
Background-position:-192px-115px;
}
# Main # menu a # contacts: hover {
Background-position:-262px-115px;
}
# Main H1 {
Position: absolute; --------> I am definitely positioning. I am Positioning Relative to my upper level # Main, because he has set position: relative; if the position: relative is not found in my parent level, then I located it relative to the body...
Top: 0; left: 1px;
Width: 151px;
Height: 56px;
Background: URL (images/logo.jpg) No-Repeat;
}
# Main H2 {
Position: absolute; ------------------> I also absolutely find the same usage as I mentioned above
Top: 133px;
Right: 7px;
Width: 404px;
Height: pixel PX;
Background: URL (images/about.gif) No-Repeat;
}
# Main H6 {
Position: absolute; ------------------> I also absolutely find the same usage 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 can I implement background switching in a diagram?
Oh, it's actually quite simple? We all know that the background image contains the settings of the horizontal and vertical coordinates of the image. This example uses this feature to offset the background with different IDs linked to a to achieve the purpose of background switching.
<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> <H2> </H2>
<H6> </H6>
</Div>
</Body>
</Html>
----------------------------------------------- Actual page effect :---------------------------------------<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"> <br/> <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: pixel; 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:-pixel-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: 20.px; 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> <br/> <p>