Webページの制作記事の紹介：HTML CSSリスト要素の調査とアプリケーションUL、OL、DL。
1.それはナンセンスの序文と見なすことができますHTMLリスト要素（OL、UL、DLなど）は、現在のWebサイトの開発と制作で広く使用されていますが、ブラウザごとに気性は異なります。この記事では、これらのリスト要素の基本的な特性、さまざまなブラウザのさまざまな互換性の問題を分析し、いくつかの一般的なアプリケーションを紹介します。
初心者やCSSの経験がある人に役立つはずです。
2。HTMLで利用可能な要素をリストします1。順序付けられていないリスト：UL順序付けられていないリストは、最も一般的に使用されるリストです。次の図は、さまざまなブラウザでの順序付けられていないリストの表示を示しています。
デモページ
上記のように、異なるブラウザの下の順序付けられていないリストのデフォルト設定はわずかに異なります。もちろん、今日の実際のウェブサイトプロジェクトでは変更されていない順序付けられていないリストはほとんどありません。理由の1つは、CSSリセットであり、順序付けられていないリストのデフォルトのリストの箇条書き、マージン、またはパディングを削除しました。
順序付けられていないリストの特定のCSSプロパティの一部は、リストスタイルタイプ、リストスタイルのポジション、リストスタイルイメージです。これらのプロパティは、リストの箇条書きの種類、タグの場所、タグの代わりに写真の使用を設定します。これらの3つのプロパティは、リストスタイルとマージできます。
リストスタイルタイプの属性は、いくつかの異なる値に設定できます。次のチャートは、いくつかの値のページ効果を示しています。
ユーザーのブラウザとオペレーティングシステムに応じて、一部のリストスタイルの項目値は正しく表示されず、通常はデフォルトで小数値になります。順序付けられていないリスト自体のセマンティクスが存在しなくなったため、不要なリストを使用して値を増やすことはお勧めしません。
リストスタイルのポジションは、外部（デフォルト）に設定するか、リストタグの位置を設定できます。リストスタイルのイメージが設定されている場合、画像の位置にも影響します。
List-Style-Image属性は、順序付けられていないリストにカスタムユニークなパフォーマンスを提供できます。残念ながら、この方法を使用してIEにプロジェクト番号を追加することは多くのバグであるため、めったに使用されません。より良い解決策は、リストのLI要素に背景画像を追加し、それに応じて背景画像の位置を調整して、No-Reepeatに設定することです。 maxdesign.comでは、この方法は段階的な説明を通じて実証されており、すべてのブラウザーでうまく機能しています。
2。注文リスト：olリスト項目の各リスト項目の前で増分値が必要な場合（例：1、2、3など）、順序付けられたリストが使用されます。順序付けられたリストのリストタイプリストスタイルタイプは、順序付けられていないリストの下で設定できる任意の値に設定できます。ほとんどの場合、順序付けられたリストの前には増分値が付いているか、マークの前にはありません。順序付けられたリストを使用して、順序付けられていないリストと同様の動作を実現することはお勧めしません。このため、順序付けられたリスト自体のセマンティクスはもはや正しくありません。
3。定義リスト：DL定義リストは、定義タイトル（DT）と定義自体（DD）を含む定義されたリスト項目をマークするために使用されます。リスト項目を定義するときに正確に一致させる必要はありません。次のコードは、厳格なXHTMLの下で完全に合法です。
<dl> <dt>ワイヤレス音楽miguhui </dt> <dt> copenhagen Conference </dt> <dd> "10月包囲" </dd> </dl>
これにより、単一のDDの下で複数のDT、または単一のDTの下で複数のDDを使用できます。
リストの視覚的な表示を定義します。デフォルトでは、各ブラウザの表示は、下の図に示すものとほぼ同じです。
デモページ
上記の写真に対応するHTMLコードは次のとおりです。
<dl> <dt>タイトル</dt> <dd>ここに定義があります</dd> </dl> <dl> <dt>人気映画</dt> <dd> 10月の包囲</dd> <dd> taoling </dd> <dd> 3つの銃トピック</dt> <dd>株式市場</dd> <dd>住宅価格</dd> <dd>新年の日</dd> <dd> cao cao's Tomb </dd> </dl> 4。
技術的には、<menu>および<dir>要素もHTMLリストと呼ぶことができますが、xhtmlで時代遅れであるため、ここでは詳細に説明しません。
5。HTML5のリストHTMLでは、順序付けられていないリストは本質的に同じままですが、今ではリストと呼ばれるように思われ、新しい要素を使用してリストをナビゲーションとしてラップします。
OL要素にはわずかな変更があり、2つの新しいプロパティが得られます。リストが上昇するか落ちるかを示すためのブール値です。 STARTは、順序付けられたリストの開始点を宣言する整数です。
さらに、<図>および<詳細>要素が追加され、<dt>および<dd>要素を含む子要素があります。
HTML5の詳細については、Taobao KongyanのHTML5とCSS3 [Baibiao Milk Tea Gang]の公開に関するこの記事を参照してください。さらに、ここをクリックしてオンラインPPTを表示することもできます。
3。ブラウザの違い以下は、いくつかの一般的で明らかなブラウザの違いです。
1.表示後：要素をリストするブロックInternet Explorer 8、Opera 9、Chrome、Firefox 2＆3、およびSafariの下で、Display：Blockを追加すると、順序付けられたまたは並べ替えられていないリストのITEM NUMERのLI要素が消えます。
しかし、IE6およびIE7の下では、ディスプレイを追加します。ブロック弾丸はまだ存在します。
デモページ
2。フロートを追加：左に項目をリストしますIE6およびIE7の下で、FLOATを追加します：リストに残してください（他のスタイル）は、弾丸（またはアイテム番号）が消えている間にリスト項目を水平に整列させます。下の図に示すように、IE7ブラウザからカットされています
IE8および他のすべてのブラウザの下では、リスト項目は水平に揃っていますが、弾丸（またはプロジェクト番号）がまだ表示されています。
デモページ
リストアイテムが浮かんでいる場合、別の重要なポイントを覚えておく必要があります。つまり、内部に浮かぶ要素のみがある場合、リストコンテナ（UL要素）が死亡します。これは、すべてのブラウザで同じように発生します。オーバーフローの追加：Hiddenは、この問題の解決策の1つです。
ほぼ同じフロートを達成するために：さまざまなブラウザでの左効果では、最良の方法は表示：インラインを使用することです。
3。IEの下に順序付けられたレイアウトリストがありますIE6およびIE7の下では、順序付きリストのリスト項目にレイアウトがある場合、次の図に示すように、順序付けリストの値は増加せず、1として表示されます。
デモページ
Haslayoutプロパティを直接設定することはできませんが、要素が幅、高さ、浮動、絶対的な位置付け、待機がHaslayoutを変更するように設定されている場合。
4。IE6およびIE7の下のパディングとマージンほとんどのブラウザでは、弾丸やプロジェクト番号を削除してコンテンツの左側を整列するために、左パディングを0に設定する必要がありますが、これはIE6とIE7で動作しません。 IE6と7では、左マージンを0に設定して交換する必要があります。以下の写真を参照してください：
デモページ
5.ブラウザに一貫したリストスタイルを実装しますさまざまなブラウザでリストスタイルを処理するときに問題を回避するために、最良の方法は上記のCSSリセットを使用することです。 CSSリセットは、ブラウザのほぼすべてのデフォルト設定の違いを設定し、すべてのブラウザが同じベースで動作できるようにすることができます。いくつかのスタイルにはまだ違いがありますが、それらは困難なポイントとして扱われません。
また、前述のように、リストスタイルのイメージプロパティを完全に使用しないようにすることをお勧めします。代わりに、代わりに背景を設定し、クロスブラウザーのカスタムシンボリック回避策を装備しやすい順序のないリストです。
4.いくつかの例とアプリケーション1。ナビゲーションバー順序付けられていないリストの最も一般的な使用は、水平であろうと垂直であろうと、ナビゲーションバーです。テーブルベースのレイアウトは時代遅れになっているため、以下の理由により、ナビゲーション要素の基礎として広く使用されています。
•順序付けられていないリストは、ブロックレベルの要素に属し、バックグラウンドやその他のグラフィック拡張機能を適用するために外部を除去する必要はありません。
•スタイルが無効になっている場合、リストスタイルは静かに格下げされ、元のスタイルを維持します。これにより、ナビゲーションアイテムがページ上の他のコンテンツとは異なることが保証されます。
•順序付けられていないリストは単なるリストではなく、<a>タグなどの要素を追加しますが、追加の<li>要素は、ナビゲーションバーをより柔軟な形式で表現します。
•ナビゲーションはリストやサブリストに分かれており、ユーザーがナビゲーションバー全体を簡単にスキップできる補助テクノロジー（スクリーンリーダーなど）を使用できます。
例：JQueryを使用して実装されたLavalamp Special Effectメニュー
2。[プルダウン]メニューたとえば、私がしばらく前に作成したドロップダウンメニューの例：jQueryはslidetoggleを使用して垂直ドロップダウンメニューを実装しています
効果デモ
3。写真ディスプレイHTMLリストタグUL、Liは、ナビゲーションバーで上記と同じ理由で写真リストを表示する効果的な方法を提供します。以下は、HTMLタグに基づいたいくつかのフォトギャラリーまたはフォトディスプレイコンポーネントです。
jcarousel
JCarouselフォトスイッチングトランスミッションJQueryプラグインは、順序付けられていないリストを使用して、カスタマイズ可能なjQuery関数を提供し、さまざまな方法で送信効果を表示できます。このプラグインを中国語に翻訳しました。ここをクリックして厳しい：JCarousel Chinese Demo Homepage
innerfade - jquery
InnerFadeプラグインを使用すると、リスト形式のコンテンツがフェードインとフェードアウトしてディスプレイを切り替えたり、表示を切り替えたりすることができます。コンテンツは、テキスト、写真などを使用できます。さまざまなタグ、リストタグ、UL、LI、Div、およびPタグをサポートします。
ニュースやアナウンスコンテンツの自動ランダムスイッチングディスプレイ、または画像スライドショーの再生表示などを簡単に実現できます。次の図は、画像スライドスイッチングの遷移フェーズを示しています。
このプラグインデモをクリックするのは難しいです：innerfadeデモページ
4.コードが強調表示されます多くのブログやチュートリアルWebサイトには、次のスクリーンショットに示すように、事前要素またはテキストエレクトを順序リストに変換するJavaScriptが強調表示されています。プラグインを強調する有名なコードの1つは、Alex GorbatchevのSyntaxhighlighterです。
以下は、強調表示されたプラグインに似た効果のスクリーンショットです。
ここをクリックして効果をプレビューできます（デモページにはjQuery Cookieプラグインコードが表示されます）。
5。ブログのコメントこれらのWordPress駆動型サイトを含むブログのコメントは、注文されたリストに組み込まれ、非常に柔軟なスタイリングオプションを提供し、コメントネスティングの基礎を築きます。次の写真は、昨日Tencent CDC TDがリリースしたWeb Interaction Design Grey 8アプリケーション記事のMr.Grayのストーリーのコメントセクションのスクリーンショットです。
6。製品リスト最も典型的な代表者は、Taobaoのホームページの赤ちゃんカテゴリコラムに数千の製品カテゴリの表示です。
スクリーンショットからわかるように、このカテゴリの目的は、DL、DT、およびDD定義リストを使用して表示されます。
7。その他マルチイメージアップロードのための進行状況バー、CSSステップメニュー、オーバーラップメニューなど、リスト要素には他にも多くのアプリケーションがあります。ここでは一つずつ見せません。
5。不可解な要約HTMLタグ要素はレンガとタイルであり、非常に普通に見えますが、優れたデザイナーや優秀な労働者に関しては、無限の可能性と魅力を発揮するため、カラフルなインターネットがあります。リスト要素にも同じことが言えます。この記事で議論するためのさらに多くの用途とテクニックがありますが、この記事に示されていることのいくつかは、HTMLのリストタグ要素の概要を完全に理解し、リストのようなレンガのある美しいインターネットビルを建設するのに役立ちます。
6。参照読み取りと拡張読み取り•リストマティック
•CSS設計：テイミングリスト
•w3schoolsのCSSリスト
•定義リスト - 誤用または誤解されていますか？
•CSSスタイルのリスト：20+デモ、チュートリアル、ベストプラクティス
•SitePointのHTMLリファレンスに要素をリストします