Beispiele für CSS-Paginierung


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen


Erfahren Sie, wie Sie mit CSS eine responsive Paginierung erstellen.


Einfache Paginierung

Wenn Sie eine Website mit vielen Seiten haben, möchten Sie möglicherweise jeder Seite eine Art Paginierung hinzufügen:

Beispiel

 .pagination {
  display: inline-block;
}
.pagination a {
  color: 
black;
  float: left;
  padding: 8px 
16px;
  text-decoration: none;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}
</style>
</head>
<body>

<h2>Simple Pagination</h2>

<div class="pagination">
  <a href="#">&amp;laquo;</a>
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">&amp;raquo;</a>
</div>

</body>
</html>



Aktive und schwebende Paginierung

Markieren Sie die aktuelle Seite mit einer Klasse .active und verwenden Sie den Selektor :hover, um die Farbe jeder Seite zu ändern Seitenlink, wenn Sie mit der Maus darüber fahren:

Beispiel

 .pagination a.active {
  background-color: 
#4CAF50;
  color: white;
}
.pagination a:hover:not(.active) {background-color: #ddd;}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}

.pagination a.active {
  background-color: #4CAF50;
  color: white;
}

.pagination a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>

<h2>Active and Hoverable Pagination</h2>

<p>Move the mouse over the numbers.</p>

<div class="pagination">
  <a href="#">&amp;laquo;</a>
  <a href="#">1</a>
  <a class="active" href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">&amp;raquo;</a>
</div>

</body>
</html>


Abgerundete aktive und schwebende Tasten

Fügen Sie die Eigenschaft border-radius hinzu, wenn Sie eine abgerundete „Aktiv“- und „Hover“-Schaltfläche wünschen:

Beispiel

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

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}

.pagination a.active {
  background-color: #4CAF50;
  color: white;
  border-radius: 5px;
}

.pagination a:hover:not(.active) {
  background-color: #ddd;
  border-radius: 5px;
}
</style>
</head>
<body>

<h2>Rounded Active and Hover Buttons</h2>

<div class="pagination">
  <a href="#">&amp;laquo;</a>
  <a href="#">1</a>
  <a href="#" class="active">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">&amp;raquo;</a>
</div>

</body>
</html>


Schwebebarer Übergangseffekt

Fügen Sie die Eigenschaft transition zu den Seitenlinks hinzu, um beim Hover einen Übergangseffekt zu erzeugen:

Beispiel

 .pagination a {
  transition: background-color .3s;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
}

.pagination a.active {
  background-color: #4CAF50;
  color: white;
}

.pagination a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>

<h2>Transition Effect on Hover</h2>

<p>Move the mouse over the numbers.</p>

<div class="pagination">
  <a href="#">&amp;laquo;</a>
  <a href="#">1</a>
  <a href="#" class="active">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">&amp;raquo;</a>
</div>

</body>
</html>




Umrandete Paginierung

Verwenden Sie die Eigenschaft border, um der Paginierung Rahmen hinzuzufügen:

Beispiel

 .pagination a {
  border: 1px solid #ddd; /* Gray 
*/
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
  border: 1px solid #ddd;
}

.pagination a.active {
  background-color: #4CAF50;
  color: white;
  border: 1px solid #4CAF50;
}

.pagination a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>

<h2>Pagination with Borders</h2>

<div class="pagination">
  <a href="#">&amp;laquo;</a>
  <a href="#">1</a>
  <a href="#" class="active">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">&amp;raquo;</a>
</div>

</body>
</html>


Abgerundete Ränder

Tipp: Fügen Sie Ihrem ersten und letzten Link in der Paginierung abgerundete Ränder hinzu:

Beispiel

.pagination a:first-child {
  border-top-left-radius: 
5px;
  border-bottom-left-radius: 5px;
}
.pagination 
  a:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  border: 1px solid #ddd;
}

.pagination a.active {
  background-color: #4CAF50;
  color: white;
  border: 1px solid #4CAF50;
}

