閱讀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的一些新特性