Scribd Logo
Importer

Bienvenue sur Scribd !

  • Document Sans Titre

    Transféré par

    bahema javan
    10 vues12 pages
    css new positioning

    Titre original

    Document sans titre

    Copyright

    © © All Rights Reserved

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document
    css new positioning

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    10 vues12 pages

    Document Sans Titre

    Transféré par

    bahema javan
    css new positioning

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 12

    CSS Pagination Examples

    ❮ Previous
    Next ❯

    Learn how to create a responsive pagination using CSS.

    Simple Pagination
    If you have a website with lots of pages, you may wish to add some sort of
    pagination to each page:

    <!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="#">&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="#">&raquo;</a>

    </div>

    </body>

    </html>
    Active and Hoverable Pagination
    Highlight the current page with an .active class, and use the :hover
    selector to change the color of each page link when moving the mouse over
    them:

    <!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="#">&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="#">&raquo;</a>

    </div>

    </body>

    </html>
    Rounded Active and Hoverable Buttons
    <!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="#">&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="#">&raquo;</a>

    </div>

    </body>

    </html>

    Bordered Pagination
    Use the border property to add borders to the pagination:

    <!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="#">&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="#">&raquo;</a>

    </div>

    </body>

    </html>

    <!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="#">❮</a>

    <a href="#">❯</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>

    Vous aimerez peut-être aussi