CSSを使用してリストをさらに処理する

3498 ワード

CSSブロックモデルがリストにどのように影響するか

リストに関連する特定のスタイルには、list-style-image(リストアイテムタグとして画像を配置するために使用される)、list-style-position(リストアイテムタグをどこに配置するかを示す)、list-style-type(リストアイテムタグ自体のタイプ)があります.このようなスタイル制御リストとリスト項目の構造により、margin、padding、color、background-colorスタイルを用いてリストを用いてより具体的な表示効果を実現することができる.




    LIST TEST
    


    List Test
    
        Item #1
        Item #2
        Item #3

無秩序なリスト自体に青色の背景、黒い枠線、100 pxの特定の幅を提供し、リスト項目には灰色の背景と黄色の枠線があり、リスト項目のテキストとインジケータは黒い.リストのタイプにかかわらず、左のデフォルトのチャージは同じです.スタイルシートにlist-style-type:noneを追加する場合.リスト・アイテム・インジケータのないリストを作成すると、入力が同じになります.

リスト・アイテム・インディケータの配置

List-style-positionプロパティのデフォルト値はoutsideであり、

ラベルペアによって作成されたボックスの外側のテキストの左側にプロジェクトシンボル、番号、およびその他の識別子が保持されることを意味します.テキストがリスト項目内で改行されると、そのボックス内で改行され、要素の左枠線に左揃えされます.ただし、list-style-positionの値がinsideの場合、インジケータは

ラベルペアによって作成されたブロック内に位置する.リスト・アイテム・インディケータはその後、さらにインデントされるだけでなく、テキストは各リスト・アイテム・インディケータの下で改行されます.

CSSによる画像マッピングの作成




    CSS Image Example
    


    
        
            I LOVE YOU
            NICE TO MEET YOU
            NICE MEETING YOU
            DO YOU LOVE ME
            I WANT TO MARRY YOU

text-indent:-1000em;テキストが永遠に表示されないことを保証します.

#theImg a:hover{
            border: 4px solid #ffffff;
        }

ユーザーのカーソルが接続を含むリスト項目にぶら下がっている場合、スタイルシートの上の項目のため、4 pxの純粋な白い枠線が表示されます.

CSSが外部アートフォントを導入

vueプロジェクトのスタイルロード順序