常用網頁佈局

一、多列布局

(1) 寬度自適應佈局

兩欄佈局

  • 左側固定右側自適應
  • 右側固定左側自適應

技術原理(左側固定右側自適應)

  • 結構上左右兩個盒子,左側設置爲固定寬度,右側設置爲100%
  • 給左側盒子設置絕對定位
  • 給右側盒子設置一個子盒,並且給盒子設置左外邊距,留出左盒空間

代碼

<div class="wrap">
    <div class="left">left盒子</div>

    <div class="right">
        <div class="son">right盒子</div>
    </div>
</div>

.left {
    position: absolute;
    width: 300px;
    min-height: 200px;
    background-color: aqua;
}

.right {
    width: 100%;
    min-height: 200px;
    background-color: pink;
}

.son {
    padding-left: 300px;
}

三欄佈局

  • 左右盒子固定寬度,中間盒子自適應
(1)聖盃佈局

技術原理

  • 結構上需要三個盒子,左側盒子、右側盒子、中間盒子。中間盒子放在前面,兩邊盒子後面,這樣做的目的是因爲中間的內容一般比較重要,放在前面可以優先加載,利於用戶體驗。
  • 左右盒子設置固定寬度,中間盒子設置100%。
  • 給子盒子設置浮動
  • 利用margin-left將左右盒子拉到中間盒子兩側。
    左邊margin-left:-100%;右邊margin-left:-自身的寬度;
  • 將中間盒子露出來,給三個盒子的父元素設置
    padding-left:左側盒子的寬度;padding-right:右側盒子的距離;
  • 利用相對定位將左右盒子歸位
    左側設置left:-自身的寬度;左側設置right:-自身的寬度;

代碼實現

<div class="wrap">
    <div class="center">中間盒子</div>
    <div class="left">left盒子</div>
    <div class="right">right盒子</div>
</div>
.wrap div {
    float: left;
    min-height: 200px;
}

.wrap {
    padding: 0 300px 0 200px;
}

.left {
    position: relative;
    left: -200px;
    width: 200px;
    background: aqua;
    margin-left: -100%;
}

.right {
    position: relative;
    right: -300px;
    width: 300px;
    background: pink;
    margin-left: -300px;
}

.center {
    width: 100%;
    background: yellow;
}

(2)雙飛翼佈局

雙飛翼佈局是玉伯大大提出來的,始於淘寶UED
與聖盃佈局相似,雙飛翼佈局也可以實現左右寬度跨度固定,中間自適應。
雙飛翼佈局在解決中間盒子位置是給中間盒子添加一個父盒子並且設置margin屬性來露出和兩側盒子重疊的區域,其他實現方法與聖盃佈局相同。

代碼

<div class="wrap">
    <div class="center">
        <div class="son">中間內容</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>
.wrap>div {
    float: left;
    min-height: 300px;
}

.left {
    width: 300px;
    background-color: tomato;
    margin-left: -100%;
}

.right {
    width: 400px;
    background-color: pink;
    margin-left: -400px;
}

.center {
    width: 100%;
    background-color: skyblue;
}

.son {
    margin: 0 400px 0 300px;
}

(2) 等高佈局

等高佈局是指子元素在父元素中高度相等的佈局方式。


方法一 內外間距相抵消

該方法使用margin-bottom和padding-bottom一個設置較大正值,另一個設置相同負值,相互抵消實現視覺等高。使用該方法必須給父元素設置overflow:hidden;
代碼

<div class="wrap">
    <div class="left">left盒子</div>
    <div class="center">center盒子</div>
    <div class="right">right盒子</div>
</div>
.wrap {
    width: 1000px;
    margin: 0 auto;
    overflow: hidden;
}

.wrap div {
    float: left;
    min-height: 200px;
}

.left {
    width: 200px;
    background-color: tomato;
    padding-bottom: 9999px;
    margin-bottom: -9999px;
}

.center {
    width: 500px;
    background-color: yellow;
    padding-bottom: 9999px;
    margin-bottom: -9999px;
}

.right {
    width: 300px;
    background-color: violet;
    padding-bottom: 9999px;
    margin-bottom: -9999px;
}

方法二 利用內容撐開父元素的特點實現等高

代碼

<div class="wrap">
    <!-- col1、col2、col3他們負責背景 -->
    <div class="col1">
        <div class="col2">
            <div class="col3">
                <div class="left">left盒子</div>
                <div class="center">center盒子</div>
                <div class="right">right盒子</div>
            </div>
        </div>
    </div>
</div>
.wrap {
    width: 1000px;
    margin: 0 auto;
    overflow: hidden;
}

.col1 {
    /* 負責第一列的背景顏色 */
    background-color: tomato;
}

.col2 {
    /* 負責第二列的背景顏色 */
    background-color: pink;
    /* 露出第一列的背景顏色 */
    position: relative;
    left: 200px;
}

.col3 {
    /* 負責第三列的背景顏色 */
    background-color: yellow;
    /* 露出第二列的背景顏色 */
    position: relative;
    left: 500px;
}

.left {
    float: left;
    width: 200px;
    min-height: 200px;
    margin-left: -700px;
}

.center {
    float: left;
    width: 500px;
    min-height: 200px;
    margin-left: -500px;
}

.right {
    float: left;
    width: 300px;
    min-height: 200px;
}

二、彈性盒子佈局

彈性盒子是css3的一種新的佈局模式,使用彈性盒子可以更快的完成一些我們想要的佈局

