DIV+CSS 网页布局之：混合布局_html/css_WEB-ITnose
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
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
刺客信條陰影：貝殼謎語解決方案
1 個月前
By DDD
Windows 11 KB5054979中的新功能以及如何解決更新問題
3 週前
By DDD
在哪裡可以找到原子中的起重機控制鑰匙卡
1 個月前
By DDD
如何修復KB5055523無法在Windows 11中安裝？
2 週前
By DDD
Inzoi：如何申請學校和大學
3 週前
By DDD
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
HTML容易為初學者學習嗎？
Apr 07, 2025 am 12:11 AM
HTML適合初學者學習，因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩，易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高，可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。
HTML，CSS和JavaScript的角色：核心職責
Apr 08, 2025 pm 07:05 PM
HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。
了解HTML，CSS和JavaScript：初學者指南
Apr 12, 2025 am 12:02 AM
WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。
HTML中起始標籤的示例是什麼？
Apr 06, 2025 am 12:04 AM
AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。
Gitee Pages靜態網站部署失敗：單個文件404錯誤如何排查和解決？
Apr 04, 2025 pm 11:54 PM
GiteePages靜態網站部署失敗：404錯誤排查與解決在使用Gitee...
如何用CSS3和JavaScript實現圖片點擊後周圍圖片散開並放大效果？
Apr 05, 2025 am 06:15 AM
實現圖片點擊後周圍圖片散開並放大效果許多網頁設計中，需要實現一種交互效果：點擊某張圖片，使其周圍的...
網頁批註如何實現Y軸位置的自適應佈局？
Apr 04, 2025 pm 11:30 PM
網頁批註功能的Y軸位置自適應算法本文將探討如何實現類似Word文檔的批註功能，特別是如何處理批註之間的間�...
HTML，CSS和JavaScript：Web開發人員的基本工具
Apr 09, 2025 am 12:12 AM
HTML、CSS和JavaScript是Web開發的三大支柱。 1.HTML定義網頁結構，使用標籤如、等。 2.CSS控製網頁樣式，使用選擇器和屬性如color、font-size等。 3.JavaScript實現動態效果和交互，通過事件監聽和DOM操作。
