シリアル化されたディレクトリのリスト

今回はシリアル番号付きディレクトリリストをお届けします。シリアル番号付きディレクトリリストを実装する際の注意点は次のとおりです。 ドキュメントマニュアルを作成するとき、以下に示すように、リスト項目の前のシリアル番号を上位レベルのシリアル番号に追加する必要があることがよくあります。 ol> リスト、どのレベルも単一のシーケンス番号で始まります。以下に示すように:

(図 2)

図 1 の効果を達成するには、1 つの方法は、シリアル番号の部分をリストのコンテンツの一部として直接使用し、対応する HTML を挿入することです。バッチにシリアル番号を挿入します。

生成されたHTMLの結果はこんな感じ

<ol>  
  <li>1. 列表项  
    <ol>  
      <li>1.1. 列表项  
        <ol>  
          <li>1.1.1 列表项</li>  
          <li>1.1.2 列表项</li>  
          <li>1.1.3 列表项</li>  
        </ol>  
      </li>  
    </ol>  
  </li>  
</ol>

HTMLコードにシリアル番号を直接書き込んだり、jsを導入したくない場合は、

HTML属性とCSSから突破するしかありません。

残念ながら、

HTML 要素

属性は同様のインターフェースを提供しません。

ネットユーザーに促されて、CSSカウンターと呼ばれる概念があることを知りましたが、私は非常に無知です。
関連ドキュメントを検索すると、CSS ソリューションが利用可能になります。

HTML コードは次のとおりです:

<ol>  
  <li>列表项  
    <ol>  
      <li>列表项  
        <ol>  
          <li>列表项</li>  
          <li>列表项</li>  
          <li>列表项</li>  
        </ol>  
      </li>  
    </ol>  
  </li>  
</ol>

CSS コードは次のとおりです:

ol {padding:0 0 0 20px;margin:0;list-style:none;}  
li:before {color:#f00; font-family:Times New Roman;}  
li{counter-increment:a 1;}  
li:before{content:counter(a)". ";}  
li li{counter-increment:b 1;}  
li li:before{content:counter(a)"."counter(b)". ";}  
li li li{counter-increment:c 1;}  
li li li:before{content:counter(a)"."counter(b)"."counter(c)". ";}

エフェクトはこの記事の冒頭の画像 1 です。

しかし、この CSS は本当に醜いです。ディレクトリには複数のレベルがあるため、CSS を複数の層に記述する必要があります。明らかに、このようなものではありません。

関連ドキュメントを読み続け、カウンターリセット、カウンター()、カウンター()を明確にした後、問題は非常に単純であることがわかりました。

CSS コードは次のとおりです:

ol {padding:0 0 0 20px;margin:0;list-style:none;counter-reset:a;}  
li:before {counter-increment:a;content:counters(a,".")". ";}

このようにして、ネストされたリストのレベルがいくつであっても、カスケード シリアル番号を正しく表示でき、その効果はこの冒頭の図 1 に示すとおりです。記事。

以前は、カウンタインクリメントやその他の関連 CSS 機能は古い IE6/IE7 をサポートしていませんでしたが、IE8 以降は十分にサポートされていることに注意してください。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

src、link、@import の違いは何ですか?

以上がシリアル化されたディレクトリのリストの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。