.box {
    display:flex;//塊級元素
    display:inline-flex;//行內元素
}

注意:設置Flex佈局以後,子元素的float、clear和vertical-align屬性將失效

  • 特點
  1. 子元素默認橫向佈局,此時默認橫軸爲主軸,縱軸叫做交叉軸。
  2. 子元素默認繼承父元素高度。
  3. 子元素寬度默認由內容撐開。
  4. 子元素的寬度總和大於父元素的寬度,子元素自動收縮。

彈性盒子屬性

flex-direction:(設置主軸的方向)

  • row(默認值):主軸爲水平方向,起點在左端。
  • row-reverse:主軸爲水平方向,起點在右端。
  • column:主軸爲垂直方向,起點在上沿。
  • column-reverse:主軸爲垂直軸,起點在下沿。

justify-content:(設置主軸對齊方式)

具體對齊方式與主軸方向有關有關,下面假設主軸從左到右

  • flex-start(默認值):左對齊。
  • flex-end:右對齊。
  • center:居中對齊。
  • space-between(常用):兩端對齊,項目之間的間距都相等。
  • space-around:每個項目兩側的間距都相等。所以,項目之間的間隔比項目與邊框的距離大一倍。

align-items:(設置項目在交叉軸上的對齊方式)

具體對齊方式與交叉方向有關有關,下面假設交叉軸從上到下

  • flex-start:交叉軸的起點對齊。
  • flex-end:交叉軸的終點對齊。
  • center :交叉軸終點對齊。
  • baseline:項目的第一行文字的基線對齊。
  • stretch(默認值):如果項目未設置高度或者寬度設爲atuo,將佔滿整個容器。

flex-wrap: (設置子元素是否換行)

  • nowrap(默認值) 不換行
  • wrap 換行
  • wrap-reverse 向上換行

項目的屬性

order
order屬性用整數值來定義排列順序。數值越小,排列越靠前,默認爲0,可以爲負值。

align-self:
定義彈性容器內被選中項目的對齊方式,和彈性容器的align-items屬性作用相同
取值參考彈性盒子align-item值。

flex-shrink(定義項目縮小比例)
默認值爲1,如果空間不足,將縮小。
設置爲0即爲不縮小

flex-grow(定義項目的放大比例)
默認是0,即如果存在剩餘空間,也不放大
設置爲1即爲沾滿全屏

flex:
flex 屬性是 flex-grow、flex-shrink 和 flex-basis 屬性的簡寫屬性。

詳情參考這裏

三、響應式佈局

響應式佈局就是一套代碼可以同時在多了設備上運行,而不需要爲每一個終端寫一套代碼,可以根據用戶的屏幕尺寸大小進行相應的調整。從而滿足不用設備用戶的體驗需求。

實現手段

  1. meta標籤設置

<meta name="viewport" content="width=device-width, initial-scale=1.0">

content參數解釋

width:可視區域的寬度,值可爲數字或關鍵詞device-width
height:同width
intial-scale:頁面首次被顯示是可視區域的縮放級別,取值1.0則頁面按實際尺寸顯示,無任何縮放
maximum-scale=1.0, minimum-scale=1.0;可視區域的縮放級別,
maximum-scale用戶可將頁面放大的程序,1.0將禁止用戶放大到實際尺寸之上。
user-scalable:是否可對頁面進行縮放,no 禁止縮放

簡單來說就是自動適應手機屏幕大小

  1. 流式佈局
  • 寬度用百分比
  • img標籤設置max-width控制圖片最大寬度,防止圖片失真
  • 設備查詢,CSS加入以下代碼
@media screen and (min-width: 屏幕寬度最小值){你所要兼容的模塊}

以下列舉常用的尺寸

/*最大1200px顯屏*/
@media screen and (max-width : 1200px) {}

/*最大800px顯屏*/
@media screen and (max-width : 800px) {}

/* 平板電腦和小屏電腦之間的分辨率 */
@media (min-width: 768px) and (max-width: 979px) {}

/*最大640px顯屏*/
@media screen and (max-width : 640px) {}

/* 橫向放置的手機及分辨率更小的設備 */
@media (max-width: 480px) {
}
/*iPad橫板顯屏*/
@media screen and (max-device-width: 1024px) and (orientation: landscape) {  }

/*iPad豎板顯屏*/
@media screen and (max-device-width: 768px) and (orientation: portrait) {  }

/*iPhone 和 Smartphones*/
@media screen and (min-device-width: 320px) and (min-device-width: 480px) {  }

響應式佈局優缺點總結
優點:

1.在不同設備下能有不同的頁面排版,這也是響應式最大的優點,在分辨率不同,設備環境進行一些不同的設計,所有開發維護和運營上,相對多個版本成本會降低很多。
2.兼容性好,能在不同的設備下瀏覽。
3.方便後期維護頁面,只需要對必要的頁面進行修改,不會影響其他頁面。

缺點:

1.頁面加載過多的代碼,當你在pc端加載的時候,css樣式也會將手機端的冗餘代碼一塊加載,這樣就直接影響了加載速度。
2.在響應式設計中,圖片和視頻都是統一加載的,當你在設備低的手機上加載不符合當前需要的圖片或者視頻,就會過多的消耗用戶的流量。
3.侷限性,對於響應式,侷限性較大,不適合一些大型的門戶網或者電商網站,一般門戶網或電商網站一個界面內容較多,而響應式最忌諱較多內容,代碼過多會影響運行速度。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章