CSS单栏布局

Paste_Image.png
<body>
  <div id="header">
    <div class="layout">
      header
    </div>
  </div>
  <div id="main" class="layout">
    main
  </div>
  <div id="footer">
    <div class="layout">
      footer
    </div>
  </div>
</body>

.layout{
  text-align: center;
  width: 600px;
  margin: 0 auto;
  border: 5px solid;
}
#header{
  width: 100%;
  background: blue;
}
#main{
  height: 400px;
  background: yellow;
}
#footer{
  width: 100%;
  background: red;
}
Paste_Image.png
<body>
  <div class="layout">
    <div id="header">
      header
    </div>
    <div id="main">
      main
    </div>
    <div id="footer">
      footer
    </div>
  </div>
</body>

.layout{
  width: 600px;
  margin: 0 auto;
  text-align: center;
  border: 5px solid;
}
#header{
  background: blue;
}
#main{
  background: yellow;
  height: 400px;
}
#footer{
  background: red;
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容