本文介绍了一种使用HTML和CSS实现固定宽度并居中显示的布局方法。通过设置外边距为自动来实现水平居中效果，并利用绝对定位放置不同区域。此布局包括顶部导航、左侧导航和主要内容区域。
效果如图：
实现代码：
<!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; width:80%; /* width + border for IE 5.x */ border: solid #036; border-width: 1 3px; margin: auto; height:100%; } #header { background-color:lightyellow; height: 60px; } #navigation { position: absolute; top: 60px; left: 0; width: 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>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
