WebページレイアウトへのCSSクラスの柔軟な適用

CSSを勉強したことのある友人は皆、CLASSを知っていると思いますが、Webページを作成するときにこれがDIVレイアウトコードを作成する方法です。明確かどうかわかりませんが、

クラスを 2 つのタイプに分けます。Layout クラスはスケルトンで、style クラスは服です。

たとえば

、次のように

レイアウトの列には

最初にその属性があります: : 左の列、幅、背景色、フォント色などです。

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}

また、2 列レイアウトを 3 列レイアウトに分類します。 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 .レイアウト クラスとスタイル クラスを結合し、次のようにコード内で参照します。

両方のクラスをスペースで区切って引用します。最初のクラスはレイアウト クラスで、2 番目のクラスはスタイル クラスです。特別に定義する必要がある場合は、この div を続けて引用できます。

として

記述することもできます。

この場合は、class="xxx hide" で直接参照できます

。

とても便利な場所ではないでしょうか。良い経験を書き留めて共有することもできます