<tbody id="5vw1z"></tbody>
<rp id="5vw1z"></rp>
  •  

    第18題 CSS如何進行圣杯布局

    圣杯布局如圖:

    圣杯布局

    而且要做到左右寬度固定,中間寬度自適應。

    首先我們把公共的HTML和CSS代碼附上,以下方法中都可使用,不做重復工作。

    公共HTML代碼:

    <body>
        <div class="header">這里是頭部</div>
        <div class="container">
            <div class="left">左邊</div>
            <div class="middle">中間部分</div>
            <div class="right">右邊</div>
        </div>
        <div class="footer">這里是底部</div>
    </body>

    公共CSS代碼:

    *{
      margin: 0;
      padding: 0;
    }
    .header,.footer{
    	height:40px;
    	width:100%;
    	background:red;
    }

    1. 利用flex布局

    CSS代碼:

    .container{
    	display: flex;
    }
    .middle{
    	flex: 1;
    	background:yellow;
    }
    .left{
    	width:200px;
    	background:pink;
    }
    .right{
    	background: aqua;
    	width:300px;
    }

    2.絕對定位

    .container{
      min-height: 1.2em;
      position: relative;
    }
    
    .container>div {
      position: absolute;
    }
    
    .middle {
      left: 200px;
      right: 250px;
      background: yellow;
    }
    
    .left {
      left: 0;
      width: 200px;
      background: pink;
    }
    
    .right {
      right: 0;
      width: 250px;
      background: aqua;
    }

    3. grid布局

    HTML代碼:

    <div id="header">header</div>
    <div id="left">left</div>
    <div id="middle">middle</div>
    <div id="right">right</div>     
    <div id="footer">footer</div>

    CSS代碼:

    body{
    	display: grid;
    }
    #header{
    	background: red;
    	grid-row:1;
    	grid-column:1/5;
    }
    	
    #left{
    	grid-row:2;
    	grid-column:1/2;
    	background: orange;
    }
    #right{
    	grid-row:2;
    	grid-column:4/5;
    	background: cadetblue;
    }
    #middle{
    	grid-row:2;
    	grid-column:2/4;
    	background: rebeccapurple
    }
    #footer{
    	background: gold;
    	grid-row:3;
    	grid-column:1/5;
    }

    看看grid布局,其實也挺簡單的吧,里面的參數應該不言而喻了。另外我之前也寫過一篇關于grid布局文章:CSS Grid網格布局實例教程,感興趣的小伙伴可以看一下。

    另外說一點,到2019年為止,grid現在絕大多數瀏覽器已經可以兼容了,可以著手使用了。

    當然,還有table布局,年代比較久遠了,而且對SEO不友好,知道就可以,這里就不浪費篇幅了。

    「點點贊賞,手留余香」

    0

    給作者打賞,鼓勵TA抓緊創作!

    微信微信 支付寶支付寶

    還沒有人贊賞,快來當第一個贊賞的人吧!

    聲明:
    1. 本站所有文章教程及資源素材均來源于網絡與用戶分享或為本站原創,僅限用于學習和研究。
    2. 如果內容損害你的權益請聯系客服QQ:1642748312給予處理。
    碼云筆記 » 第18題 CSS如何進行圣杯布局

    發表回復

    IT互聯網行業相關廣告投放 更專業 更精準

    立即查看 聯系我們
    亚洲 自拍 另类小说综合图区