Heim >Web-Frontend >CSS-Tutorial >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:553078Durchsuche
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:
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:
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:
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!