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

資訊專欄INFORMATION COLUMN

兩個(gè)常規(guī)的頁(yè)面布局方式

趙春朋 / 2064人閱讀

摘要：表格布局表格布局雜亂無章雜亂無章雜亂無章凝膠布局凝膠布局雜亂無章雜亂無章雜亂無章圖中例子是引用與一書為本人自己發(fā)揮所寫，可能比較膚淺，大?？衫@過或者多指點(diǎn)指點(diǎn)。。。

表格布局

html:




    
        
        表格布局
        
    

    
        

        
        

            

                

                    

                        雜亂無章
                    

                    

                        雜亂無章

css:

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

html,
body {
    height: 100%;
    overflow: hidden;
    background-color: gray;
}

header {
    height: 100px;
    background-color: bisque;
    margin: 10px 10px 0 10px;
}

nav {
    height: 50px;
    background-color: blueviolet;
    margin: 10px 10px 0 10px;
}

.content {
    position: absolute;
    top: 170px;
    bottom: 100px;
    width: 100%;
}

.tablecontent {
    display: table;
    border-spacing: 10px;
    height: 100%;
    width: 100%;
}

.tablerow {
    display: table-row;
}

#left {
    display: table-cell;
    background-color: darkmagenta;
    width: 20%;
    vertical-align: top;
    padding: 15px;
    margin: 0 0 0 10px;
}

#main {
    display: table-cell;
    background-color: dodgerblue;
    width: 60%;
    padding: 15px;
    vertical-align: top;
}

#right {
    display: table-cell;
    background-color: lightcoral;
    width: 20%;
    padding: 15px;
    vertical-align: top;
}

.foot {
    position: fixed;
    bottom: 0px;
    right: 0px;
    width: 100%;
    height: 100px;
}

footer {
    height: 100px;
    background-color: brown;
    margin: 0 10px 10px 10px;
}

凝膠布局

html:




    
        
        凝膠布局
        
    

    
        

        
        

            

                

                    雜亂無章
                

            

            

                

                    雜亂無章

css：

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

html,
body {
    width: 800px;
    height: 100%;
    overflow: hidden;
    background-color: whitesmoke;
    margin-left: auto;
    margin-right: auto;
}

header {
    height: 100px;
    background-color: bisque;
    margin: 10px 10px 0 10px;
}

nav {
    height: 50px;
    background-color: blueviolet;
    margin: 10px;
}

.content {
    position: absolute;
    top: 180px;
    bottom: 110px;
    width: 800px;
    overflow: hidden;
}

#left {
    float: left;
    background-color: darkmagenta;
    width: 24%;
    margin: 0 0 10px 10px;
    height: 100%;
}

#main {
    position: absolute;
    left: 210px;
    right: 210px;
    background-color: dodgerblue;
    height: 100%;
}

#right {
    float: right;
    background-color: lightcoral;
    width: 24%;
    margin: 0 10px 0 0;
    height: 100%;
}

footer {
    position: absolute;
    bottom: 0;
    width: 780px;
    height: 100px;
    background-color: brown;
    margin-left: 10px;
    margin-right: 10px;
}

article {
    vertical-align: top;
    padding: 15px;
}

.clearfix {
    zoom: 1;
}

.clearfix:after {
    content: "";
    display: block;
    clear: both;
    overflow: hidden;
}

圖中例子是引用<>一書,為本人自己發(fā)揮所寫，可能比較膚淺，大?？衫@過或者多指點(diǎn)指點(diǎn)。。。O(∩_∩)O哈哈~

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/94716.html

相關(guān)文章

  • 兩個(gè)常規(guī)的頁(yè)面布局方式

    摘要：表格布局表格布局雜亂無章雜亂無章雜亂無章凝膠布局凝膠布局雜亂無章雜亂無章雜亂無章圖中例子是引用與一書為本人自己發(fā)揮所寫，可能比較膚淺，大牛可繞過或者多指點(diǎn)指點(diǎn)。。。 表格布局 html: 表格布局 ...

    feng409 評(píng)論0 收藏0

  • 兩個(gè)常規(guī)的頁(yè)面布局方式

    摘要：表格布局表格布局雜亂無章雜亂無章雜亂無章凝膠布局凝膠布局雜亂無章雜亂無章雜亂無章圖中例子是引用與一書為本人自己發(fā)揮所寫，可能比較膚淺，大牛可繞過或者多指點(diǎn)指點(diǎn)。。。 表格布局 html: 表格布局 ...

    xorpay 評(píng)論0 收藏0

  • CSS中重要的BFC

    摘要：中有個(gè)重要的概念，搞懂可以讓我們理解中某些原本詭異的地方。簡(jiǎn)介在解釋之前，先說一下文檔流。我們常說的文檔流其實(shí)分為定位流浮動(dòng)流普通流三種。使用包含浮動(dòng)元素注意，這里觸發(fā)并不能阻止其它形式的脫離文檔流的元素覆蓋正常流元素。 CSS中有個(gè)重要的概念BFC，搞懂BFC可以讓我們理解CSS中某些原本詭異(??)的地方。 1. 簡(jiǎn)介 在解釋BFC之前，先說一下文檔流。我們常說的文檔流其實(shí)分為定位...

    plus2047 評(píng)論0 收藏0

  • CSS學(xué)習(xí)筆記(六) 元素定位

    摘要：方法一為父元素添加方法二同時(shí)浮動(dòng)元素方法三添加非浮動(dòng)的清除元素定位布局的核心是屬性，對(duì)元素盒子應(yīng)用這個(gè)屬性，可以相對(duì)于它在常規(guī)文檔流中的位置重新定位。絕對(duì)定位絕對(duì)定位會(huì)把元素徹底從文檔流中拿出來，然后相對(duì)于其他元素默認(rèn)是定位上下文定位。 1.盒模型 盒模型，就是 瀏覽器為頁(yè)面中的每個(gè) HTML 元素生成的矩形盒子。 這些盒子們都要按照 可見版式模型（visual formattin...

    浠ラ箍 評(píng)論0 收藏0

  • 解剖CSS布局原理

    摘要：前言本文將帶你重新認(rèn)識(shí)布局，帶你解剖布局原理，前提是你要有基礎(chǔ)本文將解除你在布局方面的疑惑。以下將對(duì)布局元素和文檔流進(jìn)行詳細(xì)講解。而且還能保持文檔流，這是其他元素做不到的。 前言 本文將帶你重新認(rèn)識(shí)CSS布局，帶你解剖布局原理，前提是你要有基礎(chǔ)！本文將解除你在布局方面的疑惑。認(rèn)識(shí)每個(gè)布局元素，了解他們的特性，你才知道為什么會(huì)是這樣的結(jié)果。本文內(nèi)容純屬個(gè)人理解，不代表官方。 此文主要為理...

    李文鵬 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<