1. 程式人生 > >常見的幾種頁面內容佈局方式

常見的幾種頁面內容佈局方式

在前端開發中頁面佈局總是最開始的工作,就像蓋樓時,先搭框架,然後再填磚,前端也是一樣的,先做好頁面的佈局工作。
通過瀏覽不同的網站發現,頁面的佈局都是大同小異,總結下來大概就幾種:
第一種:
單列布局,這是最簡潔的一種。整個頁面感覺很乾淨。目前主流的電商網站基本上都是使用這種佈局。
這裡寫圖片描述
程式碼:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>頁面佈局</title>
        <style
>
.box{ width:800px; height: 600px; text-align: center; line-height: 60px; } .container{ width: 805px; margin:0 auto; } .header{ width
:100%
; height:60px; background: orange; }
.content{ position: relative; width:700px; margin:0 auto; } .content_body{ position: relative; width:100%; height
:480px
; background: olive; }
.content_footer{ position: relative; height:60px; background: orangered; width:100% }
</style> </head> <body> <div class="container"> <div class="box"> <div class="header">header</div> <div class="content"> <div class="content_body">body</div> <div class="content_footer">footer</div> </div> </div> </div> </body> </html>

第二種:
兩列布局:
這裡寫圖片描述
這中佈局在一般的技術分享站點比較常見
這裡寫圖片描述
上面是csdn部落格的首頁,佈局就是兩列布局,只是有一點變化而已,但是萬變不離其中,都是從兩列布局演變而來的。
程式碼:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>頁面佈局</title>
        <style>
            .box{
                width:800px;
                height: 600px;
                text-align: center;
                line-height: 60px;
            }
            .container{
                width: 805px;
                margin:0 auto;
            }
            .header{
                width:100%;
                height:60px;
                background: orange;
            }
            .content{
                position: relative;
                width:700px;
                margin:0 auto;
            }
            .content_body{
                position: relative;
                width:100%;
                height:480px;
                background: olive;          
            }
            .content_footer{
                position: relative;
                height:60px;
                background: orangered;
                width:100%
            }
            .left{
                height:100%;
                width:100px;
                float: left;
                background: orchid;
            }
            .right{
                height:100%;
                width:100px;
                float: right;               
                background:yellowgreen;
            }
        </style>
    </head>
    <body>
         <div class="container">
             <div class="box">
                <div class="header">header</div>
                <div class="content">
                    <div class="content_body">
                         <div class="left"></div>
                         <div class="right"></div>
                    </div>
                    <div class="content_footer">footer</div>
                </div>
             </div>
         </div>
    </body>
</html>

第三種:
有兩列布局就有三列布局:
這裡寫圖片描述
單列,兩列,三列都有,那有沒有四列…,我們說這只是常見的佈局,並不是所有的佈局,如果你需要,可以有無數列,只是這些佈局是小眾而已。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>頁面佈局</title>
        <style>
            .box{
                width:800px;
                height: 600px;
                text-align: center;
                line-height: 60px;
            }
            .container{
                width: 805px;
                margin:0 auto;
            }
            .header{
                width:100%;
                height:60px;
                background: orange;
            }
            .content{
                position: relative;
                width:700px;
                margin:0 auto;
            }
            .content_body{
                position: relative;
                width:100%;
                height:480px;
                background: olive;          
            }
            .content_footer{
                position: relative;
                height:60px;
                background: orangered;
                width:100%
            }
            .left{
                height:100%;
                width:100px;
                float: left;
                background: orchid;
            }
            .center{
                float: left;
                width: 500px;
                height: 100%;
                background: blanchedalmond;
            }
            .right{
                height:100%;
                width:100px;
                float: right;               
                background:yellowgreen;
            }
        </style>
    </head>
    <body>
         <div class="container">            
             <div class="box">
                <div class="header">header</div>
                <div class="content">
                    <div class="content_body">
                         <div class="left"></div>
                         <div class="center"></div>
                         <div class="right"></div>
                    </div>
                    <div class="content_footer">footer</div>
                </div>
             </div>
         </div>
    </body>
</html>

上面的中三種常見的佈局都是內容居中的列式佈局。這種方式一般內容區的大小是固定的,所以當瀏覽器視窗大小改變的時候,頁面的佈局不會改變,只是距離兩邊的距離會改變。這也是這種佈局比較受歡迎的原因之一。
但是我們在一些管理類網站的時候,他也是列式佈局,但是內容不是居中的,而是鋪滿螢幕:
這裡寫圖片描述
這種佈局內容區的寬度是不定的,這個時候就需要做自適應了。一般這種佈局左邊的選單列寬度是固定的,但是右邊的內容區域的寬度是不固定的。
實現方式一:

.left{
   float:left;
}
.right{
   width:100%;
}

這種方式比較簡單,但是是有缺陷的,這種佈局右邊其實是填充滿整個一行的,left只是浮動在他上面,造成了左右佈局的現象,我們還需要給右邊加上左邊距,如果左邊的選單欄收縮時,還要動態的去改變右側內容的左邊距。這樣是比較麻煩的。
實現方式二:
採用flex:

.content{
  display:flex;
}
.left:{
  width:100px;
}
.right:{
  flex:1
}

這種方式最簡單,完全符合我們的需求,但是他用的是彈性佈局,相容性你懂得。
實現方式三
css樣式計算calc();


.left:{
  float:left;
  width:100px;
}
.right:{
  float:right;
  width:100%-100px;
}

calc這個屬性也是css3提供的。所以相容性…….
實現方式四:
寬度採用百分比的方式:

.left{
  width:10%
}
.right{
  height:85%;
}

這種方式的優勢是相容性好,但是,當頁面寬度變化時,頁面內容會被壓縮變形。

實現方式五:
就是通過計算,瀏覽器寬度減去左邊選單寬度,當瀏覽器寬度改變的時候,再計算,這種方式比較耗瀏覽器效能,如果一定要相容到低版本IE,一般不考慮這種方式。

如果有更好的佈局方式,歡迎大家來交流交流