<!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> </center> <!-- contern 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 contribute@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> </body> </html>
设计结构：在上一节中，我们创建了将要使用CSS的基本网站的结构。
CSS代码看起来不错的结构：
<style> /* header styling */ h1 { color: green; } /* pagination position styling */ .pagination_section { position: absolute; top: 500px; right: 230px; } /* 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: 800px; height: 200px; border: 2px solid black; } </style>
组合HTML和CSS代码：这是以上两个部分的组合的最终代码。
<!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: absolute; top: 500px; right: 230px; } /* 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> </center> <!-- contern 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 contribute@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> </body> </html>