阅读655 返回首页    go 技术社区[云栖]

典型的左右结构（两列）的网页模式

效果如图：

 

实现代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://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 > <!--①标题部分开始--> <div > 标题部分 </div> <!--①标题部分结束--> <!--②左边部分开始--> <div > 左边部分 </div> <!--②左边部分结束--> <!--③右边部分开始--> <div > 右边部分 </div> <!--③右边部分结束--> </div> <!--主容器结束--> </body> </html>

最后更新：2017-04-02 03:42:39

  上一篇：go CSS盒子模型
  下一篇：go C#3.0的一些新特性