CSS之使用css布局

来源：互联网发布：Ubuntu sambaclient 编辑：程序博客网时间：2024/06/06 04:31

CSS之使用css布局

一列布局：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">    <title>一列布局</title>    <style type="text/css">    body{        margin: 0;        padding: 0;    }    .top{        height:100px;        background: blue;    }    .main{        width: 800px;        height: 300px;        background: #ccc;        margin: 0 auto;    }    .foot{        width: 800px;        height: 100px;        background: #900;        margin: 0 auto;    }    </style></head><body>    <div class="top"></div>    <div class="main"></div>    <div class="foot"></div></body></html>

二列布局：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">    <title>一列布局</title>    <style type="text/css">    body{        margin: 0;        padding: 0;    }    .top{        height:100px;        background: blue;    }    .main{        width: 800px;        margin: 0 auto;    }    .left{        width: 20%;        height: 500px;        float: left;        background: #ccc;    }    .right{        width: 80%;        height: 500px;        float: right;        background: #900;    }    </style></head><body>    <div class="top"></div>    <div class="main">        <div class="left"></div>        <div class="right"></div>    </div></body></html>

1 0