成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

有關(guān)于css的四種布局

khs1994 / 1883人閱讀

摘要:四種布局左右兩側(cè),左側(cè)固定寬度,右側(cè)自適應(yīng)占滿。上中下三行,頭部高,底部高,中間自適應(yīng)占滿。上下兩部分,底下這個固定高度,如果上面的內(nèi)容少,那么這個就固定在底部,如果內(nèi)容多,就把擠著往下走。代碼如下布局若有錯誤請及時通知

四種布局

(1)、左右兩側(cè),左側(cè)固定寬度200px,

右側(cè)自適應(yīng)占滿。

(2)、左中右三列,左右個200px固定,中間自適應(yīng)占滿。

(3)、上中下三行,頭部200px高,底部200px高,中間自適應(yīng)占滿。

(4)、上下兩部分,底下這個固定高度200px,如果上面的內(nèi)容少,那么這個footer就固定在底部,如果內(nèi)容多,就把footer擠著往下走。

一、第一種

圖片如下:(左右兩側(cè),左側(cè)固定寬度200px,右側(cè)自適應(yīng)占滿)

代碼如下:



    
        
        布局1
        
    
    
    
.first,.second{height:100px;}
.first{
    width:200px;
    background-color:yellow;
    float:left;
    
}
.second{
    
    background-color:red;
    position:absolute;
    right:0px;
    left:200px;
    width:100%;
}x
二、第二種

圖片如下:(上中下三行,頭部200px高,底部200px高,中間自適應(yīng)占滿)

代碼如下:



    
        
        布局2
        
    
    
    
.left,.center,.right{height:400px;}
.left{
    width:200px;
    background-color:yellow;
    float:left;
    
}
.center{
    
    background-color:red;
    position:absolute;
    right:200px;
    left:200px;
    
}
.right{
    width:200px;
    float:right;
    background-color:green;
    
}
三、第三種

圖片如下:上中下三行,頭部200px高,底部200px高,中間自適應(yīng)占滿

代碼如下:



    
        
        布局3
        
    
    

        
        
body{margin:0px;}

.top{
    width:100%;
    height:200px;
    position:absolute;
    background:red;
}    
.center{
    width:100%;
    
    position:absolute;
    background:blue;
    top:200px;
    bottom:200px;
}    
.bottom{
    width:100%;
    height:200px;
    position:absolute;
    bottom:0px;
    
    background:black;
}    
四、第四種

圖片如下:上下兩部分,底下這個固定高度200px,如果上面的內(nèi)容少,那么這個bottom就固定在底部,如果內(nèi)容多,就把bottom擠著往下走。

代碼如下:



    
        
        布局4
        
    
    
    
    
aijefoaiejfoaiejfaio
........
html{
    height:100%;
}
body{
    margin:0px;
    min-height:100%;
    position:relative;
    
    background:red;
}

.top{
    padding-bottom:300px;
    
}

.bottom{
    position:absolute;
    width:100%;
    height:200px;
    background:black;
    bottom:0px;
    left:0px;
}

若有錯誤請及時通知

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/52646.html

相關(guān)文章

  • 關(guān)于css四種布局

    摘要:四種布局左右兩側(cè),左側(cè)固定寬度,右側(cè)自適應(yīng)占滿。上中下三行,頭部高,底部高,中間自適應(yīng)占滿。上下兩部分,底下這個固定高度,如果上面的內(nèi)容少,那么這個就固定在底部,如果內(nèi)容多,就把擠著往下走。代碼如下布局若有錯誤請及時通知 四種布局 (1)、左右兩側(cè),左側(cè)固定寬度200px, 右側(cè)自適應(yīng)占滿。 (2)、左中右三列,左右個200px固定,中間自適應(yīng)占滿。 (3)、上中下三行,頭部200p...

    Steve_Wang_ 評論0 收藏0
  • CSS三欄布局四種方法

    摘要:浮動代碼如下注意元素次序代碼如下左欄左浮動中間自適應(yīng)右欄右浮動這種方式代碼足夠簡潔與高效,也容易理解后記四種方法其實只有圣杯布局和雙飛翼布局較難理解,但實際上理解了圣杯布局,雙飛翼布局自然就理解了。 前言 總括: 不管是三欄布局還是兩欄布局都是我們在平時項目里經(jīng)常使用的,也許你不知道什么事三欄布局什么是兩欄布局但實際已經(jīng)在用,或許你知道三欄布局的一種或兩種方法,但實際操作中也只會依賴那...

    RobinQu 評論0 收藏0
  • vue移動端h5頁面根據(jù)屏幕適配四種方案

    摘要:在移動端頁面當(dāng)中,其中適配是經(jīng)常會遇到的問題,這塊主要有死個方法可以適用。目前全網(wǎng)找或者是嘗試來看,確實沒有一個十全十美的適配的解決方案,只能不斷在實踐應(yīng)用當(dāng)中慢慢填坑最近做了兩個關(guān)于h5頁面對接公眾號的項目,不得不提打開微信瀏覽器內(nèi)置地圖導(dǎo)航的功能確實有點惡心。下次想起來了的話,進行總結(jié)分享一下如何處理。在vue移動端h5頁面當(dāng)中,其中適配是經(jīng)常會遇到的問題,這塊主要有死個方法可以適用。 ...

    番茄西紅柿 評論0 收藏0
  • css清除浮動常用四種方法實現(xiàn)

    摘要:用這種方法清除浮動,會為文檔中增加不必要的結(jié)構(gòu),不推薦。可以包含浮動元素,所以能實現(xiàn)撐起高度的效果。以上是常用的幾種方法,可以根據(jù)場景的不同選擇適合的。 在頁面布局中經(jīng)常會用到浮動和清除浮動的操作,但之前是知其然而不知其所以然,看過多篇文章后,有了一些深入的了解,特整理下來! 浮動的目的: 最初設(shè)計浮動的目的是為了實現(xiàn)文字等內(nèi)容可圍繞圖像顯示,后來發(fā)現(xiàn)浮動方便布局,所以支持浮動任何元素...

    iliyaku 評論0 收藏0
  • 茴字四種寫法—移動適配方案的進化

    摘要:是阿里團隊開發(fā)的前端適配方案,也是用的的方法。那么第一種方法其實已經(jīng)能解決前端適配問題了,為什么阿里還要開發(fā)一個呢在第一種方法中,時沒有任何問題,但是在或者更高的手機屏幕上,因為物理像素的增加,存在小于的顯示空間。 話說我剛工作的時候,就開始用rem了,過了沒多久,接觸到了flexible,系統(tǒng)化且支持iOS的retina屏迅速征服了我,最近又看到了大漠大神的vw。所以本文想完成一篇一...

    canger 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<