Comment utiliser le CSS pour afficher différents effets de pagination en bas de page ? (divers exemples de styles)-tutoriel CSS-php.cn

Comment utiliser le CSS pour afficher différents effets de pagination en bas de page ? (divers exemples de styles)

藏色散人

Libérer： 2018-08-11 11:37:55

original

3081 Les gens l'ont consulté

La plupart des sites Web sont composés de plusieurs pages, rarement d'une seule page. De nombreuses pages nécessitent la fonction de pagination. Cet article vous présentera l'implémentation spécifique des paramètres de pagination CSS et du code de pagination CSS.

1. Un exemple spécifique de code de pagination CSS simple est le suivant :

<!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>

Copier après la connexion

L'effet est le suivant :

Comment utiliser le CSS pour afficher différents effets de pagination en bas de page ? (divers exemples de styles)

2. Effet de pagination CSS - les exemples de code spécifiques au style de pagination par clic et survol de la souris sont les suivants :

<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>

Copier après la connexion

code de style de 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;
}
ul.pagination li a.active {
    background-color: #4CAF50;
    color: white;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}

Copier après la connexion

L'effet est le suivant :

Comment utiliser le CSS pour afficher différents effets de pagination en bas de page ? (divers exemples de styles)

Remarque : Si vous cliquez sur la page actuelle, vous pouvez utiliser .active pour définir le style de la page actuelle, et lorsque vous passez la souris, vous pouvez utiliser le sélecteur :hover pour modifier le style.

: Un style spécial ajouté par survol lorsque la souris passe sur le lien. Peut être utilisé sur tous les éléments, pas seulement sur les liens.

:le sélecteur de liens définit le style des liens vers les pages non visitées

:le sélecteur visité définit le style des liens vers les pages visitées :le sélecteur actif définit le style lorsque vous cliquez sur le style du lien.

3. Style de pagination CSS - style de coins arrondis

La principale différence dans le code ici est liée à l'attribut border-radius.

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

Copier après la connexion

L'effet est le suivant :

Comment utiliser le CSS pour afficher différents effets de pagination en bas de page ? (divers exemples de styles)

Remarque : L'attribut

border-radius est un attribut abrégé, utilisé pour définissez quatre propriétés border-*-radius. Cette propriété vous permet d'ajouter des bordures arrondies aux éléments !

Cet article présente trois situations sur le style de pagination CSS pour votre référence. J'espère qu'il sera utile aux amis dans le besoin !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!