This template is a layout template of the left and right columns. It is no longer the most basic building framework, and more block structures are also made, if this structure is met, you can use it directly (most of my websites use this structure, ^_^ ). The test in IE and FF is not distorted, but the W3C certification is not tested. It is estimated that the test still fails (some compatible styles are not passed ).
HTML page StructureCode:
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> basic frame structure of common Div + CSS website layout-full version </title>
<Link href = "/CSS/layout.css" rel = "stylesheet" type = "text/CSS"/>
</Head>
<Body>
<Div id = "Container">
<Div id = "Header">
<H1> header </Div>
<Div class = "clearfloat"> </div>
<Div id = "nav">
<Ul>
<Li> <a href = "#"> Navigation 1 </a> </LI>
<Li> <a href = "#"> navigation 2 </a> </LI>
<Li> <a href = "#"> navigation 3 </a> </LI>
<Li> <a href = "#"> navigation 4 </a> </LI>
<Li> <a href = "#"> Navigation 5 </a> </LI>
</Ul>
</Div>
<Div id = "maincontent">
<Div id = "Main">
<Div class = "mainbox">
<H2> block title </H2>
<Ul> block content </ul>
</Div>
</Div>
<Div id = "side">
<Div class = "sidebox">
<H4> block title </H4>
<Ul> block content </ul>
</Div>
</Div>
</Div>
<Div class = "clearfloat"> </div>
<Div id = "footer">
Bottom
</Div>
</Div>
</Body>
</Html>
CSS Sample Table layout.css code:
@ Charset "UTF-8 ";
/* CSS document */
@ Import URL ("/CSS/global.css ");
/* Body */
# Container {margin: 0 auto; width: 950px ;}
/* Header */
# Header {Height: 50px; Background: # ff911a ;}
# Header H1 {padding: 10px 20px ;}
# Nav {Background: # ff6600; Height: 24px; margin-bottom: 6px ;}
# Nav ul Li {float: Left ;}
# Nav ul Li a {display: block; padding: 4px 10px 2px 10px; color: # FFF; text-Decoration: none ;}
# Nav ul Li A: hover {text-Decoration: underline ;}
/* Main */
# Maincontent {overflow: auto; ZOOM: 1; margin-bottom: 6px ;}
# Side {width: 200px; float: Left ;}
. Sidebox {border: 1px solid # ed6400; margin-bottom: 6px ;}
. Sidebox H4 {Background: # ff911a; padding: 2px 6px; border-bottom: 1px solid # ed6400; color: # FFF ;}
. Sidebox ul {padding: 4px 6px ;}
# Main {width: 742px; float: Right ;}
. Mainbox {border: 1px solid # ed6400; margin-bottom: 6px ;}
. Mainbox H2 {Background: # ff911a; padding: 2px 6px; border-bottom: 1px solid # ed6400; color: # FFF ;}
. Mainbox ul {padding: 4px 6px ;}
/* Footer */
# Footer {border-top: 3px solid # CCC; Height: 50px; text-align: center; padding: 6px ;}
The code of the wrapped CSS Sample Table global.css (place the global style in a style sheet separately to avoid duplication and facilitate calling ):
@ Charset "UTF-8 ";
Body {margin: 0 auto; font-size: 12px; font-family: verdana; line-Height: 1.5 ;}
Ul, DL, DD, H1, H2, H3, H4, H5, H6, form, P {padding: 0; margin: 0 ;}
H1 {font-size: 20px; font-family: 'Microsoft yahei ';}
H2 {font-size: 14px ;}
H3 {font-size: 14px; font-weight: normal ;}
H4 {font-size: 12px ;}
H5 {font-size: 12px; font-weight: normal ;}
Ul {list-style: none ;}
IMG {border: 0px ;}
A {color: #195cb5; text-Decoration: none ;}
A: hover {color: # f00 ;}
. Clearfloat {clear: Both; Height: 0; font-size: 1px; line-Height: 0px ;}
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
