Ejemplos de pestaña CSS
En este capítulo vamos a introducir la forma de crear una instancia de paginación a través del uso de CSS.
lengüetas simples
Si su sitio tiene muchas páginas, tendrá que utilizar la pestaña para hacer que la barra de navegación para cada página.
El siguiente ejemplo muestra cómo utilizar HTML y CSS para crear la página:
Ejemplos CSS
display: inline-block;
padding: 0;
margin: 0;
}
li ul.pagination {display: inline;}
ul.pagination li a {
color: negro;
float: left;
padding: 16px 8 píxeles;
text-decoration: none;
}
Trate »
Haga clic en la pestaña estilo y la libración
Si hace clic en esta página, puede utilizar .active para establecer el estilo de página actual, puede utilizar el ratón en off :hover selectores para modificar el estilo:
Ejemplos CSS
background-color: # 4CAF50;
color: blanco;
}
ul.pagination li a: hover: no ( .active) {background-color: #ddd;}
Trate »
Ejemplos CSS
background-color: # 4CAF50;
color: blanco;
}
ul.pagination li a: hover: no (.active) {background-color: #ddd;}
Trate »
estilo redondeado
Puede utilizar la border-radius propiedad de la página seleccionada para añadir estilo esquinas redondeadas:
Ejemplos CSS
la frontera de radio: 5px;
}
a.active ul.pagination li {
la frontera de radio: 5px;
}
Trate »
efectos de transición de la libración
Podemos agregar la transition la propiedad para mover el puntero del ratón en la página cuando se agrega efectos de transición:
Con pestaña frontera
Podemos utilizar la border atributo para añadir una página con un borde:
Las esquinas redondeadas
Consejo: En la primera y última página de enlace enlaces de paginación Añadir los filetes:
Ejemplos CSS
border-top-izquierda-radio: 5px;
border-bottom-left-radius: 5px;
}
.pagination li: el último hijo un {
border-top-derecha-radio: 5px;
border-bottom-derecha-radio: 5px;
}
Trate »
intervalo de paginación
Consejo: Puede utilizar el margin propiedad para añadir un espacio directamente a cada página:
Ejemplos CSS
margen :. 0 4 píxeles; / * 0 es para la parte superior e inferior Siéntete libre de cambiarlo * /
}
Trate »
tamaño de la fuente de paginación
Podemos utilizar el font-size propiedad para establecer el tamaño de página de la fuente:
lengüeta central
Si desea lengüeta central, puede (como <div>) para añadirtexto a alinear en el elemento contenedor: centrode estilo:
más ejemplos
pan rallado
Otra de navegación como migas de pan, los ejemplos son los siguientes:
Ejemplos CSS
padding: 16px 8 píxeles;
list-style: none;
background-color: #eee;
}
li ul.breadcrumb {display: inline;}
ul.breadcrumb + li li: {antes
padding: 8 píxeles;
color: negro;
contenido: "/ \ 00A0";
}
Trate »