pc端常見布局(-)

1.固定寬度三列布局

見新浪微博首頁

 

　　html結構如下

<div class="wrapper">
/**最外層容器元素**/
    <div class="primary">
/**右側主要內容區域**/
        <div class="primary">
             /**主要內容區域的主要內容**/
        </div>
       <div class="second">
          /**主要內容區域中的次要內容**/
       </div>
    </div>
    <div class="second">
/**左側導航區**/
   </div>
</div>

　　css布局如下

/**為了讓容器元素水平居中，因ie6混雜模式下不識別margin：0 auto聲明，
 而text-align:center,ie會理解為讓所有的東西居中，而不只是文本，此hack無害**/
body{text-align:center;}
.wrapper{width:920px;
            margin:0 auto; /**固定寬度的塊級元素水平居中**/
            overflow:hidden; /**此技巧用來應對子元素浮動，這樣不會因為子元素浮動導致父元素沒有了高度**/    
             text-align:left; /**讓文本重新左對齊**/
}
.wrapper .primary{
    width: 670px;
    /**padding-right:20px;**/
    float:right;
    display:inline;  /**防止ie雙外邊距浮動產生的bug**/
    overflow:hidden;
}
.wrapper .second{
    width:230px;
    float:left;
    dispaly:inline; /**防止ie雙外邊距浮動產生的bug**/
}
.wrapper .primary .primary{
    width:400px;
    float:left;
    display:inline;
}
.wrapper .primary .second{
    width:230px;
    padding-right:20px;
    float:right;
    display:inline;
}
    

　固定寬度布局優缺點

有點：根據設計稿的固定寬度來布局，可以清楚知道每一個元素的寬度，知道所有東西在什么地方，這種布局最直接最簡單。

缺點：1.不能合理利用瀏覽器空間，遇到大的分辨率機器，頁面只會集中在中間，兩邊留下很多空白；遇到小分辨率的機器，會出現滾動條　

        2.布局只適用於瀏覽器的默認字號，如果設置字號變大，會導致短行，不易閱讀