網(wǎng)頁(yè)布局

一、行布局

1.基礎(chǔ)的行布局

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        body{
            margin: 0;
            padding: 0;
            color: #fff;
            text-align: center;
        }
        .container{
            width: 800px;
            height: 1000px;
            background: #4c77f2;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="container">這是頁(yè)面內(nèi)容</div>
</body>
</html>

2、行布局自適應(yīng)

修改width為百分比：

.container{
    width: 100%;
    height: 1000px;
    background: #4c77f2;
    margin: 0 auto;
}

3、行布局自適應(yīng)限制最大寬

.container{
    width: 100%;
    max-width:1000px;
    height: 1000px;
    background: #4c77f2;
    margin: 0 auto;
}

4、行布局垂直水平居中

樣例：百度的搜索

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        body{
            margin: 0;
            padding: 0;
            color: #fff;
            text-align: center;
        }
        .container{
            width: 800px;
            height: 200px;
            background: #4c77f2;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top:-100px;
            margin-left: -400px;
        }
    </style>
</head>
<body>
    <div class="container">這是頁(yè)面內(nèi)容</div>
</body>
</html>
1.png

5、經(jīng)典的行布局

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        body{
            margin: 0;
            padding: 0;
            color: #fff;
            text-align: center;
            font-size: 16px;
        }
        .header{
            width: 800px;
            height: 50px;
            background:#333;
            margin: 0 auto;
            line-height: 50px;
        }
        .banner{
            /*width: 800px;*/
            width: 100%; /*多行布局某部分自適應(yīng)*/
            height: 300px;
            background:#30a457;
            margin: 0 auto;
            line-height: 300px;
        }
        .container{
            width: 800px;
            height: 1000px;
            background: #4c77f2;
            margin: 0 auto;
        }
        .footer{
            width: 800px;
            height: 100px;
            background: #333;
            margin: 0 auto;
            line-height: 100px;
        }
    </style>
</head>
<body>
    <div class="header">這是頁(yè)面的頭部</div>
    <div class="banner">這是頁(yè)面的banner圖</div>
    <div class="container">這是頁(yè)面的內(nèi)容</div>
    <div class="footer">這是頁(yè)面的底部</div>
</body>
</html>

需求：要求導(dǎo)航欄隨著頁(yè)面滾動(dòng)固定在頂部：

.header{
    width: 100%;
    height: 50px;
    background:#333;
    margin: 0 auto;
    line-height: 50px;
    position: fixed;/*使其固定在頂端*/
}
.banner{
    width: 800px;
    /*width: 100%; */
    height: 300px;
    background:#30a457;
    margin: 0 auto;
    line-height: 300px;
    padding-top: 50px;/* 防止header覆蓋banner*/
}
經(jīng)典的行布局.png

二、多列布局

1.兩列布局固定

<!DOCTYPE html>
<html>
<head>
    <title>會(huì)員列表</title>
    <style type="text/css">
        body{
            margin: 0;
            padding: 0;
            color: #fff;
        }
        .container{
            width: 1000px;
            height: 1000px;
            margin: 0 auto;
        }
        .left{
            width: 600px;
            height: 1000px;
            background: #1a5acd;
            float: left;
        }
        .right{
            width: 400px;
            height: 1000px;
            background: #5880f9;
            float: right;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">這是頁(yè)面的左側(cè)</div>
        <div class="right">這是頁(yè)面的右側(cè)</div>
    </div>
</body>
</html>
兩列布局.png

2.兩列布局自適應(yīng)

.container{
    /*width: 1000px;*/
    width: 90%;
    height: 1000px;
    margin: 0 auto;
}
.left{
    /*width: 600px;*/
    width: 60%;
    height: 1000px;
    background: #1a5acd;
    float: left;
}
.right{
    /*width: 400px;*/
    width: 40%;
    height: 1000px;
    background: #5880f9;
    float: right;
}
兩列布局自適應(yīng).png

3.三列布局固定

<!DOCTYPE html>
<html>
<head>
    <title>會(huì)員列表</title>
    <style type="text/css">
        body{
            margin: 0;
            padding: 0;
            color: #fff;
        }
        .container{
            width: 1000px;
            margin: 0 auto;
        }
        .left{
            width: 300px;
            height: 1000px;
            background: #67b581;
            float: left;
        }
        .right{
            width: 200px;
            height: 1000px;
            background: #67b581;
            float: right;
        }
        .middle{
            width: 500px;
            height: 1000px;
            background: #174bd8;
            float: left;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">這是頁(yè)面的左側(cè)</div>
        <div class="middle">這是頁(yè)面的中間</div>
        <div class="right">這是頁(yè)面的右側(cè)</div>
    </div>
</body>
</html>
三列布局固定.png

4.三列布局自適應(yīng)

.container{
    /*width: 1000px;*/
    width: 100%;
    margin: 0 auto;
}
.left{
    /*width: 300px;*/
    width: 30%;
    height: 1000px;
    background: #67b581;
    float: left;
}
.right{
    /*width: 200px;*/
    width: 20%;
    height: 1000px;
    background: #67b581;
    float: right;
}
.middle{
    /*width: 500px;*/
    width: 50%;
    height: 1000px;
    background: #174bd8;
    float: left;
}
三列布局自適應(yīng).png

三、混合布局

1.混合布局固定

<!DOCTYPE html>
<html>
<head>
    <title>會(huì)員列表</title>
    <style type="text/css">
        body{
            margin: 0;
            padding: 0;
            font-size: 16px;
            color: #fff;
            text-align: center;
        }
        .header{
            width: 800px;
            height: 50px;
            background: #5880f9;
            margin: 0 auto;
            line-height: 50px;
        }
        .container{
            width: 800px;
            margin: 0 auto;
            height: 1000px;
        }
        .container .left{
            width: 200px;
            height: 1000px;
            background: #67b581;
            float: left;
        }
        .container .right{
            width: 600px;
            height: 1000px;
            background: #d0d0d0;
            float: right;
        }
        .footer{
            width: 800px;
            height: 100px;
            background: #ed817e;
            margin: 0 auto;
            line-height: 100px;
        }
        .banner{
            width: 100%;
            height: 200px;
            background: #8b8d01;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="header">這是頁(yè)面的頭部</div>
    <div class="banner">這是頁(yè)面的輪播圖</div>
    <div class="container">
        <div class="left">這是頁(yè)面的左側(cè)</div>
        <div class="right">這是頁(yè)面的右側(cè)</div>
    </div>
    <div class="footer">這是頁(yè)面的底部</div>
</body>
</html>
混合布局固定.png

1.混合布局自適應(yīng)

<style type="text/css">
    body{
        margin: 0;
        padding: 0;
        font-size: 16px;
        color: #fff;
        text-align: center;
    }
    .header{
        /*width: 800px;*/
        width: 100%;
        height: 50px;
        background: #5880f9;
        margin: 0 auto;
        line-height: 50px;
    }
    .container{
        /*width: 800px;*/
        width: 100%;
        margin: 0 auto;
        height: 1000px;
    }
    .container .left{
        /*width: 200px;*/
        width: 40%;
        height: 1000px;
        background: #67b581;
        float: left;
    }
    .container .right{
        /*width: 600px;*/
        width: 60%;
        height: 1000px;
        background: #d0d0d0;
        float: right;
    }
    .footer{
        /*width: 800px;*/
        width: 100%;
        height: 100px;
        background: #ed817e;
        margin: 0 auto;
        line-height: 100px;
    }
    .banner{
        width: 100%;
        height: 200px;
        background: #8b8d01;
        margin: 0 auto;
    }
</style>
混合布局自適應(yīng).png

四、圣杯布局

布局要求：
  1. 三列布局，中間寬度自適應(yīng)，兩邊定寬（比較適合網(wǎng)站的管理后臺(tái)）
  2. 中間欄要在瀏覽器中優(yōu)先展示渲染
  3. 允許任意列的高度最高
  4. 用最簡(jiǎn)單的CSS、最少的HACK語(yǔ)句
圣杯布局要求.jpg
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        body{
            min-width: 700px;
        }
        .header,.footer{
            float: left;
            width: 100%;
            background: #ddd;
            height: 40px;
            line-height: 40px;
            text-align: center;
        }
        .container{
            padding: 0 220px 0 200px;
        }
        .left, .middle, .right{
            position: relative;
            float: left;
            min-height: 300px;
        }
        .middle{
            width: 100%;
            background: #1a5acd;
        }
        .left{
            width: 200px;
            background: #f00;
            margin-left: -100%;
            left: -200px;
        }
        .right{
            width: 220px;
            background: #30a457;
            margin-left: -220px;
            right: -220px;
        }
    </style>
</head>
<body>
    <div class="header">
        <h4>header</h4>
    </div>
    <div class="container">
        <div class="middle">
            <h4>middle</h4>
            <p>這是頁(yè)面的中間內(nèi)容這是頁(yè)面的中間內(nèi)容這是頁(yè)面的中間內(nèi)容這是頁(yè)面的中間內(nèi)容這是頁(yè)面的中間內(nèi)容這是頁(yè)面的中間內(nèi)容這是頁(yè)面的中間內(nèi)容這是頁(yè)面的中間內(nèi)容這是頁(yè)面的中間內(nèi)容</p>
        </div>
        <div class="left">
            <h4>left</h4>
            <p>這是頁(yè)面的左側(cè)內(nèi)容</p>
        </div>
        <div class="right">
            <h4>right</h4>
            <p>這是頁(yè)面的右側(cè)內(nèi)容</p>
        </div>
    </div>
    <div class="footer">
        <h4>footer</h4>
    </div>
</body>
</html>
圣杯布局.png

五、雙飛翼布局

去掉相對(duì)布局，只需要浮動(dòng)和負(fù)邊距

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        body{
            min-width: 700px;
        }
        .header, .footer{
            width: 100%;
            float: left;
            height: 40px;
            background: #ddd;
            line-height: 40px;
            text-align: center;
        }
        .sub, .main, .extra{
            float: left;
            min-height: 300px;
        }
        .main{
            width: 100%;
            min-height: 300px;
        }
        .main-inner{
            margin-left: 200px;
            margin-right: 220px;
            background: #30a457;
            min-height: 300px;
        }
        .sub{
            width: 200px;
            background: #f00;
            margin-left: -100%;
        }
        .extra{
            width: 220px;
            background: #1a5acd;
            margin-left: -220px;
        }
    </style>
</head>
<body>
    <div class="header">
        <h4>header</h4>
    </div>
    <div class="main">
        <div class="main-inner">
            <h4>middle</h4>
            <p>這是頁(yè)面的中間內(nèi)容這是頁(yè)面的中間內(nèi)容這是頁(yè)面的中間內(nèi)容這是頁(yè)面的中間內(nèi)容這是頁(yè)面的中間內(nèi)容這是頁(yè)面的中間內(nèi)容這是頁(yè)面的中間內(nèi)容這是頁(yè)面的中間內(nèi)容這是頁(yè)面的中間內(nèi)容</p>
        </div>
    </div>
    <div class="sub">
        <h4>sub</h4>
        <p>這是頁(yè)面的左側(cè)內(nèi)容</p>
    </div>
    <div class="extra">
        <h4>extra</h4>
        <p>這是頁(yè)面的右側(cè)內(nèi)容</p>
    </div>
    <div class="footer">
        <h4>footer</h4>
    </div>
</body>
</html>
雙飛翼布局.png
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案？ 參考答案 (1)瀏覽器兼容問(wèn)題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,126評(píng)論 1贊 92
  • 1、CSS的三種定位機(jī)制 CSS 規(guī)定的定位機(jī)制有三種，分別是： 標(biāo)準(zhǔn)文檔流（Normal flow）： 特點(diǎn)：從...
    徐國(guó)軍_plus閱讀 655評(píng)論 0贊 3
  • 也曾有人說(shuō)過(guò)我灑脫，我笑笑，笑他不懂，我灑脫中的寂寞；然而也有人說(shuō)我寂寞，我苦笑，笑他不懂，我寂寞中的逍遙。每個(gè)寂...
    lightning__閱讀 405評(píng)論 0贊 0
  • 下午六點(diǎn) 舍友陪我出去找房子 不能再墮落了 在杭州快一個(gè)月了 工作還沒(méi)確定下來(lái) 房子也還沒(méi)租 租房子純粹是想要個(gè)私...
    彭彭彭sz閱讀 246評(píng)論 0贊 0
  • 下班之后，我就搭著熟悉的公車(chē)踏上了回家的路。在離家還有兩站路遠(yuǎn)的地方下了車(chē)。菜市場(chǎng)可以出現(xiàn)在回家的路上真是一件幸福...
    若思古閱讀 235評(píng)論 0贊 1

友情鏈接更多精彩內(nèi)容