一列布局

一、一列布局
一列布局多用于网站的首页，比如360搜索，一列布局的结构简洁明了，主题突出，适合排列简单的内容，不适合多行内容，通常一列布局都是固定宽度的。图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>一列布局</title>
<style>
*{margin:0;padding:0;}
#header{
    height:50px;
    min-width:960px;/*建议设置*/
    background:blue;
}
#main{
    width:960px;
    height:800px; /* 在实际开发中不设置列的高度，让高度自适应。 */
    background:green;
    margin:0 auto;
}
#footer{
    width:960px;
    height:100px;
    background:gray;
    margin:0 auto;
}
</style>
</head>
<body>
<div id="header">页头</div>
<div id="main">主体内容</div>
<div id="footer">页脚</div>
</body>
</html>

二、单列宽度自适应布局。
要想宽度自适应，只需要按照百分比来设置宽度，内容就可以根据浏览器窗口自动调节大小。图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>一列自适应布局</title>
<style>
*{margin:0;padding:0;}
#header{
    height:50px;
    background:blue;
}
#main{
    width:80%;
    height:800px; /* 在实际开发中不设置列的高度，让高度自适应。 */
    background:green;
    margin:0 auto;
}
#footer{
    width:80%;
    height:50px;
    background:gray;
    margin:0 auto;
}
</style>
</head>
<body>
<div id="header">页头</div>
<div id="main">主体内容</div>
<div id="footer">页脚</div>
</body>
</html>

三、自适应单列布局
图片描述

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>单列布局</title>
<style>
*{margin:0;padding:0;}
#wrap{
    width:80%;
    margin:0 auto;
    border:2px solid black;
}
#header{
    width:100%;
    height:100px;
    background:blue;
    margin-bottom:10px;
}
#main{
    width:100%;
    margin-bottom:10px;
}
#main .content{
    height:500px; /* 在实际开发中不设置列的高度，让高度自适应。 */
    background:yellow;
}
#footer{
    width:100%;
    height:100px;
    background:gray;
}
</style>
<body>
<div id="wrap">
    <div id="header">页头</div>
    <div id="main">主体
        <div class="content">内容</div>
    </div>
    <div id="footer">页脚</div>
</div>
</body>
</html>

原文地址：http://www.cnblogs.com/Mtime/...

猜你喜欢