Beispielcode für CSS-Stilklassen (Navigationsleiste, Paging, hierarchischer Selektor)

Der Inhalt dieses Artikels befasst sich mit dem Beispielcode von CSS-Stilklassen (Navigationsleiste, Paging, Ebenenauswahl). Ich hoffe, dass er für Sie hilfreich ist. helfen.

Navigationsleiste

Eine benutzerfreundliche Navigationsleiste ist für jede Website wichtig.
Mit CSS können Sie langweilige HTML-Menüs in schöne Navigationsleisten verwandeln.
Die Navigationsleiste benötigt Standard-HTML als Basis.
In unserem Beispiel wird die Navigationsleiste mithilfe einer Standard-HTML-Liste erstellt.
Eine Navigationsleiste ist im Grunde eine Liste von Links, daher ist die Verwendung der Elemente

🎜> Es gibt zwei Möglichkeiten, eine horizontale Navigationsleiste zu erstellen. Verwenden Sie Inline- oder Floating-Listenelemente. Beide Methoden sind gut, aber wenn Sie möchten, dass die Links die gleiche Größe haben, müssen Sie die Float-Methode verwenden.

nbsp;html>


    <meta>
    <title>导航栏</title>
    <style>
        div{
            width: 80%;
            margin: 0 auto;
            padding: 0;
        }
        ul{
            list-style-type: none;
        }
        li{
            display: inline-block;
            width: 24%;
            padding-top: 10px;
            padding-bottom: 10px;
            margin: 0 auto;
            text-align: center;
            background: #c0ffff;
        }

    </style>


<div>
    <ul>
        <li><a>CSS/HTML</a></li>
        <li>
<a>JavaScript</a> </li>
        <li>
<a> Python</a> </li>
        <li>
<a> C#</a> </li>

    </ul>
</div>

Seitenanzeige erstellen Webseiteninhalte bestehen oft aus mehr als einer Seite, dann sind es Seiten benötigt Springen

nbsp;html>


    <meta>
    <title>分页</title>
    <style>
        ul{
            list-style-type: none;
        }
        li{
            display: inline-block;
            width: 12%;
            padding-top: 10px;
            padding-bottom: 10px;
            margin: 0 auto;
            text-align: center;
            background: #c0ffff;
        }
        li:hover{
            background: salmon;
        }

    </style>


<div>
    <ul>
        <li>
<a>上一页</a> </li>
        <li>
<a>1</a> </li>
        <li>
<a>2</a> </li>
        <li>
<a>...</a> </li>
        <li>
<a>12</a> </li>
        <li>
<a>13</a> </li>
        <li>
<a>下一页</a> </li>


    </ul>

</div>

EbenenselektorDer Selektor wird verwendet, um Elemente mit bestimmten Attributen und Werten auszuwählen . Element.

[attribute=value]

rrree

Das obige ist der detaillierte Inhalt vonBeispielcode für CSS-Stilklassen (Navigationsleiste, Paging, hierarchischer Selektor). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!