(転送) DIV CSS レイアウト チュートリアル: ul と li を使用してテーブル format_html/css_WEB-ITnose を実装する

まず作り方を分析しましょう: li は固定の幅と高さ (セル) を持ち、ul で li を浮動小数点に設定します。ul の幅が十分でない場合、li は自動的に新しい行を開始します (渡される列の数)たとえば、行に 4 つの列があり、1 つの列の幅が 100px の場合、ul の幅は 400px に一定のマージンを加えたものになります。これにより、テーブルと同様の効果が得られます。または、UL+LI を使用してテーブルの効果をシミュレートします。 HTML コードの作成を開始します:

ソース コードの例 [www.52css.com]

最初の列 ; 4 列目 ;li>データ 1-4
• データ 2-1
データ 3-4 & lt;/リ & gt;
& lt; データ 4-2 & lt; データ 4-3 < ;/li>これら 4 つの項目はテーブルのヘッダーであるため、テーブル データとは異なる必要があります。したがって、制御を容易にするために別のクラスが与えられます。以下で CSS コードの記述を開始します。




ソース コードの例 [www.52css.com]

*{
margin: 0;
font-size: 12px;
COLOR:#000 ;
}


CSS全体のレイアウト宣言、マージンはゼロ、パディングはゼロ、文字サイズは12px、文字色は黒 #000;



ソースコード例 [www.52css.com]

#biaoge {
width:405px; margin:50px auto; }


ID が biaoge の ul の CSS コーディング、幅は 405px (1 列 100px*4 列 + li margins)、上下のマージンは 50px、左右の余白は自動的に水平方向の中央揃えになります。
ソースコードの例 [www.52css.com]


#biaoge li,#biaoge li.biaotou {
width:100px;
line-height: 30px;
テキスト整列: 中央;
マージン左: 1px;


各リスト項目 li (つまりセル) のスタイルを定義し、リスト項目のデフォルトのマークを None に設定します。幅と高さはそれぞれ 100 ピクセルと 30 ピクセルです。テキストを li の垂直方向の中央に配置するには、行の高さを設定します。を 30px に変更し、テキストを水平方向に中央揃えにします。これを左にフローティングに設定すると、左マージンと下マージンが両方とも 1px になり、単純な表の線の効果が得られます。 (テーブル行がボーダーとしてデザインされている場合、多くの CSS HACK は制御や調整が難しく、特に FF ではこれは非常に異常です。このタイプの ul+li テーブル行の定義を実装するためにボーダーを使用することはお勧めできません) !) 背景色をライトグレー #ccc に設定します。



ソースコードの例 [www.52css.com]

#biaoge li.biaotou {
background:#999;
}


4 つの「ヘッダー」li の背景色をダークグレー #999 に設定します、他のリと区別するため。スタイル定義は基本的に完了しました。色の点で他の美化を行うこともできます。

最後に、表形式のデータはテーブルを使用して実装するのが最適であることを再度宣言します。ただし、適切な状況下では、テーブルをまったく使用しないことにこだわる必要はありません。テーブルのようなレイアウトを実現します。