丰富的线上&线下活动,深入探索云世界
做任务,得社区积分和周边
资深技术专家手把手带教
技术交流,直击现场
让创作激发创新
海量开发者使用工具、手册,免费下载
极速、全面、稳定、安全的开源镜像
开发手册、白皮书、案例集等实战精华
热门
效果如图:
实现代码:
<!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>