A simple CSS + Div layout instance allows you to clearly understand how to layout!
Its structure is analyzed in the following parts: black head, blue body, split into red to blue, and navigation and body on the right. The bottom yellow is the bottom, the structure is quite simple. Now I am writing its CSS,
Define the top black as header:
1. # header {margin: 0px; clear: Both; Background: black; width: 800px; Height: 100px; text-align: center; padding-top: 12px ;}
The blue subject in the middle is mainbox, so the style sheet can be written as follows:
1. # mainbox {margin: auto 0px; width: 800; Background: Blue; Height: pixel PX ;}
The following is an example of this definition:
1. # sidebar {margin: 12px 2px 5px 12px; float: Left; Background: red; width: 200px; Height: 400px; clear: Right ;} /******* top right bottom left *******/
2. # menu {margin: 12px 2px 5px 12px; float: Right; Background: red; width: 550px; Height: 30px ;}
3. # Content {float: Right; margin: 4px 2px 2px; 12px; width: 550px; Height: 361; Background: #000; padding-left: 0px ;}
4. # footer {margin-drop: 0px; width: 800px; Height: 40px; Background: # fff000 ;}
Note: The four values on the Right of margin correspond to the upper right bottom left, for example, the menu distance is 5px, And the content distance is 4px, so there is a margin of 9px in the middle, first, the menu height is defined as 30px, so if the content is aligned with the sidebar, the height should be defined as 400-30-4-5 = 361. the content of the <style> section is completed above. Put the corresponding DIV in the body below,
1. <body>
2. <Div id = "Header"> <font size = "3" color = "# ffff33"> demonstration document of jiayuan Chinese webmasters </font> </div>
3. <Div id = "mainbox">
4. <Div id = "sidebar">
5. </div>
6. <Div id = "menu"> 4323434 </div>
7. <Div id = "content">
8. <Div align = "Left"> </div>
9. </div>
10. </div>
11. <Div id = "footer"> here is the foot part. What is the copyright? </div>
12. </body>
Refreshing and discovering are effects. However, if all the divs depend on the left, how can they be centered ?? The reason is that we have not defined the position of the element in the body, so the following is added to CSS:
1. Body {text-align: center ;}
This is all done!
The complete page is:
Copy code
1. <! Doctype HTML public "-// W3C // dtd html 4.0 transitional // en">
2. <HTML>
3. 4. <style tpye = "text/CSS">
5. <! --
6. body {text-align: center;}/*********** this is to limit the center effect of the main face. If not, */is displayed on the left by default *********/
7. # header {margin: 0px; clear: Both; Background: black; width: 800px; Height: 100px; text-align: center; padding-top: 12px ;}
8. # mainbox {margin: auto 0px; width: 800; Background: Blue; Height: pixel PX ;}
9. # sidebar {margin: 12px 2px 5px 12px; float: Left; Background: red; width: 200px; Height: 400px; clear: Right ;} /******* top right bottom left *******/
10. # menu {margin: 12px 2px 5px 12px; float: Right; Background: red; width: 550px; Height: 30px ;}
11. # Content {float: Right; margin: 4px 2px 2px; 12px; width: 550px; Height: 361; Background: #000; padding-left: 0px ;}
12. # footer {margin-rop: 0px; width: 800px; Height: 40px; Background: # fff000 ;}
13. -->
14. </style>
15. 16. <body>
17. <Div id = "Header"> <font size = "3" color = "# ffff33"> demonstration document of jiayuan Chinese webmasters website </font> </div>
18. <Div id = "mainbox">
19. <Div id = "sidebar">
20. </div>
21. <Div id = "menu"> 4323434 </div>
22. <Div id = "content">
23. <Div align = "Left"> </div>
24. </div>
25. </div>
26. <Div id = "footer"> here is the foot part. What is the copyright? </div>
27. </body>
28.
For more Div + CSS layout, visit http://www.cndorm.com/html/117/here.
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
