天天看点

典型的左右结构(两列)的网页模式

效果如图:

典型的左右结构(两列)的网页模式

实现代码:

<!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>

继续阅读