DIV is more difficult to control than traditional tables.
Here is a common three-column layout.
| Header | ||
| Left | Content | Right |
| Footer | ||
The CSS part is not very concise. You are welcome to comment and correct it, and give pointers to this beginner's rookie ^_^
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br/> <HTML xmlns = "http://www.w3.org/1999/xhtml"> <br/> <pead> <br/> <title> new document </title> <br/> <meta name = "generator" content = "editplus"/> <br/> <meta name = "author" content = ""/> <br/> <meta name = "keywords" content = ""/> <br/> <meta name = "Description" content =" "/> <br/> <style type =" text/CSS "> <br/> * <br/> {<br/> font-size: 12px; <br/> font-family: verdana; <br/> margin: 0px; <br/> padding: 0px; <br/>}< br/> A <br/>{< br/> text-Decoration: none; <br/>}< br/> # header, # footer <br/>{< br/> width: 85%; <br/> margin: 0 auto; <br/> Height: 50px; <br/>}< br/> # header <br/> {<br/> Height: 70px; <br/> margin-top: 5px; <br/> border: solid 1px #000; <br/> Background: URL (http://www.lemongtree.com/12.gif) No-repeat right-20px; <br/>}< br/> # header H1 <br/>{< br/> line-Height: 40px; <br/>}< br/> # body <br/>{< br/> position: relative; <br/> width: 85%; <br/> margin: 3px auto; <br/> Height: 100%; <br/> word-wdrop: Break-word; <br/> word-break: Break-all; <br/>}< br/> # sidebar <br/>{< br/> position: absolute; <br/> left: 0; <br/> top: 0; <br/> width: 200px; <br/>}< br/> # Right <br/>{< br/> width: 240px; <br/> position: absolute; <br/> right: 0; <br/> top: 0; <br/>}< br/> # center <br/>{< br/> margin: 0 241px 0 201px; <br/>}< br/> # body, # sidebar, # Right, # center, # footer {Height: 750px; Border: solid 1px #000 ;}< br/># footer <br/>{< br/> Height: 50px; <br/>}< br/> # body <br/>{< br/> border: none; <br/>}< br/> # nav ul <br/>{< br/> float: Left; <br/> width: 600px; <br/> list-style-type: none; <br/> border-bottom: solid 6px # 6666cc; <br/>}< br/> # nav ul LI <br/>{< br/> float: left; <br/>}< br/> # nav Li a <br/>{< br/> display: block; <br/> text-Decoration: none; <br/> text-align: center; <br/> width: 50px; <br/> padding: 5px; <br/>}< br/> # nav Li: hover <br/> {<br/> Background: # 66c; <br/> color: # FFF; <br/> font-weight: bold; <br/>}< br/> dt <br/> {<br/> border-bottom: dotted 1px #000066; <br/> border-top: dotted 1px #006; <br/>}< br/> DT. first <br/>{< br/> border-top: none; <br/>}< br/> dt <br/>{< br/> padding: 8px 0px 8px 4px; <br/>}< br/> dd A {<br/> display: block; <br/> text-indent: 20px; <br/> padding: 10px; <br/>}< br/> dd A: hover <br/>{< br/> font-weight: bold; <br/> color: #000; <br/> Background: #66 ffcc; <br/>}< br/> </style> <br/> </pead> <br/> <body> <br/> <Div id = "Header"> <br/> <p> title </p> <br/> <Div id = "nav"> <br/> <ul> <br/> <li> <pref = "#1"> link </a> </LI> <br/> <li> <a href = "#1"> link </a> </Li> <br/> <li> <a href = "#1"> link </a> </LI> <br/> <li> <a href = "#1 "> link </a> </LI> <br/> <li> <a href =" #1 "> link </a> </LI> <br/> <li> <a href = "#1"> link </a> </LI> <br/> <li> <a href = "#1"> link </ a> </LI> <br/> <li> <a href = "#1"> link </a> </LI> <br/> <li> <pref = "#1"> link </a> </LI> <br/> <li> <a href = "#1"> link </a> </Li> <br/> </ul> <br/> </div> <br/> <Div id = "body"> <br/> <Div id = "sidebar"> <br/> <DL> <br/> <DT class = "first"> Category </DT> <br/> <DD> <a href = "#1"> link </a> </DD> <br/> <DD> <a href = "#1"> link </a> </DD> <br/> <DD> <a href = "#1"> link </a> </DD> <br/> <DD> <a href =" #1 "> link </a> </DD> <br/> <DD> <a href =" #1 "> link </a> </DD> <br /> </dl> <br/> <DL> <br/> <DT> link </DT> <br/> <DD> <a href = "#1"> link </a> </DD> <br/> <DD> <a href = "#1"> link </a> </DD> <br/> <DD> <a href = "#1"> link </a> </DD> <br/> <DD> <a href = "#1"> link </> </DD> <br/> <DD> <a href = "#1"> link </a> </DD> <br/> </dl> <br /> <DL> <br/> <DT> dt </DT> <br/> <DD> <a href = "#1"> link </a> </ DD> <br/> <DD> <a href = "#1"> link </a> </DD> <br/> <DD> <a href = "# 1 "> link </a> </DD> <br/> <DD> <a href =" #1 "> link </a> </DD> <br/> <DD> <a href = "#1"> link </a> </DD> <br/> </dl> <br/> </div> <br /> <Div id = "center"> center </div> <br/> <Div id = "right"> <br/> right <br/> </div> <br/> </div> <br/> <Div id = "footer"> <br/> footer <br/> </div> <br/> </body> <br/> </ptml> <br/>
PS. Blog seems to be updated again, adding a function for uploading source code.
Source: http://www.lemongtree.com/Archives/730.aspx
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
