DIV+CSS Web ページレイアウト: 混合レイアウト_html/css

1. 混合レイアウト

2. 固定幅ハイブリッドレイアウト

3. アダプティブハイブリッドレイアウト

4. 混合レイアウトの適用

ホームページ

ウェブフロントエンド

htmlチュートリアル

DIV+CSS Web ページレイアウト: 混合レイアウト_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:24 AM

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 までご連絡ください。