Maison > Article > interface Web > Comment implémenter la mise en page de la pagination en utilisant HTML et CSS
Comment utiliser HTML et CSS pour implémenter la mise en page
Dans la conception Web moderne, la mise en page est un moyen courant d'afficher une grande quantité de contenu en groupes et de fournir une méthode de navigation concise et claire. Cet article utilisera HTML et CSS comme base pour présenter comment implémenter une mise en page simple et pratique, et joindra des exemples de code spécifiques.
<!DOCTYPE html> <html> <head> <title>分页布局示例</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <header> <!-- 头部内容 --> </header> <main> <!-- 内容区域 --> </main> <footer> <!-- 页脚内容 --> </footer> </body> </html>
* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; line-height: 1.5; } header { background-color: #333; color: #fff; padding: 20px; } main { padding: 20px; } footer { background-color: #333; color: #fff; padding: 20px; text-align: center; }
Le code ci-dessus définit le style de base de la page. L'en-tête et le pied de page ont la même couleur et le même style d'arrière-plan, et la zone de contenu a un certain remplissage.
<main> <div class="pagination"> <a href="#" class="active">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> </div> </main>
Le code ci-dessus définit un conteneur qui contient cinq balises de pagination. La première balise définit une classe .active pour représenter le numéro de page actuel, qui peut être ajouté et modifié selon les besoins.
Ensuite, nous devons définir des styles pour .container et chaque balise de pagination qu'il contient. Vous pouvez utiliser le code suivant comme point de départ :
.pagination { display: flex; justify-content: center; align-items: center; margin-top: 20px; } .pagination a { display: block; padding: 10px; margin: 0 5px; border: 1px solid #333; color: #333; text-decoration: none; transition: background-color 0.3s ease; } .pagination a.active { background-color: #333; color: #fff; }
Le code ci-dessus définit le style de la classe .pagination, en utilisant la disposition flexible pour afficher l'étiquette de pagination horizontalement et centrée. Chaque étiquette de pagination a une certaine marge intérieure et une certaine marge extérieure, et la couleur de la bordure est #333. La couleur du texte à l'état inactif est également #333.
Afin de distinguer l'étiquette du numéro de page actuelle des autres étiquettes, nous définissons également le style de la classe .active, la couleur d'arrière-plan étant #333 et la couleur du texte étant #fff.
Avec le code ci-dessus, nous avons réalisé une mise en page simple et pratique. Vous pouvez affiner le style et étendre les fonctionnalités selon vos besoins.
Conclusion
Cet article vous montre comment utiliser HTML et CSS pour implémenter une mise en page simple et pratique à travers des exemples de code spécifiques. J'espère que cela sera utile à tout le monde dans la conception et le codage de sites Web. Dans le même temps, nous espérons également que chacun pourra optimiser et se développer davantage en fonction de ses propres besoins.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!