CSS頁面布局

leoperfect 發布于2019-08-29 12:20 / 2073人閱讀

摘要：實現三欄布局，中間自適應負值法放第一行首尾高度固定中間自適應的布局兼容頭部中間置頂中間中間到底尾部針對設定的布局粘連置于底部方法一在上用負的粘連置于底部方法二在上用負的

實現三欄布局，中間自適應（margin負值法）


middle
left
right

body {
    margin: 0;
    padding: 0;
}

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

.right {
    margin-left: -200px;
    background-color: red;
}

.left {
    margin-left: -100%;
    background-color: #00ff00;
}

.middle {
    height: 300px;
    width: 100%;
    float: left;
    background-color: blue;
}

首尾高度固定、中間自適應的DIV布局（兼容IE6）

html, body {
    margin: 0;
    /*padding: 0;*/
    height: 100%;
    overflow: hidden;
}

.top, .bottom {
    width: 100%;
    height: 50px;
    position: absolute;
}

/** {
    margin: 0;
    padding: 0;
}

html, body, .container {
    height: 100%;
    width: 100%;
}

div {
    position: absolute;
}

.top, .bottom {
    width: 100%;
    height: 100px;
    z-index: 5;
}*/

.top {
    background: red;
    top: 0;
}

.bottom {
    background: #00ff00;
    bottom: 0;
}

.middle {
    width: 100%;
    top: 50px;
    bottom: 50px;
    background: #a7fad7;
    overflow: auto;
    position: absolute;
    /*針對ie6設定的hack*/
    _height: 100%;
    _border-top: -100px solid #eee;
    _border-bottom: -100px solid #eee;
    _top: 0;
}

flex-box布局


    
        Main Content
        I"m first in the source order.
        The key to victory is discipline, and that means a well made bed. You will practice until you can make your
            bed in your sleep. Fry, we have a crate to deliver. Hey, guess what you"re accessories to.
        I"ll get my kit! That"s not soon enough! Oh, all right, I am. But if anything happens to me, tell them I died
            robbing some old man.
    
    
        Nav
        
            Home
            About
            Clients
            Contact Us
        
    
    
        Sidebar
        I am a rather effortless column of equal height.

body {
    padding: 2em;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

h1, h2 {
    font: bold 2em Sans-serif;
    margin: 0 0 1em 0;
}

h2 {
    font-size: 1.5em;
}

p {
    margin: 0 0 1em 0;
}

.page-wrap {
    display: flex;
    display: -webkit-flex;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
}

.main-content,
.main-sidebar,
.main-nav {
    padding: 1em;
}

.main-content {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 2;
    order: 2;
    width: 60%;
    -moz-box-flex: 1;
    background: white;
}

.main-nav {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -ms-flex-order: 1;
    order: 1;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    width: 20%;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    background: #ccc;
}

.main-sidebar {
    -webkit-box-ordinal-group: 3;
    -moz-box-ordinal-group: 3;
    -ms-flex-order: 3;
    order: 3;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    width: 20%;
    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    background: #ccc;
}

粘連 Footer 置于底部-方法一

HTML


    在 wrapper 上用負的 margin-bottom
    
        
    
    


    Footer

CSS

html, body {
    height: 100%;
    margin: 0;
}

.content {
    min-height: 100%;
    padding: 20px;
    margin: 0 auto -50px;
}

.footer,
.push {
    height: 50px;
    padding: 20px;
}

JS

$("#add").on("click", function () {
    $("Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.").insertBefore(".push");
});

粘連 Footer 置于底部-方法二

HTML


    
        在 footer 上用負的 margin-top
        
            
        
    



    Footer

CSS

html, body {
    height: 100%;
    margin: 0;
}

.content {
    min-height: 100%;
}

.content-inside {
    padding: 20px;
    padding-bottom: 50px;
}

.footer {
    height: 50px;
    margin-top: -50px;
}

JS

$("#add").on("click", function () {
    $("Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.").appendTo(".content-inside");
});

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111828.html

H5多列布局

摘要：多列布局基本概念多列布局類似報紙或雜志中的排版方式，上要用以控制大篇幅文本。在網頁制作時采用層疊樣式表技術，可以有效地對頁面的布局字體顏色背景和其它效果實現更加精確的控制。多列布局基本概念 1、多列布局類似報紙或雜志中的排版方式，上要用以控制大篇幅文本。 2、跨列屬性可以控制橫跨列的數量 /*列數*/ -webkit-column-count: 3; /*分割線*/ -webkit...

Jingbin_ 2019-08-29 16:15 評論0 收藏0
H5多列布局

摘要：多列布局基本概念多列布局類似報紙或雜志中的排版方式，上要用以控制大篇幅文本。在網頁制作時采用層疊樣式表技術，可以有效地對頁面的布局字體顏色背景和其它效果實現更加精確的控制。多列布局基本概念 1、多列布局類似報紙或雜志中的排版方式，上要用以控制大篇幅文本。 2、跨列屬性可以控制橫跨列的數量 /*列數*/ -webkit-column-count: 3; /*分割線*/ -webkit...

mayaohua 2019-08-02 11:08 評論0 收藏0
CSS及布局

摘要：經過半年的打磨，正式發布，主要是新增了一些常用組件，并使用命名，為接下來的微信小程序開發做好準備。這兩種方式實現的瀑布流式布局均支持首屏和網頁窗口大小改變時的列數自適應。主要是對于標準里的布局方式草案中的布局方式進行一些總結。一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看...

jaysun 2019-08-29 14:04 評論0 收藏0
移動端布局與適配

摘要：實戰之微信錢包騰訊服務界面網格布局是讓開發人員設計一個網格并將內容放在這些網格內。對于移動端適配，不同的公司不同的團隊有不同的解決方案。柵格系統用于處理頁面多終端適配的問題。 grid實戰之微信錢包騰訊服務界面 CSS3網格布局是讓開發人員設計一個網格并將內容放在這些網格內。而不是使用浮動制作一個網格，實際上是你將一個元素聲明為一個網格容器，并把元素內容置于網格中。移動端頁面適配—...

Clect 2019-08-29 14:08 評論0 收藏0
CSS 常用布局在小程序中的應用

摘要：常用布局在小程序中的應用所有布局的根本都是個基本概念定位浮動外邊距操縱我們其他的布局實現方式，都是基于正常的文檔流來進行的。具體實現，可以使用微信小程序的單位，以及使用定位浮動布局來實現。 CSS 常用布局在小程序中的應用所有css布局的根本都是3個基本概念：定位、浮動、外邊距操縱我們其他的布局實現方式，都是基于正常的文檔流來進行的。所以我們先來看看什么是正常的文檔流。正常文...

garfileo 2019-08-30 11:25 評論0 收藏0
CSS 常用布局在小程序中的應用

摘要：常用布局在小程序中的應用所有布局的根本都是個基本概念定位浮動外邊距操縱我們其他的布局實現方式，都是基于正常的文檔流來進行的。具體實現，可以使用微信小程序的單位，以及使用定位浮動布局來實現。 CSS 常用布局在小程序中的應用所有css布局的根本都是3個基本概念：定位、浮動、外邊距操縱我們其他的布局實現方式，都是基于正常的文檔流來進行的。所以我們先來看看什么是正常的文檔流。正常文...

CoderDock 2019-08-30 15:44 評論0 收藏0