天天看點

典型的左右結構(兩列)的網頁模式

效果如圖:

典型的左右結構(兩列)的網頁模式

實作代碼:

<!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;*/

border-left: 134px solid #069;/*左邊框位置從134px位置開始*/

</style>

</head>

<body>

<!--主容器開始-->

<div id="container">

<!--①标題部分開始-->

<div id="header">

标題部分

</div>

<!--①标題部分結束-->

<!--②左邊部分開始-->

<div id="navigation">

左邊部分

<!--②左邊部分結束-->

<!--③右邊部分開始-->

<div id="content">

右邊部分

<!--③右邊部分結束-->

<!--主容器結束-->

</body>

</html>

繼續閱讀