div+css布局之固定定位布局

fixlayout.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>固定定位布局-三列</title>
<link rel="stylesheet" type="text/css" href="style2.css"/>
</head>

<body>
    <div id="header"><h1>这里是标题</h1></div>
    <div id="body">
        <div id="navl">左导航</div>
        <div id="main">中内容</div>
        <div id="navr">右导航</div>
    </div>
    <div id="footer"><p>版权所有，违法必究。</p></div></div>
</body>
</html>

style.css

/* CSS Document */
*{
    margin:0;
    padding:0;
}
body{    
    margin:10px;
}

#header{
    width:600px;
    height:60px;
    line-height:60px;
    text-align:center;
    margin:0 auto;
    border:1px solid black;
    background:#ccc;
    margin-bottom:10px;
}

#header h1{
    font-size:16px;
}

#body{
    margin:0 auto;
    border:1px solid red;
    width:600px;
    height:500px;
    position:relative;
    margin-bottom:10px;
}

#body #navl{
    width:150px;
    height:500px;
    border:1px solid black;
    background:lightcyan;
}

#body #main{
    width:300px;
    height:500px;
    border:1px solid black;
    background:lightblue;
    position:absolute;
    top:0;
    left:150px;
}

#body #navr{
    width:150px;
    height:500px;
    border:1px solid black;
    background:lightcyan;
    position:absolute;
    top:0;
    left:450px;
}

#footer{
    margin:0 auto;
    width:600px;
    height:30px;
    border:1px solid black;
    background:#ccc;
}
#footer p{
    height:30px;
    line-height:30px;
    text-align:center;
    word-sapcing:10px;
}

效果如下：

posted @ 2011-08-20 13:09  水之原  阅读(2493)  评论(0)  编辑  收藏  举报