DIV+CSS 网页布局之：混合布局
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: |