幅適応型layout_html/css_WEB-ITnose-htmlチュートリアル-php.cn

<!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、構造とスタイルが分離されており、可読性と二次修正が非常に便利です。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。