CSS クラシックレイアウト聖杯レイアウト、ダブルフライングウィングレイアウト_html/css

CSS クラシックレイアウト聖杯レイアウト、ダブルフライングウィングレイアウト_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:38:13

オリジナル

1858 人が閲覧しました

ページレイアウトに CSS を使用すると、3 列レイアウト、両側の上部の幅、適応型の中間レンダリングと優先レンダリングが頻繁に発生します。私たちがこれまで接してきたQQスペースやれんれんなどの個人ホームページを思い返すと、このようなレイアウトに遭遇することが多いのですが、どうやって解決すればいいのでしょうか？

聖杯レイアウト

聖杯とは、既存のテクノロジーで実装できる一般的に使用される Web ページレイアウトを指します (いずれにも欠点がないわけではありません)。最適な実装方法を見つけることは、とらえどころのない聖杯を探すことに似ています。
最初に実装コードを投稿してから、詳しく説明しましょう:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>圣杯布局</title></head><style>    *{        margin: 0;        padding: 0;    }     h3{        color: gray;    }    .header{        height: 100px;        margin: 0 auto;        border: 2px solid black;    }    .footer{        height: 100px;        margin: 0 auto;        border: 2px solid black;    }    .artice{        height: 500px;        margin: 15px auto;        border: 2px solid black;        padding-left: 250px;        padding-right: 200px;    }    .artice .left{        background-color: paleturquoise;        float: left;        width: 250px;        height: 500px;       margin-left: -100%;        position: relative;        left: -250px;    }    .artice .right{        background-color: #ff7d8e;        float: left;        width: 200px;        height: 500px;        margin-left: -200px;        position: relative;        right: -200px    }    .artice .middle{        background-color: pink;        float: left;        width: 100%;        height: 500px;    }</style><body><div class ="header">    <h3>This is Top</h3></div><div class="artice">    <div class="middle">        <h3>This is Main</h3>    </div>    <div class="left">        <h3>This is left</h3>    </div>    <div class="right">        <h3>This is right</h3>    </div></div><div class="footer">    <h3> This is L's page</h3></div></body></html>

ログイン後にコピー

1.* はワイルドカード文字を表します。これは、すべての DIV が設定された属性に適用されることを意味します。これは、ブラウザーが属性を持たないことを保証するために 0 に設定されます。空白スペースで完全に埋められています
2.margin 次の 4 つの状況で属性が存在する可能性があります:
(1) margin 5px 10px 15px 20px
は上マージン 5px、右マージン 10px、下 15px、左 20px を意味します
(2) margin 5px 10px 15px
は上マージン 5px、左/右を意味します距離は 10px、下マージンは 15px
(3) マージン 5px 10px
は上/下マージン 5px、左/右マージン 10px を意味します
(4) マージン5px
は、上/下/左/右のマージンが 5px であることを意味します
3.float:left は、要素の 3 つの列がすべて同じ行にあるため、左にフローティングすることを意味します。 left
4.width:auto、幅に適応することを意味します。おそらくドキュメントフローの変化に応じて変更します。
5. Position:relative、つまり相対的な位置決めも聖杯レイアウトの最も重要な部分です。これについては以前の記事で説明しています。位置の相対と絶対の違いについては、ここでは詳しく説明しませんので、ご参照ください。 6. カラーレンダリングレイアウトを使用する必要がある場合、カラー値は次のようになります。 Web ページが異なればレンダリング効果も異なる可能性があるため、赤、黒などの色の名前を使用する代わりに、#FFFFFF などの対応するカラーコードを使用します。

ダブルフライングウィングレイアウト

ダブルフライングウィングレイアウトは、淘宝網 UED の聖杯レイアウトを最適化したもので、レイアウト時にメインとエクストラが鳥の 2 つの翼と見なすことができます。、最後に配置します。重要なのは、翼を適切な場所に配置することです。

まずコードを見てみましょう:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>双飞翼布局</title></head><style>    *{        margin: 0;        padding: 0;    }    h3{        color: gray;    }    .header{        height: 100px;        margin: 0 auto;        border: 2px solid black;    }    .footer{        height: 100px;        margin: 0 auto;        border: 2px solid black;    }    .artice{        height: 500px;        margin: 15px auto;        border: 2px solid black;      /*  padding-left: 250px;        padding-right: 200px;*/    }    .artice .left{        background-color: paleturquoise;        float: left;        width: 250px;        height: 500px;       margin-left: -100%;       /* position: relative;        left: -250px;*/    }    .artice .right{        background-color: #ff7d8e;        float: left;        width: 200px;        height: 500px;        margin-left: -200px;      /*  position: relative;        right: -200px*/    }    .artice .middle{        background-color: pink;        float: left;        width: 100%;        height: 500px;    }    .inner{        margin-left: 250px;        margin-right: 200px;    }</style><body><div class ="header">    <h3>This is Top</h3></div><div class="artice">    <div class="middle">        <div class="inner">            <h3>This is Main</h3>        </div>    </div>    <div class="left">        <h3>This is left</h3>    </div>    <div class="right">        <h3>This is right</h3>    </div></div><div class="footer">    <h3> This is L's page</h3></div></body></html>

ログイン後にコピー

観察によると、聖杯レイアウトと二重飛行翼レイアウトの問題の解決策は前半では同じです。つまり、3 つの列すべてが左に浮かんでいますが、左右の列にそれぞれネガが追加され、中央の DIV に合わせて 3 列のレイアウトが作成されます。
両者の違いは「真ん中の列の内容がブロックされないようにする方法」です
Holy Grailレイアウト、真ん中のDIVの左右のpadding-leftとpadding-rightを設定し、左右のDIVを結合します相対レイアウト位置:相対左と右の属性をそれぞれ使用して、左と右の列用のスペースを残します。
二重飛行翼レイアウトでは、配置用に中央の DIV の中に直接サブ DIV を作成します。コンテンツの場合は、サブ DIV で margin-left と margin を使用します。 -right は、左列と右列の DIV 用のスペースを予約し、相対属性を省略します。
簡単にまとめると、Double Flying Wing レイアウトが Holy Grail レイアウトよりもシンプルである理由は、コンテンツを運ぶために 1 つ多くの DIV を使用し、コードの最適化においてより顕著である相対を無視するためです。

著作権声明: この記事はブロガーによるオリジナルの記事であり、ブロガーの許可なく複製することはできません。