Eddy's blog

常规布局结构

shiney's photo
shiney
·

2 min read

1.一列固定宽度且居中

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .top,
        .banner,
        .main,
        .footer {
            width: 980px;
            background-color: pink;
            border: 1px solid #888;
            text-align: center;
            margin: 0 auto;
        }

        .top {
            height: 80px;
        }

        .banner {
            height: 60px;
            margin: 5px auto;
        }

        .main {
            height: 400px;
        }

        .footer {
            height: 100px;
            margin: 5px auto 0;
        }
    </style>
</head>

<body>
    <div class="top">top</div>
    <div class="banner">banner</div>
    <div class="main">main</div>
    <div class="footer">footer</div>
</body>

</html>

2.两列左窄右宽型

左右型布局时要注意两盒子之间的浮动，盒子的宽度设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .top {
        width: 900px;
        height: 100px;
        background-color: pink;
        margin: 0 auto;
    }
    .banner {
        width: 900px;
        height: 150px;
        background-color: purple;
        margin: 0 auto;
    }
    .main {
        width: 900px;
        height: 500px;
        background-color: blue;
        margin: 0 auto;
    }
    .left {
        width: 288px;
        height: 500px;
        background-color: yellow;
        float: left;
        border: 1px solid #333;
    }
    .right {
        width: 600px;
        height: 500px;
        background-color: skyblue;
        float: right;
    }
    .footer {
        width: 900px;
        height: 120px;
        background-color: red;
        margin: 0 auto;
    }

    </style>
</head>
<body>
    <div class="top">top</div>
    <div class="banner">banner</div>
    <div class="main">
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <div class="footer">footer</div>
</body>
</html>

3.通栏平均分布型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    .top {
        width: 900px;
        height: 80px;
        background-color: pink;
        border: 1px solid #333;
        margin: 0 auto;
    }
    .banner {
        width: 900px;
        height: 150px;
        /* background-color: pink; */
        margin: 0 auto;
    }
    .banner li {
        float: left;
        width: 217px;
        height: 150px;
        margin-right: 10px;
    }
    .one {
        background-color: yellow;
    }
    .two {
        background-color: green;
    }
    .three {
        background-color: blue;
    }
    .banner .four {
        background-color: purple;
        margin-right: 0;
        float: right;
    }
    .main {
        width: 900px;
        height: 400px;
        background-color: pink;
        border: 1px solid #333;
        margin: 0 auto;
    }
    .footer {
        width: 900px;
        height: 100px;
        background-color: pink;
        border: 1px solid #333;
        margin: 0 auto;
    }
    </style>
</head>
<body>
    <div class="top">top</div>
    <div class="banner">
        <ul>
            <li class="one">1</li>
            <li class="two">2</li>
            <li class="three">3</li>
            <li class="four">4</li>
        </ul>
    </div>
    <div class="main">main</div>
    <div class="footer">footer</div>
</body>
</html>