1、混合布局
在了解了一列、两列和三列布局之后，混合布局也就不难理解了，混合布局也可以叫综合型布局，那么混合布局就可以在一列布局的基础之上，分为两列布局，三列布局，网页布局的结构普遍都是三列布局，但是在三列布局的基础上，可以根据实际需求，对网页再进行划分。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>混合布局</title> 6 <style> 7 *{margin:0;padding:0;} 8 #header{ 9 height:50px; 10 background:blue; 11 } 12 #main{ 13 width:100%; 14 overflow:hidden; 15 } 16 #main .main-left{ 17 width:20%; 18 height:800px; 19 background:lightgreen; 20 float:left; 21 } 22 #main .main-right{ 23 width:80%; 24 height:800px; 25 float:right; 26 } 27 #main .main-right .right-l{ 28 width:80%; 29 height:800px; 30 background:yellow; 31 float:left; 32 } 33 #main .main-right .right-r{ 34 width:20%; 35 height:800px; 36 background:pink; 37 float:right; 38 } 39 #footer{ 40 height:50px; 41 background:gray; 42 } 43 </style> 44 </head> 45 <body> 46 <div id="header">头部</div> 47 <div id="main"> 48 <div class="main-left">左边</div> 49 <div class="main-right"> 50 <div class="right-l">右-左</div> 51 <div class="right-r">右-右</div> 52 </div> 53 </div> 54 <div id="footer">页脚</div> 55 </body> 56 </html>
2、固定宽度混合布局
固定宽度的混合布局结构，同固定宽度的三列布局模式相同。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>固定宽度混合布局</title> 6 <style> 7 *{margin:0;padding:0;} 8 #header{ 9 height:50px; 10 background:blue; 11 } 12 #main{ 13 width:960px; 14 margin:0 auto; 15 overflow:hidden; 16 } 17 #main .main-left{ 18 width:200px; 19 height:800px; 20 background:lightgreen; 21 float:left; 22 } 23 #main .main-right{ 24 width:760px; 25 height:800px; 26 float:right; 27 } 28 #main .main-right .right-l{ 29 width:560px; 30 height:800px; 31 background:yellow; 32 float:left; 33 } 34 #main .main-right .right-r{ 35 width:200px; 36 height:800px; 37 background:pink; 38 float:right; 39 } 40 #footer{ 41 width:960px; 42 height:50px; 43 background:gray; 44 margin:0 auto; 45 } 46 </style> 47 </head> 48 <body> 49 <div id="header">头部</div> 50 <div id="main"> 51 <div class="main-left">左边</div> 52 <div class="main-right"> 53 <div class="right-l">右-左</div> 54 <div class="right-r">右-右</div> 55 </div> 56 </div> 57 <div id="footer">页脚</div> 58 </body> 59 </html>
3、自适应混合布局
自适应混合布局是对三列自适应布局的改进。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>自适应混合布局</title> 6 <style> 7 *{margin:0;padding:0;} 8 #header{ 9 height:50px; 10 background:blue; 11 } 12 #main{ 13 width:100%; 14 position:relative; 15 } 16 #main .main-left{ 17 width:20%; 18 height:800px; 19 background:red; 20 position:absolute; 21 left:0; 22 top:0; 23 } 24 #main .main-center{ 25 height:800px; 26 background:lightgreen; 27 margin:0 20%; 28 } 29 #main .main-right{ 30 width:20%; 31 height:800px; 32 background:pink; 33 position:absolute; 34 right:0; 35 top:0; 36 } 37 #footer{ 38 height:50px; 39 background:gray; 40 } 41 </style> 42 </head> 43 <body> 44 <div id="header">头部</div> 45 <div id="main"> 46 <div class="main-center">设计网页的第一步就是设计版面布局，搭建网站结构，网页排版的合理性，在一定程度上也影响着网站整体的布局以及后期的优化。一个好的网站形象能更容易地吸引用户、留住用户。因此，网站首页第一屏的排版非常重要，很多时候能决定用户的去与留。</div> 47 <div class="main-right">右列</div> 48 <div class="main-left">左列</div> 49 </div> 50 <div id="footer">页脚</div> 51 </body> 52 </html>
4、混合布局的应用
混合布局在网站中应用比较广泛，再复杂的布局结构，他们的原理都是相通的，可以举一反三。网页布局就是依据内容、功能的不同，使用 CSS 对元素进行格式设置，根据版面的布局结构进行排列，那么布局也就是元素与元素之间的关系，或者向一边看齐，或者精准定位，或者有一定间距，或者嵌套，或者相互堆叠，使元素按照设计稿的样式漂亮的呈现在网页上。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>混合布局</title> 6 <style> 7 *{margin:0;padding:0;} 8 #header{ 9 height:30px; 10 background:blue; 11 margin-bottom:10px; 12 } 13 #nav{ 14 width:960px; 15 margin:0 auto; 16 margin-bottom:10px; 17 } 18 #main{ 19 width:960px; 20 height:800px; 21 margin:0 auto; 22 overflow:hidden; 23 } 24 #main .left{ 25 width:200px; 26 height:800px; 27 background:lightgreen; 28 float:left; 29 } 30 #main .right{ 31 width:750px; 32 height:800px; 33 float:right; 34 } 35 #main .right .sup{ 36 height:200px; 37 margin-bottom:10px; 38 } 39 #main .right .sup-left{ 40 width:370px; 41 height:200px; 42 background:pink; 43 float:left; 44 } 45 #main .right .sup-right{ 46 width:370px; 47 height:200px; 48 background:orange; 49 float:right; 50 } 51 #main .right .middle{ 52 height:300px; 53 background:yellow; 54 margin-bottom:10px; 55 } 56 #main .right .sub{ 57 height:280px; 58 background:purple; 59 } 60 #footer{ 61 width:960px; 62 height:50px; 63 background:gray; 64 margin:0 auto; 65 margin-top:10px; 66 } 67 #nav ul{ 68 list-style:none; 69 background:lightgray; 70 overflow:hidden; 71 } 72 #nav li{ 73 float:left; 74 } 75 #nav li a{ 76 display:block; 77 color:black; 78 width:104px; 79 height:30px; 80 line-height:30px; 81 text-decoration:none; 82 text-align:center; 83 } 84 #nav .home{ 85 width:128px; 86 } 87 #nav li a:hover{ 88 color:white; 89 background:green; 90 } 91 </style> 92 </head> 93 <body> 94 <div id="header">头部</div> 95 <div id="nav"> 96 <ul> 97 <li><a class="home" href="#">首页</a></li> 98 <li><a href="#">新闻</a></li> 99 <li><a href="#">热点</a></li> 100 <li><a href="#">动态</a></li> 101 <li><a href="#">直播</a></li> 102 <li><a href="#">地图</a></li> 103 <li><a href="#">服务</a></li> 104 <li><a href="#">社区</a></li> 105 <li><a href="#">关于我们</a></li> 106 </ul> 107 </div> 108 <div id="main"> 109 <div class="left">左边</div> 110 <div class="right"> 111 <div class="sup"> 112 <div class="sup-left">右-左</div> 113 <div class="sup-right">右-右</div> 114 </div> 115 <div class="middle">右-中</div> 116 <div class="sub">右-下</div> 117 </div> 118 </div> 119 <div id="footer">页脚</div> 120 </body> 121 </html>
