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

推薦する

Zookeeper 不正アクセス テストの問題

目次序文Zookeeper サービスのオープンを検出情報を入手する接続テスト接続先修理計画参照する序...

Linux は n 日前のログとサンプルコマンドを自動的に削除します

1. ファイル削除コマンド:対応するディレクトリを検索します -mtime + 日数 -name &...

jQueryは検証コード送信のコントロールボタンを無効にする機能を実装します

必要な効果: 確認コードを送信するためにクリックした後、ボタンは無効になり、5 秒後に無効解除されま...

HTMLの基本概念の詳細な説明

HTMLとは何ですか? HTML は Web ページを記述するために使用される言語です。 •HTML...

MySQL EXPLAIN ステートメントの使用例

目次1. 使用方法2. 出力結果1.id 2.選択タイプ3.表4.パーティション5.タイプ6.可能な...

バックエンドの権限に基づいてナビゲーション メニューを動的に生成する Vue-router のサンプル コード

目次js の1. グローバルガードを登録する2. Vuex 状態管理グローバルキャッシュルート3. ...

threejs でリアルタイムポリゴン屈折を実装する方法

目次序文ステップ1: セットアップと前方屈折ステップ2: 反射とフレネル方程式ステップ3: 多面屈折...

Linux bzip2 コマンドの使用

1. コマンドの紹介bzip2 は、ファイルの圧縮と解凍に使用されます。これは、Linux システム...

SQL文の最適化の一般的な手順の詳細な説明

序文この記事では主に、SQL ステートメントの最適化の一般的な手順について説明します。これは、参考と...

nginxリバースプロキシによるセッション障害の問題の解決策

同僚から助けを求められました。バックエンド システムへのログインは成功したものの、システムには正常に...

VUEプロジェクトでXSS攻撃に遭遇した実体験

目次序文原因を発見するカスタムフィルタリングルール要約する序文インターネットの急速な発展に伴い、情報...

CSS 動的高さ遷移アニメーション効果の実装

この質問は、Nuggets のメッセージから生まれました。友人が、次のコードの高さ遷移アニメーション...

MySQL の WriteSet 並列レプリケーションの簡単な分析

【歴史的背景】私は 3 年間 MySQL-DBA として働いてきましたが、MySQL が「基本的に利...

MySQLサーバのスレッド数を表示する方法の詳細な説明

この記事では、例を使用して、MySQL サーバーのスレッド数を表示する方法について説明します。ご参考...