常规的页面布局 | 易学教程

常规的页面布局

效果图

代码：

<!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>

来源：http://www.cnblogs.com/phermis/p/6761870.html

标签

页面布局

margin

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!