ホームページ > 記事 > ウェブフロントエンド > 幅適応型layout_html/css_WEB-ITnose
幅適応型layout_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:26:261131ブラウズ
幅アダプティブ レイアウトの入門書
幅アダプティブ レイアウトとは何ですか?
つまり、ブラウザウィンドウのサイズが変化すると、それに応じてブラウザ内の要素の幅も変化し、それによって適応型レイアウトが実現されます。
一般的な幅適応レイアウトには以下が含まれます:
1. 2 列: 左側の幅は変更されず、右側の幅は適応されます
2. 3 列: 左側と右側の幅は変更されません。中央部分は適応型です
3. 3 つの列: 左側と右側の幅は適応型で、中央部分は変更されません
1. div+css を使用して上記の「適応型レイアウト」を実現します
(1 ) 2 つの列: 左の幅は固定、右の幅は適応的です
div+float+margin を使用します。これはエッセイ「Float Analysis」で説明されています。 具体的なコードとレンダリングは次のとおりです。
<!DOCTYPE html> <head> <title>width_layout</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> <style type="text/css"> .content { min-width:300px; } .div1 { width:200px; height:300px; background:green; float:left; } .div2 { height:300px; background:pink; margin-left:200px; } </style> </head> <body> <div class="content"> <div class="div1"></div> <div class="div2"></div> </div> </body></html> (2) 3 つの列: 左と右の列の幅は固定されており、中央部分は適応的です
アイデア: 左と右の列を結合します 列は、それぞれ左フローティングと右フローティングに設定されます。中央の列の幅を変更するには、その margin-left と margin-right を、左列と右列の固定幅と一致するように設定します。
以下の具体的なコードとレンダリングを参照してください:
<!DOCTYPE html> <head> <title>layout2</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> <style> * { margin:0; padding:0; } .main { height:300px; width:100%; min-width:400px; } .main_left { height:300px; width:200px; float:left; background-color:green; text-align:center; } .main_center { height:300px; margin-left:200px; margin-right:100px; text-align:center; background-color:pink; } .main_right { height:300px; width:100px; float:right; text-align:center; background-color:blue; } </style> </head> <body> <div class="main"> <div class="main_left">我是左边部分，宽度不变</div> <div class="main_right">我是右边部分，宽度不变</div> <div class="main_center"> 我是中间部分，宽度自适应 </div> </div> </body></html> (3) 3 つの列: 左右の列の幅は適応的で、中央の列の幅は固定です
アイデア:左と右の列の幅が同じ場合、左と右の列の幅はそれぞれ親要素の 50% に設定され、左と右のマージン左が設定されます。右の列を中央の列の固定幅の半分に移動し、3 つの列すべてを左にフローティングすれば問題ありません。
以下の具体的なコードと効果を参照してください:
<!DOCTYPE html> <head> <title>layout3</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> <style> body { min-width:500px; } #left, #right { float: left; margin: 0 0 0 -101px; width: 50%; height:58px; *width: 49.9%; } #main { width: 200px; height:58px; float: left; background: green; } .inner { height: 100%; } #left .inner, #right .inner { margin: 0 0 0 101px; background: orange; } </style> </head> <body> <div id="left"> <div class="inner">left</div> </div> <div id="main"> <div class="inner">中间width不变，两边自适应</div> </div> <div id="right"> <div class="inner">right</div> </div> </body></html> 次に、table+cssを使用して上記の「アダプティブレイアウト」を実装します
tableにはいくつかの機能が付属しているため、上記の実装は比較的簡単です3つのレイアウト。
ここで使用されるテーブル機能は、td の幅が設定されていない場合、テキストが自動的に垂直方向の中央に配置されることです。
(1) 2 列: 左の列は固定幅、中央部分はアダプティブです
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> <title>table_layout</title> <style> .m_table { width:100%; height:100px; text-align:center; } .left_td { width:300px; background-color:#98FF1A; } .right_td { background-color:#7CC0FF; } </style> </head> <body> <table class="m_table"> <tr> <td class="left_td">这个是左边部分，宽度确定</td> <td class="right_td">这个是右边部分，宽度自动扩展</td> </tr> </table> </body></html> (2) 3 つの列: 左右の列は固定幅、中央部分はアダプティブです
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> <title>table_layout2</title> <style> .m_table { width:100%; height:400px; text-align:center; } .left_td { width:200px; height:300px; min-width:200px; background-color:green; } .center_td { height:300px; background-color:pink; } .right_td { width:200px; height:300px; min-width:200px; background-color:blue; } </style> </head> <body> <table class="m_table"> <tr> <td class="left_td">我是左边部分，宽度不变</td> <td class="center_td">我是中间部分，宽度自适应</td> <td class="right_td">我是右边部分，宽度不变</td> </tr> </table> </body></html> (3) 左右の列の幅は適応的で、中央の列の幅は固定です
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> <title>table_layout3</title> <style> .m_table { width:100%; min-width:500px; height:58px; text-align:center; } .left_td { height:58px; background-color:orange; } .center_td { height:58px; width:200px; background-color:green; } .right_td { height:58px; background-color:orange; } </style> </head> <body> <table class="m_table"> <tr> <td class="left_td">我是左边部分，宽度自适应</td> <td class="center_td">我是中间部分，宽度不变</td> <td class="right_td">我是右边部分，宽度自适应</td> </tr> </table> </body></html> 3 div+css と table+css の比較。レイアウト
これら 2 つの概念の違い、利点、欠点については、Web サイト構築のデザイナーと SEO 実践者はすでに DIV+CSS の利点をよく知っており、テーブル レイアウトが次のような傾向にあることを知っています。現在ではテーブルを使用して Web サイトを構築する人はほとんどいません。両者の違いについてはインターネット上にたくさんの記事がありますので、以下にいくつか挙げてみましょう。
1. テーブル構造の Web サイトは、テーブルに従って非常にゆっくりと開きます。DIV+CSS 構造の Web サイトはすぐに開きます。
2. div+css を使用した Web サイトは、Baidu スパイダーのクローリングに適しています。 Baidu Spider は div+css 構造のサイトを好みますが、table 構造のサイトは登るのが大変なので好まないと言えます。
3. テーブル構造のウェブサイトの構造は単調すぎて、一見すると正方形のフレームのように見えますが、丸みを帯びた効果や流線型の効果を実現したい場合は、多数の枠線の画像を描画する必要があります。 div+css Web サイトには非常に豊富なスタイルがあり、その構造を使用して豊かな効果を作成できます。
4. テーブル構造の Web サイトの場合、ページのスタイルはすべてページのコード内にあり、コードが冗長で可読性が低いだけでなく、Div の構造を変更するのも面倒です。 +css、構造とスタイルが分離されており、可読性と二次修正が非常に便利です。