ul リストタグデザインウェブページ複数列レイアウト

数日前、CSS で 3 列レイアウトを書いていたときに、突然この方法を思いつきました。このアイデアはちょっとクレイジーだと思います。何か間違っている点があれば、遠慮なく指摘してください。
3 列のレイアウトを記述する必要がある場合、通常は次の DIV レイアウトを使用します。

図1 DIVレイアウト
このようなネストされたメソッドを使用すると、コードエラーの可能性を大幅に減らすことができますが、同時に、このようなレイアウトは少し複雑で、その後のメンテナンスには少し不便です。ナビゲーションをレイアウトする場合、レイアウトに <ul> リストを使用する方法がよく使用されます。ナビゲーションは、複数列レイアウトとして説明できます。この場合、<ul> を使用してページの複数列レイアウトを実行することもできます。

図 2 DIV レイアウトこれは固定幅レイアウトなので、流動性は強くありません。流動性レイアウトはまだテストされていません。時間があるときにテストします。このレイアウトのコードは以下のとおりです。

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns="http://www.w3.org/1999/xhtml">
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" />
<title>複数列レイアウトに UL を使用する</title>
<スタイルタイプ="text/css">
* {マージン:0; パディング:0;}
体 {
幅:100%;
高さ:100%;
背景:#ddedfb;
}
#メインコンテンツ{
幅:600ピクセル;
マージン:10px 自動;
}
#ヘッダー、#フッター {
背景:#8AC7FA;
高さ:80px;
クリア:両方;
}
#フッター{
クリア:両方;
パディング上部:10px;
}
＃コンテンツ {
高さ:300px;
マージン:10px 自動;
}
#コンテンツul {
リストスタイル:なし;
高さ:100%;
}
#コンテンツ ul li {
幅:150ピクセル;
高さ:100%;
背景:#8AC7FA;
フロート:左;
}
#コンテンツ ul li#li2 {
幅:280ピクセル;
マージン:0 10px;
}
#content ul li#li2 ul li {
幅:270px;
高さ:140px;
マージン:5px;
背景:#0581F0;
}
</スタイル>
</head>
<本文>
<div id=”メインコンテンツ”>
<div id="header">これがヘッダーです</div>
<div id=”コンテンツ”>
<ul>
<li>これは左側です</li>
<li id=”li2″>
<ul>
<li>これは上部の真ん中です</li>
<li>これは下中央部分です</li>
</ul>
</li>
<li>こちらが右側です</li>
</ul>
</div>
<div id="footer">これが一番下です</div>
</div>
</本文>
</html>
このコードはIE7とFF3では正常に表示されます。他のブラウザはテストされていません。より良い方法があれば、遠慮なく提案してください。

<<: Dockerは元のタグのイメージの再タグ付けと削除を実装します

>>: jsはショッピングウェブサイトの商品の拡大鏡効果を実現します