如何使用HTML和CSS进行分页？

顺晟科技

2022-09-15 20:22:17

128

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

上一篇：html中使用js+table 实现下一篇：HTML5开发的翻页效果实例 - A

网站建设

Html

如何使用HTML和CSS进行分页？