<!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>