CSS3_html/css_WEB-ITnose の新しいレイアウト機能に基づく一般的なレイアウト方法について説明します。

=. =最近試験がたくさんあります。 。フロントエンドのことを要約する時間がありません。前回の記事を投稿します。まだ終わっていませんが、続きます...

前に書いています

最近、「図解 CSS3」のレイアウト部分を見て、読んだレイアウトの知識と組み合わせました。の前に、CSS2と3をベースにしたさまざまなレイアウト方法をまとめました。

一般的なページレイアウト

フロントエンドスタッフとしてデザイン案をいただいたら、まずデザイン画を描く領域を大まかに分けて、最も適したものを選択します。合理的なもの、明確に構造化されたレイアウト。まず、いくつかの典型的な Web サイトのケースに基づいて、一般的なページ レイアウトをいくつか挙げてみましょう。

T 字型レイアウト

これは、通常、ページの上部に横型 Web サイトのロゴまたはバナー広告が配置され、ナビゲーション バー メニューが左側にあります。を下に配置し、その右下に Web ページのテキストなどのメインコンテンツを配置します。
Segmentfault のホームページは T 字型のレイアウトになっています。 Web ページが長すぎるためです。 。底は切り取られていません。

中国語フォント レイアウト

中国語フォント レイアウトの上部は Web サイトのタイトルとバナー広告で、その後に Web サイトのメイン コンテンツが続きます。記事の内容、中央の質問が主要な部分であり、最後にいくつかの基本情報、連絡先情報、著作権表示などが並べて表示されます。ウェブサイトの。
この事例の写真は、2011 年に Tencent が行った以前の筆記試験の問題から引用したものです。興味のある学生はご覧ください。 2011 Tencent フロントエンド インタビュー ドラフト

POP レイアウト

POP レイアウトとは、美しい写真をデザインの中心とした、宣伝ポスターのようなページ レイアウトを意味します。ページ。ファッションサイトなどでよく使われています。利点は明白です：美しくて魅力的です。欠点は遅いことです。
全国人民代表大会のホームページもこのレイアウトと似ています。

左右レイアウトタイプ

名前が示すように、Web ページの本体は左と右の 2 つの大きなブロックに分割されており、そのほとんどがバックグラウンド管理システムですページ。一般に、左右のレイアウト ページには同じ高さの 2 つの列が必要です。

例:

上下レイアウトタイプ

Apple の公式 Web ページを参照してください。全画面表示と同様の Web ページはすべて上下レイアウトです。

実装方法 - 一般的なレイアウト方法

以上で、上記のレイアウトの実装方法をまとめます。誰もがよく知っている 2 つの主要なレイアウト方法について触れてみましょう。 聖杯レイアウトと双飛燕レイアウト。実際、この 2 つの方法は、中国の形のレイアウトで一般的に使用されます。 3 行 3 列 レイアウト用に設計されています。対応する変更を加えれば、T 字型レイアウトでも使用できます。これら 2 つの方法は、メイン部分が最初にロードされるの問題を十分に解決できます。

聖杯レイアウト

基本レイアウト:

<div id="header"></div><div id="main"></div><div id="footer"></div>

コードの主要部分に焦点を当てます

<style type="text/css">    #main {        overflow: hidden; /*修整由子元素浮动引起的高度塌陷问题*/        zoom: 1;/*低版本ie下:触发haslayout属性,修整由子元素浮动引起的高度塌陷问题*/        /*将主体部分左右侧预留出左右边栏大小的空白位置*/        padding: 0 300px 0 220px;     }    .m_content, .m_leftside, .m_rightside {        float: left;        /*目的是将左右侧边栏拉回*/        position: relative;    }    .m_content {        width: 100%;    }    .m_leftside {        width: 220px;        /*由于m_content占据了100%空间，所以需要用负的margin值将左边栏拉回*/        margin-left: -100%;        /*将主体部分预留的左侧补白区域填充满*/        left: -220px;    }    .m_rightside {        width: 300px;        /*用负的margin值将右边栏拉回自身大小个像素单位*/        margin-left: -300px;         /*将主体部分预留的右侧补白区域填充满*/        left: 300px;    }</style><div id="main">    <div class="m_content">这里是主体</div>    <div class="m_leftside">这是左侧边栏</div>    <div class="m_rightside">这是右侧边栏</div></div>

上記は、Holy Grail レイアウト方法の基本的な考え方は、フローティング プラス配置を使用することです。欠点は、コードがより複雑で、3 つの列と同じ高さの効果をシミュレートできないことです。

双飛燕配置

配置の効果は聖杯と同じですが、コードが異なります。 Shuangfeiyan レイアウトのコードはよりシンプルで、レイアウト用の div を追加するだけです。
基本的なレイアウトコードは同じです。

メイン部分:

<style>    #main {overflow: hidden;zoom: 1;}/*这里不需要加padding了*/    .m_content, .m_leftside, .m_rightside {float: left;}    .m_content {width: 100%;}    /*用左右边距将左右边栏的位置预留出来*/    .m_c_wrap {margin-left: 220px;margin-right:300px;}    .m_leftside {width: 220px;margin-left: -100%;}    .m_rightside {width: 300px;margin-left: -300px;}</style><div id="main">    <div class="m_content">        <!--正真的主体开始-->        <div class="m_c_wrap">这里是主体</div>    </div>    <div class="m_leftside">这是左侧边栏</div>    <div class="m_rightside">这是右侧边栏</div></div>

上記 2 つのレイアウト方法を理解すると、多くのレイアウトを簡単に記述することができます。ただし、複数列と同じ高さのレイアウトを扱うにはまだ少し不十分です。それでは、複数列の等高レイアウトの方法について説明しましょう。

複数列の等高レイアウト

ここでは、等高レイアウトの 8 つの方法を詳しくまとめています。実際のプロジェクトでよく使用される、または比較的単純な 3 つの方法について説明します。 。

たとえば、上記のようなレイアウトを作成する必要がある場合、側面にこのような小さな画像をキャプチャし、側面にラップされた要素の背景を並べて表示する必要があります。サイドバーの高さはコンテンツの視覚効果と一致します。

テーブル セルと同じ高さにする必要がある複数の列の表示属性を設定するだけで済みます。列の 1 つが適応幅を持ちたい場合は、親要素を表に表示し、幅は 100% です。

コードは次のとおりです。

<style>    #main {display: table;width: 100%}    .m_content {display: table-cell;width: auto;}    .m_rightside {display: table-cell;width: 200px;}</style><div id="main">    <div class="m_content"></div>    <div class="m_rightside"></div></div>

これは、少し前にインターネットで見た方法です。本質は、十分な大きさのパディングボトム値を列に追加することです。列をサポートするには、同じサイズの 負の margin-bottom 値を追加してコンテンツを後方に移動します。 overflow: hidden 属性をネガティブボックスに追加する必要があることに注意してください。

コードは次のとおりです。

<style>    #main {width: 100%;overflow: hidden;}    .m_content {width: auto;}    .m_rightside {width: 200px;padding-bottom: 10000px;margin-bottom: 10000px;}</style><div id="main">    <div class="m_content"></div>    <div class="m_rightside"></div></div>

CSS2 のレイアウト方法のまとめはここで終わりです。次に、CSS3 の新しいレイアウト方法を見てみましょう。

Flex Layout

書かれた説明は比較的抽象的であるため、ここではできるだけシンプルで一般的なものにするよう努めます。