首頁  >  文章  >  web前端  >  CSS實作頁面各種列版面的範例

CSS實作頁面各種列版面的範例

伊谢尔伦
伊谢尔伦原創
2017-01-16 15:35:242228瀏覽

這篇文章主要介紹了CSS實現頁面一列佈局,兩列佈局與三列佈局的方法示例,包括寬度與高度的自適應的示例,需要的朋友可以參考下:

1.一列佈局(又叫單列佈局) 
一列佈局需要掌握3個知識點:標準文件流,其中又包含了區塊級元素和行級元素,還有margin屬性,可以說實現一列佈局的關鍵程式碼就是由margin屬性實現的,透過設定margin:0 auto;來實現水平居中,auto就是它會根據瀏覽器的寬度自動設定兩邊的外邊距。要設定margin,你首先得有一個盒子模型,例如這裡的div,然後設定它的長寬,有一個固定的大小,才可以實現居中。

<style type="text/css">
    body{margin:0;padding:0;}
    .head{heigth:200px;background:blue;}
    .main{height:500px;width:800p;margin:0 auto;}
    .footer{background:blue;height:200px;width:800px;margin:0 auto;}
</style>
<div class="head"> This is head !</div>
<div class="main"> This is main !</div>
<div class="footer"> This is footer !</div>

2.二列佈局(兩列自適應) 
浮動: 
塊級元素都是一行一行這樣排列的,需要把兩個塊級元素並排時,就需要用到CSS中的浮動佈局float,float有三個屬性值, 
left-左浮動,right-右浮動,none-不浮動,一旦設定了float屬性,元素就會對應的向左移,或向右移,直到碰到容器邊緣,
當元素沒有內容但是設定了浮動屬性時,元素的寬度會隨內容的變化而變化。
清除浮動的常用方法是:clear:both;(為需要清楚浮動的元素設定)如果你清楚的知道設定了那種浮動,也可以clear:right/left,一般都用both,保障浮動被清除;還有另一種清除浮動的方法,width:100%;overflow:hidden;

<style type="text/css">
    body{margin:0;padding:0;}
    .main{width:800px;margin:0 auto;}
    .left{width:20%;height:500px;background:blue;float:left;}
    .right{width:80%;background:red;height:500px;float:right;}
</style>
<div class="main">
    <div class="left"> This is left !</div>
    <div class="right"> This is right !</div>
</div>

添加了父級div後,right和left塊就被限制在父級塊中,父級塊寬度是固定的,則左右兩塊的寬度也隨之固定,但是如果父級塊的寬度改變,則左右兩塊也會隨之改變,且比例還是2:8,這個是固定不變的。

3.三列佈局 
position可設定4個屬性值,分別為:static(靜態定位),relative(相對定位),absolute(絕對定位),fixed(固定定位) 
三列佈局自適應,將上述兩列佈局中的比例更改為33.33%即可,那麼以此類推,四列佈局自適應也可以用一樣的方法,調整比例分配,從而實現自己想要的佈局方式。

<style type="text/css">
    body{margin:0;padding:0;}
    .main{width:800px;margin:0 auto;}
    .left{width:33.33%;height:500px;background:blue;float:left;}
    .middle{width:33.33%;height:500px;background:black;float:left;}
    .right{width:33.33%;background:red;height:500px;float:right;}
</style>
<div class="main">
    <div class="left"> This is left !</div>
    <div class="middle"> This is middle !</div>
    <div class="right"> This is right !</div>
</div>

另外一種情況是,左右兩塊的寬度都是固定的分別為200px,300px,而中間是自適應的。這種情況就不能透過float來實現了,此時我們需要對左右兩塊進行絕對定位,然後設定中間塊的margin,則可以實現要求。如果你想讓中間和左右兩塊不要緊密貼合,則可以在設定margin(上,右,下,左)時,把像素適當的提高。實作方式如下: 
注意left:0;top:0;right:0;top:0; 這些設定是必須的,不加就會出問題,親測

