本文主要包含学习DIV+CSS网页布局之混合布局等相关知识,彼岸时光 希望在学习及工作中可以帮助到您
DIV+CSS 网页布局第四篇：混合布局
1、混合布局
在了解了一列、两列和三列布局之后，混合布局也就不难理解了，混合布局也可以叫综合型布局，那么混合布局就可以在一列布局的基础之上，分为两列布局，三列布局，网页布局的结构普遍都是三列布局，但是在三列布局的基础上，可以根据实际需求，对网页再进行划分。
- <!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>
- </div>
- </div>
- <div id="footer">页脚</div>
- </body>
- </