常规的页面布局

效果图
代码：
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .container {
            margin: 0 25%;
            padding: 10px 10px;
            border-style: solid;
            height: 500px;
        }

        .header {
            margin: 0 auto;
            height: 100px;
            border-style: dashed;
            text-align: center;
            background-color: #159c77;
        }

        .left {
            margin: 10px 0;
            border-style: dashed;
            height: 50%;
            width: 45%;
            float: left;
            background-color: #a5d9cb;
        }

        .right {
            margin: 10px 0;
            border-style: dashed;
            height: 50%;
            width: 45%;
            float: right;
            background-color: #4fb599;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="header">
        <h1>页面头部</h1>
    </div>
    <div class="left">
        <p>左边</p>
    </div>
    <div class="right">
        <p>右边</p>
    </div>
</div>
</body>
</html>