.pagination a:hover:not(.active) {background-color: #ddd;}

.pagination a:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.pagination a:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
</style>
</head>
<body>

<h2>Pagination with Rounded Borders</h2>

<div class="pagination">
  <a href="#">&amp;laquo;</a>
  <a href="#">1</a>
  <a class="active" href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">&amp;raquo;</a>
</div>

</body>
</html>


Abstand zwischen Links

Tipp: Fügen Sie die Eigenschaft margin hinzu, wenn Sie die Seitenlinks nicht gruppieren möchten:

Beispiel

 .pagination a {
  margin: 0 4px; /* 0 is for top 
and bottom. Feel free to change it */
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
  border: 1px solid #ddd;
  margin: 0 4px;
}

.pagination a.active {
  background-color: #4CAF50;
  color: white;
  border: 1px solid #4CAF50;
}

.pagination a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>

<h2>Pagination with Margins</h2>

<div class="pagination">
  <a href="#">&amp;laquo;</a>
  <a href="#">1</a>
  <a href="#" class="active">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">&amp;raquo;</a>
</div>

</body>
</html>



Paginierungsgröße

Ändern Sie die Größe der Paginierung mit der Eigenschaft font-size:

Beispiel

 .pagination a {
  font-size: 22px;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
  border: 1px solid #ddd;
  font-size: 22px;
}

.pagination a.active {
  background-color: #4CAF50;
  color: white;
  border: 1px solid #4CAF50;
}

.pagination a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>

<h2>Pagination Size</h2>

<p>Change the font-size property to make the pagination smaller or bigger.</p>

<div class="pagination">
  <a href="#">&amp;laquo;</a>
  <a href="#">1</a>
  <a href="#" class="active">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">&amp;raquo;</a>
</div>

</body>
</html>



Zentrierte Paginierung

Um die Paginierung zu zentrieren, wickeln Sie ein Containerelement (wie <div>) mit text-align:center darum

Beispiel

 .center {
  text-align: center;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  text-align: center;
}

.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
  border: 1px solid #ddd;
  margin: 0 4px;
}

.pagination a.active {
  background-color: #4CAF50;
  color: white;
  border: 1px solid #4CAF50;
}

.pagination a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>

<h2>Centered Pagination</h2>

<div class="center">
  <div class="pagination">
  <a href="#">&amp;laquo;</a>
  <a href="#">1</a>
  <a href="#" class="active">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">&amp;raquo;</a>
  </div>
</div>

</body>
</html>



Mehr Beispiele

Beispiel

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color:white;
}
.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
  border: 1px solid #ddd;
}

.pagination a.active {
  background-color: #4CAF50;
  color: white;
  border: 1px solid #4CAF50;
}

.pagination a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>

<p>Next/Previous buttons:</p>
<div class="pagination">
  <a href="#">&#10094;</a>
  <a href="#">&#10095;</a>
</div>

<p>Navigation pagination:</p>
<div class="pagination">
  <a href="#" class="active">Home</a>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
</div>

</body>
</html>



Semmelbrösel

Eine weitere Variante der Paginierung sind sogenannte „Breadcrumbs“:

Beispiel

ul.breadcrumb {
  padding: 8px 16px;
  
list-style: none;
  background-color: #eee;
}

ul.breadcrumb li {display: inline;}
ul.breadcrumb li+li:before {
  
padding: 8px;
  color: black;
  content: "/\00a0";
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<head>
<style>
ul.breadcrumb {
  padding: 8px 16px;
  list-style: none;
  background-color: #eee;
}

ul.breadcrumb li {display: inline;}

ul.breadcrumb li+li:before {
  padding: 8px;
  color: black;
  content: "/\00a0";
}

ul.breadcrumb li a {color: green;}
</style>
</head>
<body>

<h2>Breadcrumb Pagination</h2>

<ul class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Pictures</a></li>
  <li><a href="#">Summer 15</a></li>
  <li>Italy</li>
</ul>

</body>
</html>