典型的左右结构（两列）的网页模式 效果如图： 实现代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!--这行声明必不可少，且必须位于文档最前面--> <head> <title>固定宽度且居中</title> <style type="text/css" media="all"> #container { position: relative; 80%; /* width + border for IE 5.x */ border: solid #036; border- 1 3px; margin: auto; height:100%; } #header { background-color:lightyellow; height: 60px; } #navigation { position: absolute; top: 60px; left: 0; 134px; background-color:lightblue; height:500px; } #content { background-color:lightgreen; /*padding: 1px 20px 1em 40px;*/ top: 60px; border-left: 134px solid #069;/*左边框位置从134px位置开始*/ height:500px; } </style> </head> <body> <!--主容器开始--> <div id="container"> <!--①标题部分开始--> <div id="header"> 标题部分 </div> <!--①标题部分结束--> <!--②左边部分开始--> <div id="navigation"> 左边部分 </div> <!--②左边部分结束--> <!--③右边部分开始--> <div id="content"> 右边部分 </div> <!--③右边部分结束--> </div> <!--主容器结束--> </body> </html>
