DIV+CSS 网页布局之：混合布局_html/css_WEB-ITnose
- WBOY原创
- 2016-06-24 11:24:121506浏览
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>
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn