Learn 13 简单的div布局 - 343代码学院 - 专注于小语种培训的专业软件工程师培训机构

一个简单的利用div+css的简单的上中下结构的网页布局

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>上中下板式布局</title>
    <style type="text/css">
        *{
            margin: 0 auto;
        }
        body{
            padding: 0px;
            background: green;
            text-align: center;
        }
        div{
            border: 1px solid yellow;
        }
        #main{
            width: 90%;
            min-width: 900px;
            max-width: 1200px;
        }
        #header{
            height: 100px;
            width:  900px;
            background-color: red;
        }
        #content{
            width: 900px;
            height: 300px;
        }
        #footer{
            width: 900px;
            height: 100px;
            background-color: gray;
        }
        #leftcontent{
            width: 300px;
            height: 300px;
            border: 1px solid red;
            float: left;
            background-color: blue;
        }
        #rightcontent{
            width: auto;
            height: 300px;
            float: center;
            border: 1px solid yellow;
            background-color:  orange;
        }
    </style>
<body>
    <div id="main">
      <p><b>全局层</b></p>
    <div id="header">
          <p><b>标题层</b></p>
    </div>
    <div id="content">
    <div id="leftcontent">左侧栏</div>
    <div id="rightcontent">右侧栏</div>
    </div>
    <div id="footer">
      <p><b>注脚层</b></p>
    </div>
    </div>
</body>
</head>

0 赞