CSS经典布局之双飞翼布局

最新推荐文章于 2020-07-14 11:10:36 发布

Forelv

最新推荐文章于 2020-07-14 11:10:36 发布

阅读量189

点赞数

本文链接：https://blog.csdn.net/Forelv/article/details/53302150

版权

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

<head>
    <meta charset="UTF-8">
    <title>div+css布局</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    div {}

    .header {
        background-color: orange;
        height: 150px;
    }

    .article {
        background-color: green;
        height: 300px;
    }

    .footer {
        background-color: yellow;
        height: 100px;
    }

    .article {
        padding-left: 150px;
        padding-right: 100px;
    }

    .article .left {
        background-color: blue;
        width: 150px;
        float: left;
        color: white;
        height: 16px;
        margin-left: -100%;
        position: relative;
        left: -150px;
    }

    .article .right {
        background-color: aqua;
        float: left;
        width: 100px;
        height: 16px;
        margin-left: -100px;
        position: relative;
        right: -100px;
    }

    .article .middle {
        background-color: red;
        float: left;
        width: 100%;
    }
    </style>
</head>

<body>
    <div class="header"> 我是头</div>
    <div class="article">
        <div class="middle">我是中间</div>
        <div class="left">我是左</div>
        <div class="right">我是右</div>
    </div>
    <div class="footer">我是底部</div>
</body>

</html>