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

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はショッピングウェブサイトの商品の拡大鏡効果を実現します

推薦する

mysql-joinsの具体的な使用方法

目次結合構文: 1. InnerJOIN: (内部結合) 2. LeftJOIN: (左結合) 3....

間違った MySQL コマンドをキャンセルしたい場合はどうすればいいですか?

間違った mysql コマンドを入力したのでキャンセルしたいです。どうすればいいですか? ctrl ...

ローカル Docker に Postgres 12 + pgadmin をインストールする方法 (Apple M1 をサポート)

目次導入Intel CPUをサポートApple M1のサポートテスト導入このプロジェクトでは最近、P...

VMware 15.5 に CentOS7 をインストールするためのグラフィック チュートリアル

1. VMware 15.5で新しい仮想マシンを作成する1. VMware を開き、ホームページで「...

Vue px to rem 構成の詳細な説明

目次方法1 1. 構成とインストールの手順:方法2方法3要約する方法1 1. 構成とインストールの手...

JavaScript でのカスタム スワイパー コンポーネントの詳細な説明

目次エフェクト表示コンポーネント設定ステップ1ステップ2ステップ3コンポーネントの使用ステップ1ステ...

Mysql論理アーキテクチャの詳細な説明

1. 全体的なアーキテクチャ図他のデータベースと比較すると、MySQL は、そのアーキテクチャがさま...

リクエスト数を制限するために Ajax 同時リクエストを実装するために js を使用するサンプル コード

問題の説明: 非同期リクエストの数が不確定な場合、数百の http リクエストが瞬時に発生したときに...

MySQL マスタースレーブ構築(複数のマスターと 1 つのスレーブ)の実装アイデアと手順

背景:最近、同社のプロジェクトは同時実行のプレッシャーに耐えられないようなので、最適化が差し迫ってい...

MySQL データベースのインデックスとトランザクション

目次1. 索引1.1 コンセプト1.2 機能1.3 索引作成の原則1.3.1 ディスクアクセス回数を...

ドメイン名を指定されたポートに転送するようにNginxを設定する方法

/usr/local/nginx/conf と入力する sudo cd /usr/local/ngi...

MySQLで論理SQLを置き換える際の落とし穴を回避する方法の詳細な説明

重複キーの置換と挿入の違い置換の使用法競合がない場合、挿入と同等となり、他の列のデフォルト値が使用さ...

JavaScript における一般的な配列操作

目次1. 連結() 2. 結合() 3. プッシュ() 5. シフト() 6. シフト解除() 7....

Homebrewを使用してMacにMySQLをインストールするときにログインできない問題を解決する

お使いのコンピュータが Mac の場合、homebrew を使用して MySQL をインストールする...

ツリー チャートの実装方法に関する Echarts チュートリアル

ツリーマップは主にツリーのようなデータ構造を視覚化するために使用され、特殊なタイプの階層です。これを...