Des exemples de l'onglet CSS
Ce chapitre, nous allons présenter comment créer une instance de paging par l'utilisation de CSS.
onglets simples
Si votre site a de nombreuses pages, vous aurez besoin d'utiliser l'onglet pour rendre la navigation pour chaque page.
L'exemple suivant montre comment utiliser HTML et CSS pour créer la page:
CSS Exemples
display: inline-block;
padding: 0;
margin: 0;
}
ul.pagination li {display: inline;}
ul.pagination li a {
color: black;
float: left;
padding: 16px 8px;
text-decoration: none;
}
Essayez »
Cliquez sur le style onglet et hover
Si vous cliquez sur cette page, vous pouvez utiliser .active pour définir le style de la page courante, vous pouvez utiliser la souris-over :hover sélecteurs pour modifier le style:
CSS Exemples
background-color: # 4CAF50;
color: white;
}
ul.pagination li a: hover: non ( .active) {background-color: #DDD;}
Essayez »
CSS Exemples
background-color: # 4CAF50;
color: white;
}
ul.pagination li a: hover: non (.active) {background-color: #DDD;}
Essayez »
arrondi Style
Vous pouvez utiliser le border-radius propriété pour la page sélectionnée pour ajouter du style des coins arrondis:
CSS Exemples
border-radius: 5px;
}
ul.pagination li a.active {
border-radius: 5px;
}
Essayez »
Hover effets de transition
Nous pouvons ajouter la transition propriété de déplacer la souris sur la page lorsque vous ajoutez des effets de transition:
Avec onglet frontière
Nous pouvons utiliser la border attribut pour ajouter une page avec une bordure:
coins arrondis
Astuce: Dans la première et la dernière page les liens de pagination Lien Ajouter les filets:
CSS Exemples
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.pagination li: last-child a {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
Essayez »
intervalle de Paging
Astuce: Vous pouvez utiliser la margin propriété pour ajouter un espace directement à chaque page:
CSS Exemples
marge :. 0 4px; / * 0 est pour le haut et le bas Ne hésitez pas à le changer * /
}
Essayez »
police Paging taille
Nous pouvons utiliser la font-size de font-size de propriété pour définir la page font size:
onglet Centre
Si vous voulez centrer onglet, vous pouvez (comme <div>) pour ajouter dutexte-aligner sur l'élément conteneur:stylede centre:
D'autres exemples
Breadcrumbs
Une autre navigation miettes de pain, des exemples sont les suivants:
CSS Exemples
padding: 16px 8px;
list-style: none;
background-color: #EEE;
}
ul.breadcrumb li {display: inline;}
ul.breadcrumb li + li: avant {
padding: 8px;
color: black;
contenu: "/ \ 00A0";
}
Essayez »