<style type="text/css">
    body{margin:0;padding:0;}
    .main{width:800px;margin:0 auto;}
    .left{width:200px;height:500px;background:blue;position:absolute;left:0;top:0;}
    .middle{height:500px;background:black;margin:0 300px 0 200px;}
    .right{width:300px;background:red;height:500px;position:absolute;right:0;top:0;}
</style>
<div class="main">
    <div class="left"> This is left !</div>
    <div class="middle"> This is middle !</div>
    <div class="right"> This is right !</div>
</div>

在網頁設計中,我們更多的是將上述佈局方式進行混合,例如在一列佈局的main區塊中插入二列或三列佈局,程式碼和上基本上一致

使用BFC的原理實作
BFC的規則之一,就是BFC區域,不會與float box重疊,因此我們可以利用這一點來實現3列佈局。

css程式碼如下

.left {   
  float: left;   
  margin-right: 10px;   
  width: 100px;   
  height: 100px;   
  background-color: orange;   
}   
.rightright {   
  float: rightright;   
  margin-left: 10px;   
  width: 100px;   
  height: 100px;   
  background-color: orange;   
}   
.main {   
  height: 100px;   
  background-color: green;   
  overflow: hidden;   
}

html程式碼如下

<div class="left"></div>  
<div class="right"></div>  
<div class="main"></div>

雙飛翼佈局
這種佈局方案最早由淘寶提出,主要為了主列能夠被最先載入。
實作原理:
(1)讓主列外面增加一個wrap,主列wrap,以及2子列都左浮動。
(2)設定主列wrap寬度為100%,將子列的margin-left設定為負值,讓子列能夠排列在左右兩側。
(3)這是主列的margin-left與margin-right比左右兩列的寬度大一點,則可以設定出來主列與子列之間的間隙。

css程式碼如下

.wrap {   
  width: 100%;   
}   
.wrap::after {   
  display: block;   
  content: &#39;&#39;;   
  font-size: 0;   
  height: 0;   
  clear: both;   
  zoom: 1;   
}   
.main-content {   
  float: left;   
  width: 100%;   
}   
.main {   
  height: 100px;   
  background-color: green;   
  margin-left: 110px;   
  margin-right: 110px;   
}   
.left {   
  float: left;   
  width: 100px;   
  height: 100px;   
  background-color: orange;   
  margin-left: -100%;   
}   
.rightright {   
  float: left;   
  width: 100px;   
  height: 100px;   
  background-color: orange;   
  margin-left: -100px;   
}

html程式碼如下

<div class="wrap">  
  <div class="main-content">  
    <div class="main"></div>  
  </div>  
  <div class="left"></div>  
  <div class="right"></div>  
</div>

聖杯佈局
聖杯佈局在結構上要簡單一點,也能夠讓主列優先載入。
實作原理:
(1)增加一個包裹框,設定padding-leftpadding-right值,比子列寬度大一個空隙的寬度。
(2)主列,子列都設定為float: left 左子列margin-left設定為-100%,並且設定為position:relative; left: -110px將左子列放置到左側。右子列同理。
(3)主列只需設定寬度為100%即可。包裹框的寬度不要設定為100%,自適應即可。

css程式碼如下

.wrapper {   
  padding-left: 110px;   
  padding-right: 110px;   
  overflow: hidden;   
}   
.main {   
  float: left;   
  width: 100%;   
  height: 100px;   
  background-color: #ccc;   
}   
.left {   
  float: left;   
  width: 100px;   
  height: 100px;   
  margin-left: -100%;   
  position: relative;   
  left: -110px;   
  _left: 0;   
  background-color: orange;   
}   
.rightright {   
  float: left;   
  width: 100px;   
  height: 100px;   
  background-color: orange;   
  margin-left: -100px;   
  position: relative;   
  rightright: -110px;   
}

 html程式碼如下

<div class="wrapper">  
  <div class="main"></div>  
  <div class="left"></div>  
  <div class="right"></div>  
</div>


陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn