Crear paginación es bastante simple, puede hacerlo fácilmente usando Bootstrap y JavaScript . Sin embargo, en este artículo usaremos HTML y CSS para crear la paginación.
La paginación es útil cuando el sitio web contiene mucho contenido en una sola página y una sola página no se verá bien con todos esos temas juntos. Pocas webs utilizan el scroll para evitar la paginación y viceversa. Pero la mejor apariencia viene con la combinación de desplazamiento y paginación. Como desarrollador, puede poner algunos contenidos en una página para hacer que esa página se pueda desplazar un poco hasta que sea molesto. Después de eso, puede usar la paginación que dejará ese contenido anterior y pasará a la página de contenido nuevo, pero el tema será el mismo.
Creación de estructura: en esta sección, solo crearemos la estructura básica del sitio web de la paginación. Aquí, también adjuntaremos el atributo de título para que el usuario pueda saber cuál será el tipo de contenido en la página siguiente de la paginación.
- Código HTML para hacer la estructura:
HTML
<!DOCTYPE html> <html> <head> <title> How to make a Pagination using HTML and CSS ? </title> </head> <body> <center> <!-- Header and Slogan --> <h1>GeeksforGeeks</h1> <p>A Computer Science Portal for Geeks</p> <!-- content in this Section --> <div class="content"> <h3>Interview Experiences:</h3> <article> Share Your Questions/Experience or share your "Interview Experience", please mail your interview experience to review-team@geeksforgeeks.org. Also, to share interview questions, please add questions at Contribute a Question! You can also find company specific Interview Questions at our PRACTICE portal ! </article> </div> <!-- pagination elements --> <div class="pagination_section"> <a href="#"><< Previous</a> <a href="#" title="Algorithm">1</a> <a href="#" title="DataStructure">2</a> <a href="#" title="Languages">3</a> <a href="#" title="Interview" class="active">4</a> <a href="#" title="practice">5</a> <a href="#">Next >></a> </div> </center> </body> </html>
Estructura de diseño: En la sección anterior, hemos creado la estructura del sitio web básico donde vamos a utilizar CSS.
- Código CSS para que quede bien la estructura:
CSS
<style>
/* header styling */
h1 {
color: green;
}
/* pagination position styling */
.pagination_section {
position: relative;
}
/* pagination styling */
.pagination_section a {
color: black;
padding: 10px 18px;
text-decoration: none;
}
/* pagination hover effect on non-active */
.pagination_section a:hover:not(.active) {
background-color: #031F3B;
color: white;
}
/* pagination hover effect on active*/
a:nth-child(5) {
background-color: green;
color: white;
}
a:nth-child(1) {
font-weight: bold;
}
a:nth-child(7) {
font-weight: bold;
}
.content {
margin: 50px;
padding: 15px;
width: 700px;
height: 200px;
border: 2px solid black;
}
</style>
Combinando el código HTML y CSS: Este es el código final que es la combinación de las dos secciones anteriores.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
How to make a Pagination
using HTML and CSS ?
</title>
<style>
/* header styling */
h1 {
color: green;
}
/* pagination position styling */
.pagination_section {
position: relative;
}
/* pagination styling */
.pagination_section a {
color: black;
padding: 10px 18px;
text-decoration: none;
}
/* pagination hover effect on non-active */
.pagination_section a:hover:not(.active) {
background-color: #031F3B;
color: white;
}
/* pagination hover effect on active*/
a:nth-child(5) {
background-color: green;
color: white;
}
a:nth-child(1) {
font-weight: bold;
}
a:nth-child(7) {
font-weight: bold;
}
.content {
margin: 50px;
padding: 15px;
width: 700px;
height: 200px;
border: 2px solid black;
}
</style>
</head>
<body>
<center>
<!-- Header and Slogan -->
<h1>GeeksforGeeks</h1>
<p>A Computer Science Portal for Geeks</p>
<!-- content in this Section -->
<div class="content">
<h3>Interview Experiences:</h3>
<article>
Share Your Questions/Experience or share
your "Interview Experience", please mail
your interview experience to
review-team@geeksforgeeks.org. Also, to
share interview questions, please add
questions at Contribute a Question! You
can also find company specific Interview
Questions at our PRACTICE portal !
</article>
</div>
<!-- pagination elements -->
<div class="pagination_section">
<a href="#"><< Previous</a>
<a href="#" title="Algorithm">1</a>
<a href="#" title="DataStructure">2</a>
<a href="#" title="Languages">3</a>
<a href="#" title="Interview" class="active">4</a>
<a href="#" title="practice">5</a>
<a href="#">Next >></a>
</div>
</center>
</body>
</html>
Producción:
HTML es la base de las páginas web y se utiliza para el desarrollo de páginas web mediante la estructuración de sitios web y aplicaciones web. Puede aprender HTML desde cero siguiendo este tutorial de HTML y ejemplos de HTML .
CSS es la base de las páginas web y se utiliza para el desarrollo de páginas web mediante el diseño de sitios web y aplicaciones web. Puede aprender CSS desde cero siguiendo este tutorial de CSS y ejemplos de CSS .
Publicación traducida automáticamente
Artículo escrito por Sabya_Samadder y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA