作者：結一
原文地址：http://www.w3cplus.com/css/structure-design.html

最近在做整站方面的優(yōu)化抛丽，所以借此機會把一些經驗思想記錄匯總成文柜裸，總覽如下圖：

HTML整站設計

整體結構

整體分為header漾肮，section-main和footer三大核心，而section-feature和section-postscript則根據需要增刪徙鱼。最外層為全屏背景的承載懂讯，中間的inner-center為居中內容

header.header>.inner-center
section.section-feature>.inner-center // if
section.section-main>.inner-center
section.section-postscript>.inner-center // if
footer.footer>.inner-center

如主體內容為多個全屏交替刻获，則使用多個section-name布局坪创，如首頁：

header.header>.inner-center
section.section-feature>.inner-center
section.section-name-1>.inner-center
section.section-name-2>.inner-center
...
section.section-name-n>.inner-center
footer.footer>.inner-center

inner-center的居中css代碼為：

.inner-center{
    margin-left: auto;
    margin-right: auto;
    width: 1200px;
}

section-main

由于主體內容一般都在這個區(qū)域，所以下面詳細介紹下該區(qū)域的布局

無邊欄設計

section.section-main>.inner-center

左邊欄設計

section.section-main>.inner-center
    aside.aside-left
    main.main>.content

右邊欄設計

section.section-main>.inner-center
    main.main>.content
    aside.aside-right

雙邊欄設計

section.section-main>.inner-center
    aside.aside-left
    main.main>.content
    aside.aside-right

可以看到當有邊欄的時候侍瑟，main里面嵌套了一層content唐片，這層我們是用來使用負magin布局設計的，以方便使用響應式（轉下面響應式設計）涨颜。

除此之外费韭，為了全站方便控制各種布局，我們需要在body上增加一個class（主要是控制main）庭瑰，如：

// l表示layout
body.l-aside-left // 左邊欄布局
body.l-aside-right // 右邊欄布局
body.l-media // 響應式布局
body.l-min // 最小寬度布局

響應式設計

以右邊欄響應式為例星持，兼容pc和pad，結構如下：

body.l-media.l-aside-right
  header.header>.inner-center
  section.section-main>.inner-center
      main.main>.content
      aside.aside-right
  footer.footer>.inner-center

基礎css如下：

.aside-right,
.main{
    float: left;
}
.main{
    width: 100%;
}
 .aside-right{
    width: 300px;
    margin-left: -300px;
}
.l-aside-right .content{
    margin-right: 320px;
}

百分比設計

這種類型適合博客或各種文字流網站见擦。這里我們實現最小寬度為980px钉汗，最大寬度為1200px羹令，默認的右邊欄寬度為300px鲤屡，如果視窗小于或等于1024px的時候右邊欄寬度為240px，css如下：

.inner-center{
    min-width: 980px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (max-width: 1024px){
   .aside-right{
      width: 240px;
      margin-left: -240px;
  }
  .l-aside-right .content{
      margin-right: 260px;
  }    
}

固定寬度設計

適合圖片福侈，視頻等內容比較豐富的站點酒来。同樣我們要得到兩個寬度，一個為980px肪凛，一個為1200px堰汉。css如下：

.inner-center{
       width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (max-width: 1999px){
   .inner-center{
           width: 980px;
   }
   .aside-right{
      width: 240px;
      margin-left: -240px;
  }
  .l-aside-right .content{
      margin-right: 260px;
  }    
}

固定寬度設計

對于整站來說辽社，并不是所有的頁面都需要響應式設計思想，有些頁面如果本身內容就比較少翘鸭，這樣做成一個比較小的固定的寬度980px滴铅，pad上也可以瀏覽

.l-min .inner-center{
    width: 980px;
    margin-left: auto;
    margin-right: auto;
}