DIV布局

1.一般页面可简单分为上中下结构，上为头部，中为内容部分，下为脚部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DIV基本布局</title>
</head>
<body>
    <div class="header"></div>
    <div class="content"></div>
    <div class="footer"></div>
</body>
</html>

2.示例：按图写DIV布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DivLayout</title>
    <style type="text/css">
        .header{
            height: 100px;
            background-color: red;
        }
        .nav{
            height: 50px;
            background-color: green;
        }
        .article{
            height: 400px;
            display: inline-block;
            width: 34%;
            background-color: blue;
        }
        .aside{
            height: 400px;
            display: inline-block;
            width: 65%;
            background-color: crimson;
        }
        .footer{
            height: 100px;
            background-color: deeppink;
        }
    </style>
</head>
<body>
    <div class="header">&lt;header&gt;</div>
    <div class="nav">&lt;nav&gt;</div>
    <div class="content">
        <div class="article">&lt;article&gt;</div>
        <div class="aside">&lt;aside&gt;</div>
    </div>
    <div class="footer">&lt;footer&gt;</div>
</body>
</html>
DivLayout

 

posted @ 2019-07-08 16:17  C_XingM  阅读(129)  评论(0)    收藏  举报