网页布局技巧详解-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_28568283/article/details/50738978

本文介绍了三种常见的网页布局方法：浮动两列布局、绝对定位三列布局及混合布局，并提供了具体的HTML与CSS实现代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.网页布局之浮动两列布局（关键词：float）

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        .main{
            margin:0 auto;
            width:800px;
            height:600px;}
        .left{
            float:left;
            background:blue;
            width:30%;
            height:600px;}
        .right{
            float:right;
            background:yellow;
            width:70%;
            height:600px;}
    </style>
    <title>左右浮动布局</title>
    </head>

    <body>
        <div class="main">
            <div class="left">left</div>
            <div class="right">right</div>
        </div>
    </body>
    </html>

两列布局

2.页布局之三列布局(关键词：position:absolute;)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三列布局</title>
<style>
    body{ margin:0; padding:0; font-size:30px; font-weight:bold}
    div{ line-height:50px}
    .main{
        height:600px;

    }
    .left{
        position:absolute;
        left:0;
        top:0;
        width:200px;
        height:600px;
        background:#006;}
    .mid{
        height:600px;

        margin:0px 210px 0px 210px;
        top:0;
        background:#F00;}
    .right{
        position:absolute;
        right:0;
        top:0;
        width:200px;
        height:600px;
        background:#0C0;}
</style>
</head>

<body>
    <div class="main">
        <div class="left">left</div>
        <div class="mid">mid</div>
        <div class="right">right</div>
    </div>
</body>
</html>

三列布局
3.混合布局

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
    body{ margin:0; padding:0;}
    .top{
        background:#03F;
        height:100px;
    }
    .main{
        margin:0 auto;
        height:600px;
        width:600px;
        background:#0CC;}
    .left{
        background:yellow;
        height:600px;
        width:200px;
        float:left;
        }
    .right{
        background:#0F6;
        float:right;
        height:600px;
        width:400px;
        }
    .end{
        background:#F0F;
        width:600px;
        height:100px;
        margin:0 auto;}
    .sub_l{
        float:left;
        background:#600;
        width:300px;
        po
        height:600px;}
    .sub_r{
        float:right;
        background:#39F;
        width:100px;
        height:600px;}
    </style>
    <title>网页布局</title>
    </head>

    <body>
            <div class="top"></div>
            <div class="main">
                <div class="left"></div>
                <div class="right">
                    <div class="sub_l"></div>
                    <div class="sub_r"></div>
                </div>
            </div>
            <div class="end"></div>
    </body>
    </html>
![混合布局](https://img-blog.youkuaiyun.com/20160225165322728)

常见网页基本布局

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>常用网站布局</title>
<meta  charset="utf-8"/>
<link rel="stylesheet" language='text/css' href='styles/layout.css'>
</head>

<body>
    <!-- 网页容器-->
    <div id="wrapper">
        <!---->
        <div id="header">
            头部
        </div>
        <!-- 主体部分-->
        <div id="main">
            <!--左侧-->
            <div id="left">
                左侧区域
            </div>
            <!--右侧区域-->
            <div id="right">
                右侧侧区域
            </div>
        </div>
        <!--尾部-->
        <div id="root">
            尾部区域
        </div>
    </div>
</body>
</html>

layout.css

@charset "utf-8";
/* CSS Document */
body{
    margin:0;
    padding:0;
    margin:0 auto;
    font-family:Arial, Helvetica, sans-serif,宋体;
    background-color:#6FF;
}
#wrapper{
    width:960px;
    margin:0px auto; /*将整个网页居中显示*/  
}
#header{
    width:100%;
    height:60px;
    background-color:#9F0;  
}
#main{
    margin-top:5px;
    width:100%;
    height:600px;
    }
#left{
    width:30%;
    height:600px;
    background:#C00;
    float:left;
    }
#right{
    width:68%;
    height:600px;
    background:#93C;
    float:right;}
#root{
    width:100%;
    height:50px;
    margin-top:5px;
    background:#CCC;}

常用网页布局