CSS单栏布局

• 单栏布局1

Paste_Image.png

  

    

      header
    
  
  

    main
  
  

    

      footer
    
  

.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

Paste_Image.png

  

    

      header
    
    

      main
    
    

      footer
    
  

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