Heim > Artikel > Web-Frontend > Wie verwende ich CSS, um verschiedene Paging-Effekte unten auf der Seite anzuzeigen? (verschiedene Stilbeispiele)

Wie verwende ich CSS, um verschiedene Paging-Effekte unten auf der Seite anzuzeigen? (verschiedene Stilbeispiele)

藏色散人Original: 2018-08-11 11:37:553012Durchsuche

Die meisten Websites bestehen aus mehreren Seiten, selten aus einer einzelnen Seite. So viele Seiten erfordern die Paging-Funktion. In diesem Artikel werden Ihnen die spezifischen Implementierungsvorgänge der CSS-Paging-Einstellungen und des CSS-Paging-Codes vorgestellt.

1. Ein konkretes Beispiel für einen einfachen CSS-Paging-Code ist wie folgt:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css分页样式代码测试</title>
    <style>
        ul.pagination {
            display: inline-block;
            padding: 0;
            margin: 0;
        }
        ul.pagination li {display: inline;}

        ul.pagination li a {
            color: black;
            float: left;
            padding: 8px 16px;
            text-decoration: none;
        }
    </style>
</head>
<body>
<h2>简单的分页</h2>
<ul class="pagination">
    <li><a href="#">«</a></li>
    <li><a href="#">1</a></li>
    <li><a class="active" href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <li><a href="#">7</a></li>
    <li><a href="#">»</a></li>
</ul>
</body>
</html>

Der Effekt ist wie folgt:

Wie verwende ich CSS, um verschiedene Paging-Effekte unten auf der Seite anzuzeigen? (verschiedene Stilbeispiele)

2. CSS-Paging-Effekt – spezifische Codebeispiele für den Klick- und Mouseover-Page-Stil sind wie folgt:

<h2>css分页效果--点击及鼠标悬停分页样式</h2>
<p>请你移动鼠标到分页的数字上</p>
<ul class="pagination">
    <li><a href="#">«</a></li>
    <li><a href="#">1</a></li>
    <li><a class="active" href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <li><a href="#">7</a></li>
    <li><a href="#">»</a></li>
</ul>

Stilstilcode:

ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
}
ul.pagination li {display: inline;}
ul.pagination li a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
}
ul.pagination li a.active {
    background-color: #4CAF50;
    color: white;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}

Der Effekt ist wie folgt:

Wie verwende ich CSS, um verschiedene Paging-Effekte unten auf der Seite anzuzeigen? (verschiedene Stilbeispiele)

Hinweis: Wenn Sie auf die aktuelle Seite klicken, können Sie .active verwenden, um den Stil der aktuellen Seite festzulegen, und wenn Sie mit der Maus darüber fahren Mit der Maus können Sie den :hover-Selektor verwenden, um den Stil zu ändern.

: Ein spezieller Stil, der durch Hover hinzugefügt wird, wenn die Maus über den Link bewegt wird. Kann für alle Elemente verwendet werden, nicht nur für Links.

:Link-Selektor legt den Stil von Links zu nicht besuchten Seiten fest

:Besuchter Selektor legt den Stil von Links zu besuchten Seiten fest:Aktiver Selektor legt den Stil fest, wenn Sie auf den Linkstil klicken.

3. CSS-Paging-Stil – Stil mit abgerundeten Ecken

Der Hauptunterschied im Code hängt hier mit dem Attribut „border-radius“ zusammen.

ul.pagination li a {
    border-radius: 5px;
}
ul.pagination li a.active {   
	border-radius: 5px;
}

Der Effekt ist wie folgt:

Wie verwende ich CSS, um verschiedene Paging-Effekte unten auf der Seite anzuzeigen? (verschiedene Stilbeispiele)

Hinweis: Das Attribut

border-radius ist ein abgekürztes Attribut, das zum Festlegen von vier Rändern verwendet wird - *-radius-Attribut. Mit dieser Eigenschaft können Sie Elementen abgerundete Ränder hinzufügen!

Dieser Artikel stellt drei Situationen zum CSS-Paging-Stil als Referenz vor. Ich hoffe, dass er Freunden in Not hilfreich sein wird!

Das obige ist der detaillierte Inhalt vonWie verwende ich CSS, um verschiedene Paging-Effekte unten auf der Seite anzuzeigen? (verschiedene Stilbeispiele). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css 选择器 border

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Wie erreicht man mit CSS3 ein nahtloses kreisförmiges Scrollen von Nachrichtentexten? (Beispiel)Nächster Artikel：Wie erreicht man mit CSS3 ein nahtloses kreisförmiges Scrollen von Nachrichtentexten? (Beispiel)

In Verbindung stehende Artikel

Mehr sehen