DIVレイアウトコードの作り方はこんな感じです。明確かどうかはわかりませんが、見てみましょう。
私のアイデアは、将来的には標準パーツを使用して Web ページの DIV レイアウトを組み立てることができるということです
クラスをレイアウトクラスとスタイルクラスの2種類に分けます。レイアウトクラスは骨格、スタイルクラスは服です。
例えば：
たとえば、レイアウトの左側の列
まず、そのプロパティは、左列、幅、背景色、フォント色などです。
1．まず、.layout などのクラスを定義します。これは主にページ全体のサイズを制御するために使用されます。
.layout{width:98%;margin:0 auto;text-align:left;}
2.次に、3 つの基本レイアウト Class(l,m,r) が定義されます
.l{浮動小数点:左}
.m{幅:自動}
.r{浮動小数点:右}
また、2 列レイアウトを 3 列レイアウトに分類します。これは、3 列レイアウトでは、左右の列の幅が 0 の場合、3 列が 2 列になるためです。
基本的なレイアウトコードを書くときは、3カラム形式で書くのがベストです。
3.レイアウト クラスに対応して、幅、高さ、背景色などの必要なスタイル クラスを定義します。これらはすべてスタイル要素です。
.class_l{背景:#ff0;マージン右: -150px;幅:150px;}
.class_m{背景:#f00;マージン:0 140px 0 150px;}
.class_r{背景:#00f;マージン左: -140px;幅:140px;}
レイアウト クラスのセットは 1 つだけですが、多くのスタイル クラスを定義できます。
たとえば、中央の列に小さな 2 列のレイアウトを作成するとします。
別のスタイルクラスを定義できます
.mid_l{背景:#ff0;マージン右: -100px;幅:100px;}
.mid_m{背景:#f00;マージン:0 0 0 100px;}
4. レイアウト クラスとスタイル クラスを結合し、次のようにコード内で参照します。
<div class=l class＿l></div>
<div class=l mid_l></div>
両方のクラスをスペースで区切って引用します。最初のクラスはレイアウト クラスで、2 番目のクラスはスタイル クラスです。特別に定義する必要がある場合は、この div を続けて引用できます。定義するID。
他の一般的に使用されるスタイル クラスもユニバーサルとして記述することができます。たとえば、暗黙的に次のように定義できます。
.hide{表示:なし}
必要に応じて、class=xxx Hide を使用して参照すると、非常に便利です。
コード：