1.HTML基本结构
<!DOCTYPEhtml> <htmlxmlns="http://www.w3.org/1999/xhtml"> <headrunat="server"> <title>layout</title> </head> <body> <divclass="header"> <h1>head of your website.</h1> </div> <divclass="wrapper"> <divclass="content"> <h2>Your website content here.</h2> <scripttype="text/javascript"> for(var i = 0; i<100;i++){ document.write(i + "<br />"); } </script> </div> <divclass="clear"><!-- 必不可少 --></div> </div> <divclass="footer"> <div><h1> Copyright (c) 2012</h1></div> </div> </body> </html>
2.CSS样式
<styletype="text/css"> *{ margin: 0;/* 把默认值都设为0 */ } html, body { height: 100%; 85%; margin:0auto;/* 居中 */ } .header { height:100px; background-color:Fuchsia; } .wrapper { min-height: 100%;/* IE6 hack*/ height: auto!important;/* height优先级 */ height: 100%; margin: 0auto-4em;/* 负值必须等于footer的高度 */ } .content { background-color:Silver; } .clear/* 清除浮动 */ { height: 4em; /* clear的height必须和footer的值样高 */ clear:both; } .footer { height: 4em; background-color:Aqua; } </style>
3.运行