CSS盒子模式
http://www.blueidea.com/articleimg/2007/03/4545/css2.html彻底弄懂CSS盒子模式(DIV布局快速入门)
RIA知识库
flex
RIA
http://www.blueidea.com/articleimg/2007/03/4545/css1.html
<style type="text/css"><!--* {margin: 0px;padding: 0px;}body {font-family: Arial, Helvetica, sans-serif;font-size: 12px;margin: 0px auto;height: auto;width: 760px;border: 1px solid #006633;}#header {height: 25px;width: 740px;background-image: url(headPic.gif);background-repeat: no-repeat;margin:0px 0px 3px 0px;background-color:#006633}#nav {height: 25px;width: 740px;font-size: 14px;list-style-type: none;}#nav li {float:left;}#nav li a{color:#000000;text-decoration:none;padding-top:4px;display:block;width:97px;height:22px;text-align:center;background-color: #009966;margin-left:2px;}#nav li a:hover{background-color:#006633;color:#FFFFFF;}#content {height:auto;width: 740px;line-height: 1.5em;padding: 10px;}#content p {text-indent: 2em;}#content h3 {font-size: 16px;margin: 10px;}#footer {height: 50px;width: 740px;line-height: 2em;text-align: center;background-color: #006633;padding: 10px;}--></style><body> <div id="header"> <ul id="nav"> <li><a href="#">首 页</a></li> <li><a href="#">文 章</a></li> <li><a href="#">相册</a></li> <li><a href="#">Blog</a></li> <li><a href="#">论 坛</a></li> <li><a href="#">帮助</a></li> </ul> </div> <div id="content"> <h3>前言</h3> <p>第一段内容</p> <h3>理解CSS盒子模式</h3> <p>第二段内容</p> </div> <div id="footer"> <p>关于*** | 广告服务 | ***招聘 | 客服中心 | Q Q留言 | 网站管理 | 会员登录 | 购物车</p><p>Copyright ©2006 - 2008 Tang Guohui. All Rights Reserved</p> </div></body>