CSS单栏布局

  • 单栏布局1
CSS单栏布局_第1张图片
Paste_Image.png

  
  
main
.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;
}
  • 单栏布局2
CSS单栏布局_第2张图片
Paste_Image.png

  
main
.layout{
  width: 600px;
  margin: 0 auto;
  text-align: center;
  border: 5px solid;
}
#header{
  background: blue;
}
#main{
  background: yellow;
  height: 400px;
}
#footer{
  background: red;
}

你可能感兴趣的:(CSS单栏布局)