学习DIV+CSS网页布局之混合布局

2024-07-11 08:34:28

字体：大中小

来源：转载

供稿：网友

DIV+CSS 网页布局第四篇：混合布局

1、混合布局

　　在了解了一列、两列和三列布局之后，混合布局也就不难理解了，混合布局也可以叫综合型布局，那么混合布局就可以在一列布局的基础之上，分为两列布局，三列布局，网页布局的结构普遍都是三列布局，但是在三列布局的基础上，可以根据实际需求，对网页再进行划分。

XML/HTML Code复制内容到剪贴板

<!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>