css +div 实现上中下布局

 

　　以前用table，现在可以用css+div来实现页面布局。

 

　　div布局和table布局有什么不同呢？

div更灵活，定位比table要好使简单，修改起来也方便，比如我定义一个区域显示在屏幕(300，200)的位置，用div会很简单，table就繁琐了，现在网页的整体布局都用div了；但是展示信息还是用table比较简单，比如显示课程表如果有div实现会建立许多

 　　

　　上中（左右）下全屏布局实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #all{
            width:100%;
            height:100%; }
        #left{
            position:absolute;
            background-color:#3aadf0;
            float:left;
            width:20%;
            height:500px; }
        #right{
            position:absolute;
            background-color:red;
            float:right;
            width:80%;
            height:500px;;
            margin-left:20%;
        }
    </style>
</head>
<body>

<div id="all">
    <div id="left">
        <p>左边</p>
    </div>
    <div id="right">
        <p>右边</p>
    </div>
</div>

</body>
</html>

 

 

只要设定到左右两侧的空白为自动即可。意即： #wrap { margin:0 auto;} 上面这段代码的意思是说使wrap这个div到左右两侧的距离自动设置，上下为0(可以为任意)。

posted @ 2022-04-03 22:56  kuaiquxie  阅读(549)  评论(0)    收藏  举报