一般的な CSS Web サイトのレイアウトの例_JavaScript スキル

1 行 1 列
以下は引用部分です:
body { margin: 0px; text-align: center; :auto; width: 400px; width: 370px; }

2 行 1 列
以下は引用部分です。
#content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px;}
#content-end {margin-left:auto; auto; width: 400px; width: 370px ;}

3 行 1 列
以下は引用部分です。 ; }
#content-top { margin-left :auto; margin-right:auto; 幅: 400px; }
#content-mid { margin-left:auto; ; 幅: 400px; 幅: 370px; }
#content-end { margin-left:auto; width: 400px; width: 370px;
以下は引用部分です:
#bodycenter { width : 700px;margin-right: auto; margin-left: auto;overflow: auto; }
#bodycenter #dv1 {float: left;width : 280px;}
#bodycenter #dv2 {float: right;width : 410px;}

2 行 2 列
以下は引用部分です:
#header{ width:マージン右: 自動; マージン左: 自動; }
#bodycenter { 幅: 700 ピクセル; マージン左: 自動; } bodycenter #dv1 { float: left; width: 280px;}
#bodycenter #dv2 { float: right;width: 410px;}

3 行 2 列
以下は引用部分です:
#header{ width: 700px; margin-right: auto; margin-left: auto; }
#bodycenter {width: 700px; margin-left: auto; #bodycenter #dv1 { float: left;width: 280px;}
#bodycenter #dv2 { float : right; width: 410px;}
#footer{ width: 700px; : auto; overflow: auto; }

単一行と 3 列
絶対位置
以下は引用部分です。 0px; 幅: 120px; }
#middle {マージン: 20px 190px 20px 190px; }
#right { 位置: 絶対; 上: 0px; }

float Positioning one
xhtml:
以下は引用部分です:





これは最初の列です


これは 2 番目の列です

3 番目の列はこちらです

CSS:

以下は引用スニペットです:
#wrap{ width:100%; height:auto;}

#column{ float:left width:60%; ;}

#column1{ float:left; width:30%;}
#column2{ float:right; width:30%;}

#column3{ float:right;
.clear{ clear:both;}

float Positioning two
xhtml:
以下は引用です スニペット:



これはメインコンテンツ。

これは左側のサイドバーです。

これは右側のサイドバーです。

CSS:
以下は引用符で囲まれたフラグメントです:
body {margin: 0;padding-left: 200px;padding-right: 190px;min-width: 240px;}
。列 { 位置: 相対; 浮動小数点数: 左;}
#center {幅: 100%;}
#left {幅: 180px; 右: 240px; マージン左: -100%;}
# right { width: 130px;margin-right: -100%;}

2 行 3 列
xhtml:
以下は引用部分です:

これは上の行

これは最初の列です

これは 2 番目の列です

3 番目の列は次のとおりです

CSS:
以下は引用部分です:
#header{width:100%; height:auto;}
#wrap{ width:100%; height:auto;} :60%;}
#column1{ float:left; width:30%;}
#column2{ float:right; width:30%;}
#column3{ float:right; %;}
.clear {clear:both;}

3 行 3 列
xhtml:
以下は引用部分です:

これが先頭ですrow

これは最初の列です

これは 2 番目の列です

これは 3 番目の列です

これは最後の行です

CSS:
以下は引用符で囲まれた部分です:
#header{width:100%; height:auto;}
#wrap{ width:100%; height:auto; ;}
#column{ float:left; width:60%;}
#column1{ float:left; width:30%;}
#column2{ float:right;
#column3{ float:right; width:40%; }
.clear{ clear:both;}
#footer{width:100%; height:auto;}