Tutorial de création d’une barre de pagination tout en CSS avec 15 exemples

En a déjà vu comment créer un effet glace sur une image en utilisant un Js et aussi comme personnaliser c’est bouton radio et Checkboxes, Cette fois si nous allons voir comment créer et personnaliser la pagination de votre site ou blog en Xhtml/CSS .

Premier partie :
Téléchargez et placez le fichier pagination.css dans votre répertoire racine par exemple, ensuite ajoutez la balise qui va faire appel à ce style CSS entre et :

Faites attention au paramètre “src” qui indique l’emplacement du script.

Contenu du fichier CSS pagination.css 

/*CSS style pagination*/ div.pagination { padding: 3px; margin: 3px; text-align:center; } div.pagination a { padding: 2px 5px 2px 5px; margin: 2px; border: 1px solid #AAAADD; text-decoration: none; /* no underline */ color: #000099; } div.pagination a:hover, div.digg a:active { border: 1px solid #000099; color: #000; } div.pagination span.current { padding: 2px 5px 2px 5px; margin: 2px; border: 1px solid #000099; font-weight: bold; background-color: #000099; color: #FFF; } div.pagination span.disabled { padding: 2px 5px 2px 5px; margin: 2px; border: 1px solid #EEE; color: #DDD; }

Deuxième partie :
Ajoutez la class à la balise qui va servir de conteneur (div) pour afficher l’effet

◄ 1 2 3 4 5 6 7 ... 199 200 ►

Le résultat final :
Voici 15 style possible pour votre pagination, il ne vous reste qu’a télécharger le fichier CSS du style que vous souhaite avoir et l’intègre comme je l’ai exemple dans le tutoria.