コンピュータープログラミング

箇条書きおよび番号付きリストHTML

注文し、順不同:HTMLの言語でリストの2種類があります。 その作成はほぼ同じです。 でも、タグは1つの文字によって異なります。 また、番号とマーカーの両方を含めることができるマルチレベルリストを作成することができます。

これらのリストは自由に変換することができます。 それはすべてあなたの想像力に依存します。 まず、我々は、Wordのような標準のリストを検討した後、私たちはそれらを改善し、すべての認識の外になります。

番号付きHTMLリスト

ニュートラル命じたHTMLのリストは、次のタグを使用して作成することができます。

<オル>

  • 最初の項目ます。リスト

  • 2番目の項目ます。リスト

  • 第三の項目リスト

    ここでは単純なリストは次のようになり

    基準によると、リストの各項目には、開閉タグの李内でなければなりません。 あなたは終了タグを入れていない場合でも、結果はまったく同じです。 ハンドラは非常に賢いです。 変換リストの間に、彼はオープニングタグを分析します。 彼は新しい

  • を見ている場合は、自動的にの前にそれらを置きます。

    このように、リストは以下に示すように行うことができます。

    しかし、専門家の視点から間違っています。

    箇条書き

    アンナンバード(またはマーカー)のリストはまったく同じです、唯一の代わりに、ULを書かれたOLタグ。

    箇条書き、唯一異なる文字、マーカーと呼ばれている-がない数字または文字。

    マルチレベル番号付きリストのHTML

    多くの人々は、このような機会に興味を持っています。 したがって、任意のHTML番号付きリストは、マルチレベルのことができることに留意すべきです。 追加の層は、同じかまたは標識することができます。

    上記の例で指定されたリストを作成するには、次のように記述する必要があります。

    最初の例とは対照的に、このコード内なお、追加属性タイプ。 彼のおかげで、あなたは両方の番号とマーカーリストの並べ替えのためのタイプを指定することができます。

    番については、アルファベットや数字のタイプを指定し、残りのケースのために - マーカーの種類。

    オプションのリストをソートします

    あなたは特別なHTMLタグを使用する場合は、番号付きリストは、あなたが望む任意の方法することができます。

    あなたは、テーブルから任意の値にtype属性を指定することができます。 や教室スタイルのCSSが必要なソートタイプでのlist-style-typeを指定します。

    値の翻訳は非常に簡単です。 英語の十分な基礎知識。 しかし、あなたは言葉「円」、「四角」など。N.を翻訳することができない場合でも、あなたは視覚的にあなたがタイプの属性でこれらの値を指定した結果であるかを見ることができます。

    番号付きリストについては、次のオプションを使用する必要があります。

    • 1 - アラビア数字。
    • -大文字の文字
    • A - 小文字。
    • I - 大文字のローマ数字。
    • I - 小文字のローマ数字。

    デフォルトでは、リストは常に一緒に使用される アラビア数字。 それは何も指定しない場合、=「1」と入力すると等価である、です。

    また、番号付きリストは、任意の位置で開始することができます。 デフォルト - 1の結論しかし、あなたが望むならあなたも百を開始することができます。 これを行うには、任意の値を持つstart属性を指定する必要があります。

    また、逆の順序で結論付けることができます。 これを行うには、逆転を書きます。

    リストを作成

    番号付きHTMLのリストには、すぐに、これは通常のリストではなく、Photoshopで作られた絵であることを推測することができないように美しく配置することができます。

    ここではリストの美しい例です。

    例から分かるように、要素自体の外観と番号を変更することが可能です。

    あなたはこのような定期的なリストを作成することができます。

    CSSスタイルでは、オールタグのデザインを指定する必要があります。 このスタイルファイルを使用するすべてのサイトで、この場合には、設定はすべてのリストに適用されることに注意してください。

    円形のチェックリストを使用して第一の実施例を考えてみましょう。 コード一覧に戻ります。 設定したクラス丸みのリストがあります。 それは、そのような美しさを作るために、いじくり回すには、このクラスの必要性と、それです。 あなたが望むように、クラスにあなたを呼び出します。

    今の正方形のデザインを考えます。

    スタイルは非常によく似ています。 違いは、最初のケースでは、CSSのオプションを使用して丸め要素が存在することです。

    ブラウザのサポート

    ないすべてのブラウザは、すべてのCSS属性をサポートすることを理解することが重要です。

    たとえば、あなたが途中で番号付きリストを作りたいです。 HTMLコードは同じになりますが、古いブラウザでの結果はかなり異なる場合があります。

    同じことは、ナンバリングの設計に適用されます。

    あなたが見ることができるようにハンドラは、あなたがそのような登録を行うことができ、新たな属性を把握していないので、IEの古いバージョンでは数字の周りの四角は、表示されませんでした。

    プロフェッショナルコーダは予想していないすべてのユーザーが最新のコンピュータを使用することを理解する必要があります。 すべてのWindows 7、8、10インストールされていない、まだWindows XP上で座っているとInternet Explorerの古いバージョンを使用するユーザーの割合があります。

    原則として、その要素を改善するために、ほぼすべての近代的なデザインがサポートされていません。 ユーザは、サイトのデザインに機能しなかったことを感じるだろう。 すべてが出て移動しました。 要素は、一緒に束ねています。 これを回避するには、すべてのオプションをカウントする必要があります。

    今日の市場でのシェアは少なくなってきているため、一部のウェブマスターは、彼らに目をつぶっています。 しかし、プロのために、それは商用サイトである場合は特に、すべての訪問者に感謝。

    すべてのに適した何かをするか、ブラウザのすべてのオプションを検討してください。

  • Similar articles

     

     

     

     

    Trending Now

     

     

     

     

    Newest

    Copyright © 2018 ja.atomiyme.com. Theme powered by WordPress.