{"id":1425,"date":"2024-08-02T06:21:04","date_gmt":"2024-08-02T04:21:04","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=1425"},"modified":"2024-08-02T06:21:04","modified_gmt":"2024-08-02T04:21:04","slug":"15-ejemplos-de-paginacion-con-css","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/css3\/css3-avanzado\/15-ejemplos-de-paginacion-con-css\/","title":{"rendered":"15. Ejemplos de paginaci\u00f3n con CSS"},"content":{"rendered":"\n

Paginaci\u00f3n simple<\/h2>\n\n\n\n

Si tienes un sitio web con muchas p\u00e1ginas, es posible que desees agregar alg\u00fan tipo de paginaci\u00f3n a cada p\u00e1gina.<\/p>\n\n\n\n\n\n\n\n

Ejm<\/strong><\/p>\n\n\n\n

<!DOCTYPE html>
<html lang=\"es\">
  <head>
    <style>
      .pagination {
        display: inline-block;
      }

      .pagination a {
        color: black;
        float: left;
        padding: 8px 16px;
        text-decoration: none;
      }
    <\/style>
  <\/head>
  <body>
    <h2>Pagination Simple<\/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=\"#\">&raquo;<\/a>
    <\/div>
  <\/body>
<\/html><\/pre>\n\n\n\n
Paginaci\u00f3n activa y desplazable<\/h2>\n\n\n\n
Resalta la p\u00e1gina actual con una clase .active<\/em> <\/strong>y use el selector :hover<\/em> <\/strong>para cambiar el color de cada enlace de p\u00e1gina cuando mueva el mouse sobre ellos.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<!DOCTYPE html>
<html lang=\"es\">
  <head>
    <style>
      .pagination {
        display: inline-block;
      }

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

      .pagination a.active {
        background-color: red;
        color: white;
      }

      .pagination a:hover:not(.active) {
        background-color: #ddd;
      }
    <\/style>
  <\/head>
  <body>
    <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><\/pre>\n\n\n\n
Botones activos y flotantes redondeados<\/h2>\n\n\n\n
A\u00f1adimos la propiedad border-radius<\/em><\/strong> para redondear nuestros botones.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
.pagination a {\n  border-radius: 5px;\n}\n\n.pagination a.active {\n  border-radius: 5px;\n}<\/pre>\n\n\n\n
Efecto de transici\u00f3n flotante<\/h2>\n\n\n\n
Agregue la propiedad transition<\/em> <\/strong>a los enlaces de la p\u00e1gina para crear un efecto de transici\u00f3n al pasar el mouse.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
.pagination a {\n  transition: background-color .3s;\n}<\/pre>\n\n\n\n
Incluir bordes<\/h2>\n\n\n\n
Utilizamos la propiedad border<\/em><\/strong>.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
.pagination a {\n  border: 1px solid #ddd; \/* Gray *\/\n}<\/pre>\n\n\n\n
Bordes redondeados<\/h2>\n\n\n\n
\n
Consejo<\/strong>: agrega bordes redondeados a tu primer y \u00faltimo enlace en la paginaci\u00f3n.<\/p>\n<\/blockquote>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<!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=\"#\">&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><\/pre>\n\n\n\n
Espacio entre enlaces<\/h2>\n\n\n\n
A\u00f1adimos la propiedad margin<\/em> <\/strong>para espaciar unos enlaces con otros.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
.pagination a {\n  margin: 0 4px; \/* 0 is for top and bottom. Feel free to change it *\/\n}<\/pre>\n\n\n\n
Tama\u00f1o de los enlaces<\/h2>\n\n\n\n
Para ello utilizamos la propiedad font-size<\/em><\/strong>.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
.pagination a {\n  font-size: 22px;\n}<\/pre>\n\n\n\n
Paginaci\u00f3n centrada<\/h2>\n\n\n\n
Para centrar la paginaci\u00f3n, envuelva un elemento contenedor (como <div><\/em><\/strong>) alrededor con text-align:center<\/em><\/strong>.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<!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 0.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=\"#\">&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>
    <\/div>
  <\/body>
<\/html><\/pre>\n\n\n\n
Breadcrumbs<\/h2>\n\n\n\n
Otra variaci\u00f3n de la paginaci\u00f3n son las llamadas \u00abmigas de pan<\/strong>\u00bb o breadcrumbs<\/strong>.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<!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><\/pre>\n","protected":false},"excerpt":{"rendered":"
Paginaci\u00f3n simple Si tienes un sitio web con muchas p\u00e1ginas, es posible que desees agregar alg\u00fan tipo de paginaci\u00f3n a cada p\u00e1gina.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1367,"menu_order":14,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-1425","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"Paginaci\u00f3n simple Si tienes un sitio web con muchas p\u00e1ginas, es posible que desees agregar alg\u00fan tipo de paginaci\u00f3n a cada p\u00e1gina.","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1425","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=1425"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1425\/revisions"}],"predecessor-version":[{"id":1427,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1425\/revisions\/1427"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1367"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=1425"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}