ホームページ >ウェブフロントエンド >htmlチュートリアル >DIV+CSS Web ページ レイアウト: 混合レイアウト_html/css_WEB-ITnose
DIV+CSS Web ページ レイアウト: 混合レイアウト_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:24:121509ブラウズ
1. 混合レイアウト
1 列、2 列、3 列のレイアウトを理解すると、混合レイアウトは包括的なレイアウトとも呼ばれます。上記では、Web ページのレイアウトは 2 カラム レイアウトと 3 カラム レイアウトに分けられますが、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 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. 固定幅ハイブリッド レイアウト
固定幅ハイブリッド レイアウト構造は、固定幅 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: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. アダプティブ ハイブリッド レイアウト
アダプティブ ハイブリッド レイアウトは、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. 混合レイアウトの適用
混合レイアウトは、レイアウト構造がどれほど複雑であっても、その原理は同じであり、1 つの例から推測することができます。 Web ページのレイアウトはさまざまなコンテンツと機能に基づいており、CSS を使用して要素をフォーマットし、ページのレイアウト構造に従って要素を配置します。レイアウトとは、片側に揃えるか、正確に配置するか、または特定の間隔で配置する要素間の関係です。 、ネスト、または相互に積み重ねることにより、デザイン ドラフトのスタイルに従って要素を Web ページ上に美しく表示できます。
れーい
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。