CLASS を組み合わせて Web ページレイアウトを完成させる style

ホームページ

ウェブフロントエンド

CSSチュートリアル

CLASS を組み合わせて Web ページレイアウトを完成させる style_CSS/HTML

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 12:11 PM

DIV レイアウトコードの作成方法は次のとおりです。明確かどうかはわかりませんが、一緒に見てみましょう
将来的には、標準パーツを使用して Web ページの DIV レイアウトを組み立てる

Iクラスをレイアウトクラス、スタイルクラスの 2 種類に分けます。レイアウトクラスはスケルトン、スタイルクラスは服です
例:
たとえば、レイアウトの左の列
まず、その属性左の列、幅、背景色、フォント色などです。

1.まず、.layout などのクラスを定義します。これは主にページ全体のサイズを制御するために使用されます
.layout{width:98%;margin:0 auto;text-align:left;}

2.次に 3 つの基本レイアウト Class(l,m,r)
.l{float:left}
.m{width:auto}
.r{float:right}
を入れました。 3 列レイアウトでは、左右の列の幅がそれぞれ 0 の場合、3 列が 2 列になるため、列レイアウトは 3 列レイアウトにも分類されます。
基本的なレイアウトのコードを書くときは、3カラム形式で書くのがベストです。

３．レイアウトクラスに対応して、幅、高さ、背景色などの必要なスタイルクラスを定義します。これらはすべてスタイル要素
.class_l{background:#ff0;margin-right: -150px;width:150px; です。 }
.class_m{background:#f00;margin:0 140px 0 150px;}
.class_r{background:#00f;margin-left: -140px;width:140px;}

そこレイアウトクラスのセットは 1 つだけですが、多くのスタイルクラスを定義できます。
たとえば、中央の列に小さな 2 列のレイアウトを作成したい場合
、別のスタイルクラスを定義できます
。 mid_l{background:#ff0;margin-right: - 100px;width:100px;}
.mid_m{background:#f00;margin:0 0 0 100px;}

4. レイアウトクラスを結合します。とスタイルクラスを指定し、次のようにコード内で参照します

両方のクラスを引用符で囲み、スペースで区切ります。前者はレイアウトクラス、後者はスタイルクラスで、特別に定義する必要がある場合は、後でもスペース引用符を使用できます。 div 定義する ID。

その他の一般的に使用されるスタイルクラス。たとえば、暗黙的に
.hide{display:none}
として定義することもできます。必要に応じて、class="xxx Hide" を使用して参照できるため、非常に便利です。

このウェブサイトの声明

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