HTML リストのスタイル

• リストは、データをフォーマットされた方法で配置するための一般的な要件です。たとえば、ホテルのピザ メニューのコンテンツを表示する必要がある Web ページを作成した場合、おそらく HTML リスト スタイルになります。明確かつ個別に表示されます。
• 他のケースとしては、クラスの成績優秀者に含まれる生徒の一連のランクを設定することが考えられます。このコンテキストでは、要件は、ランク 1 の学生を最上位に配置し、その他の学生をランキングの昇順でその下に配置することです。そのためには、これを並べ替えられたリストにフォーマットする必要があります。
• もう 1 つのタイプは、JavaScript と HTML を一緒に使用して作成できるカスタム リストです。このリストでは、オブジェクト内のダイナミクスも設定でき、リストの外観をカスタマイズすることもできます。

HTML のさまざまなリスト スタイル

以下では、さまざまな HTML リスト スタイルについて説明します。

1) 順序なしリスト

ここでは、コンテンツの表示順序は気にする必要はありません。必要なのは、HTML ページで適切にフォーマットされた明確な方法でユーザーの目の前に配置されるように、項目を適切に配置することだけです。

HTML 言語にはこれらのリストを処理する 2 つのタグがあり、これらのタグだけを使用してナビゲーション バーと垂直サイドバーを作成できる可能性があります。

1. : これは順序なしリストを表します。何かをランク付けする必要がないとき、またはランダムな順序で配置する必要がないときは、このタグが組み込まれます。
3. : これはリスト項目、つまり順序​​なしリスト、つまり
   の下に配置される項目のセットを表します。タグは
   • の中に表示されます。タグ。これらのマークアップでマークされた項目には、先頭にいくつかの黒丸または丸が自動的に表示されます。これらは基本的な HTML 機能です。

次に、

のコードを見てみましょう。そして

スニペットの例 –

コード:

 HTML Lists 

<h2> list of pizzas <h2>
<ul>
<li style="color:red"> farmhouse </li>
<li style="color:green"> peppy paneer </li>
<li style="color:blue"> onion pizza </li>
</ul>

</h2>
</h2>

出力:

2) 順序付きリスト

次に、クラス内でのランクに基づいて生徒を順序付けする場合を見ていきます。これは、

を使用して並べ替えて表示されます。 HTML のタグには複数の
1. が含まれます。タグにはリスト項目が含まれます。
   : このタグは順序付きリストを設定するために使用され、すべての要素がその内側の
   1. 内に配置されます。タグ。
   2. ;タグについては上で説明しました。

      この場合、例も見てみましょう。これも上記と同じように保存する必要があります。

      コード:

       HTML Lists 
      
      <h2> list of students <h2>
      <ol>
      <li style="color:red"> John </li>
      <li style="color:green"> Harris </li>
      <li style="color:blue"> Plunket </li>
      </ol>
      
      </h2>
      </h2>

      出力/HTML ページ

      

      ここで、いくつかの CSS プロパティを HTML ページに追加するだけでこれらのリストをカスタマイズしたり適切にフォーマットしたりできる、これらのバリエーションをいくつか見てみましょう。これにより、ページの見栄えが良くなります。

      1. 順序なしリストでは、次のプロパティを指定できます –
      2. List-style-type – ディスク、円、正方形、またはなしのいずれかになります。したがって、ここで何も選択しないと、順序なしリスト項目に表示された円は表示されなくなります。そうしましょう。

      例 –

      コード:

       HTML Lists 
      
      <h2> list of students <h2>
      <ul style="list-style-type:none">
      <li style="color:red"> John </li>
      <li style="color:green"> Harris </li>
      <li style="color:blue"> Plunket </li>
      </ul>
      
      </h2>
      </h2>

      出力/HTML ページ –

      

      つまり、丸の箇条書きはもう存在しません。上記のオプションを使用してカスタマイズできます。

      同様に、順序リストの値を数字で表示するか、ローマ字またはアルファベットで表示するかを選択する規定があります。

      でプロパティ タイプを設定できます。タグは同じもので、型は次の値を取ることができます。

      タイプ: 「1」、「A」、「a」、「I」、「i.」

      同じコードの例を見てみましょう –

      コード:

       HTML Lists 
      
      <h2> list of students <h2>
      <ol type="i">
      <li style="color:red"> John </li>
      <li style="color:green"> Harris </li>
      <li style="color:blue"> Plunket </li>
      </ol>
      
      </h2>
      </h2>

      出力/HTML ページ –

      

      同様に、説明を配置する必要がある項目を定義できる説明リストもあります。いくつかのキーワードに対していくつかの定義を配置する必要があるページを作成しているとします。その後、説明リストを選択できます。

      タグ

      同様の処理を行うために次のタグがあります。

       

      – このタグは説明リストを定義します
      – このタグには説明用語が表示されます
      – this tag carries the description of each term

      Example –

      Code:

       HTML Lists 
      
      <h2> list of students <h2>
      <dl>
      <dt style="color:red"> Docker </dt>
      <dd> -: this is used to make environment portable application containers </dd>
      <br>
      <dt style="color:green"> Kubernetes </dt>
      <dd> -: this is an orchestrator for those containers make by docker </dd>
      </dl>
      
      </h2>
      </h2>

      Output/HTML page –

      

      You can also define the start property in the ordered lists in

      tag, which tells from where the count starts. Let’s see an example of the same –

      Code:

       HTML Lists 
      
      <h2> list of students <h2>
      <ol type="1" start="10">
      <li style="color:red"> John </li>
      <li style="color:green"> Harris </li>
      <li style="color:blue"> Plunket </li>
      >
      
      </ol>
      </h2>
      </h2>

      Output:

      

      Conclusion

      So we saw various lists in which we can place data; this data can be rendered from the model to view using javascript frameworks; what we have shown is a static page, and it can be made dynamic with JS. These lists can be formatted with bootstrap to make them look like navbars or sidebars too.

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