HTML レイアウトガイド: リストの装飾に疑似要素を使用する方法-htmlチュートリアル-php.cn

HTML レイアウトガイド: リストの装飾に疑似要素を使用する方法

WBOY

リリース： 2023-10-18 11:00:17

オリジナル

1459 人が閲覧しました

HTML レイアウトガイド: リストの装飾に疑似要素を使用する方法

はじめに:

Web デザインでは、リストは一般的な要素の 1 つです。 . 一連の関連コンテンツを表示するために使用されます。ただし、単純なリストスタイルは退屈に見え、ユーザーの注意を引くことができない可能性があります。リストの魅力を高めるために、CSS 疑似要素を使用してリストを装飾できます。この記事では、擬似要素を使用してリストを美しくする方法を説明し、具体的なコード例を示します。

1. リストの基本スタイルの設計:

疑似要素を使用してリストを装飾する前に、まずリストの基本スタイルを設計します。次の構造の HTML 順序なしリストがあるとします。

<ul class="list">
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
</ul>

ログイン後にコピー

CSS を使用して、フォント、フォントサイズ、色、行の高さ、背景色などのリスト項目のスタイルを設定できます。例として単純なスタイルを示します。

.list {
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: #333;
  line-height: 1.5;
  background-color: #f5f5f5;
}

.list li {
  padding-left: 20px;
  margin-bottom: 10px;
}

ログイン後にコピー

上記のコードは、リストのフォントを Arial サンセリフ、フォントサイズを 14 ピクセル、色を #333 (黒)、行の高さを設定します。を1.5倍、背景色を#f5f5f5（ライトグレー）とします。各リスト項目の左マージンは 20 ピクセル、下マージンは 10 ピクセルです。

2. 疑似要素を使用してリストを装飾します:

箇条書きスタイルを設定します:

リストの箇条書きスタイルをカスタマイズするには、次のことができます。 use 擬似要素 ::marker が実装されています。たとえば、ドットを箇条書きとして使用したい場合は、次のコードを使用できます。

.list li::marker {
  content: "●";
  color: #ff0000;
}

ログイン後にコピー

上記のコードは、::marker 擬似メソッドを通じて各リスト項目に赤いドットを設定します。要素。サイズ、色、フォントなど、必要に応じて箇条書きスタイルをカスタマイズできます。

項目の前にアイコンを追加します:

各リスト項目の前に装飾としてアイコンを追加したい場合は、擬似要素 ## を使用できます。 #::満たす前に 。以下はサンプルコードです。

.list li::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url('icon.png');
  background-size: cover;
  margin-right: 10px;
}

ログイン後にコピー

上記のコードは、

::before 疑似要素を使用して、各リスト項目の前に幅と高さ 20 ピクセルのアイコンを追加します。 icon.png を使用する画像パスに置き換え、必要に応じてアイコンのサイズ、間隔、その他のスタイルを設定できます。

各リスト項目の後に装飾要素を追加したい場合は、擬似要素

::after # を使用できます。＃＃満たすため。以下はサンプルコードです。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:css;toolbar:false;'>.list li::after { content: ""; display: inline-block; width: 10px; height: 10px; background-color: #ff0000; border-radius: 50%; margin-left: 10px; }</pre><div class="contentsignin">ログイン後にコピー</div></div>上記のコードは、::after<p> 疑似要素を使用して、各リスト項目の後に直径 10 ピクセルの赤い点を追加します。サイズ、色、形など、ニーズに応じて装飾要素のスタイルを設定できます。 <code>結論:

疑似要素を使用してリストを装飾することは、リストをより魅力的でパーソナライズする簡単かつ効果的な方法です。箇条書きスタイルを設定したり、項目の前にアイコンを追加したり、項目を追加した後に装飾要素を追加したりすることで、さまざまなリストの装飾効果を実現できます。上記はサンプルコードの一部です。独自のリストスタイルを作成し、Web ページのユーザーエクスペリエンスを向上させるために、独自のニーズに応じてコードを変更および拡張できます。

参考リンク:

CSS 擬似要素: https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements