學(xué)習(xí)DIV+CSS網(wǎng)頁布局之混合布局

2024-07-11 08:34:28

字體：大中小

供稿：網(wǎng)友

DIV+CSS 網(wǎng)頁布局第四篇：混合布局

1、混合布局

　　在了解了一列、兩列和三列布局之后，混合布局也就不難理解了，混合布局也可以叫綜合型布局，那么混合布局就可以在一列布局的基礎(chǔ)之上，分為兩列布局，三列布局，網(wǎng)頁布局的結(jié)構(gòu)普遍都是三列布局，但是在三列布局的基礎(chǔ)上，可以根據(jù)實際需求，對網(wǎng)頁再進(jìn)行劃分。

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>混合布局</title>
<style>
*{margin:0;padding:0;}
#header{
    height:50px;
    background:blue;
}
#main{
    width:100%;
    overflow:hidden;
}
#main .main-left{
    width:20%;
    height:800px;
    background:lightgreen;
    float:left;
}
#main .main-right{
    width:80%;
    height:800px;
    float:right;
}
#main .main-right .right-l{
    width:80%;
    height:800px;
    background:yellow;
    float:left;
}
#main .main-right .right-r{
    width:20%;
    height:800px;
    background:pink;
    float:right;
}
#footer{
    height:50px;
    background:gray;
}
</style>
</head>
<body>
<div id="header">頭部</div>
<div id="main">
    <div class="main-left">左邊</div>
    <div class="main-right">
        <div class="right-l">右-左</div>
        <div class="right-r">右-右</div>