CSS カスタム リスト項目リスト スタイルの使用の概要

今日は企業の採用ページを作成しました。午前中にデザイン画を完成させ、午後からは組版に入ります。このページは以前作成したタレント事務所の採用ページをコピーしたもので、ナビゲーションバーとバナーがすぐに出てきました。このコンテンツのいくつかの場所でリストを使用していますが、もちろん

• タグを使用する必要があります。リスト項目（小さな点）は小さな緑色の四角形になります。このとき、リスト項目をカスタマイズするための CSS プロパティがあればと考えました。 知る必要はありません、それは本当に存在します。 list-style では、list-style-type、list-style-position、list-style-image を定義できます。これらの 3 つの属性は一緒に記述することができます。 list-style-image はまさにカスタム リスト項目パターンです。

  定義を始める前に、次の 2 つの問題に遭遇しました。 1.

• タグのデフォルト スタイルの小さなドットがありません。確認したところ、初期化スタイルシート
  で list-style: none が定義されており、これによりデフォルトの小さなドットが削除されていることがわかりました。次に、
  のリスト スタイルを定義する必要があります。 2. list-style-position には、insite と outsite の 2 つのオプション値があります。 insite (リスト項目が行の内側) を使用する場合は問題ありませんが、outsite (リスト項目が行の外側) を使用すると、小さなドットが消えます。初期化スタイルシートで

  が overflow: hidden と定義されており、

  からはみ出した部分が切り取られることがわかります。

  は

  に含まれているため、

  はオーバーフローしたリスト項目を切り取ります。ここで表示されるデフォルトとして

  を定義するだけです。

  リストパターンのカスタマイズを開始できます。まずPSからパターンを切り取って所定の場所に保存します。 list-style-image: url(i/icon.gif) を定義します。問題は、パターンがテキストの水平方向の中央に配置されていないことです。 Baidu、日本

  • は固定の高さを設定する必要がありますが、設定しても無駄です。慎重に調べた結果、前任者はすでにカスタム パターンを使用した経験があることがわかりました。 オプション 1、リスト項目パターンを切り取るときに下部に空白スペースを含める このソリューションでは、パターンの空白スペースがパターンと一致していることを確認する必要があります。ページの背景色。 フォントが大きくなったり小さくなったりして再利用できないため、この解決策はエレガントではないと思います。 オプション 2、背景属性を使用して項目リストのパターンをカスタマイズします。 このソリューションはパターンの位置を柔軟に制御でき、テキストとパターンの間の間隔も簡単に制御できます（間隔を制御するためにパディングを使用するようにとは言いません）。要約すると、初期化スタイル シートで
  • のデフォルトのドットを削除することは実際には意味があります。まず、ほとんどの場合、リスト項目は使用されません。次に、list-style を使用してリスト項目をカスタマイズするのは、制御が非常に困難です。

以上がCSS カスタム リスト項目リスト スタイルの使用の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。