英文 | https://www.geeksforgeeks.org/how-to-make-a-pagination-using-html-and-css/?ref=rp
翻译 | web前端开发(ID:web_qdkf)
要为页面创建分页非常简单,你可以使用Bootstrap,JavaScript以及最简单的HTML和CSS方法来实现。当网站在单个页面上包含很多内容时,分页很有用,因为单个页面看起来不能同时包含所有这些主题。
很少有网站使用滚动条来避免分页,反之亦然。但是最好的外观来自滚动和分页的结合。
作为开发人员,你可以在页面上放置一些内容,以使该页面有些可滚动,直到烦人为止。此后,你可以使用分页将保留那些先前的内容并继续到新的内容页面,但是主题将相同。
创建结构:在本节中,我们将创建分页的基本网站结构。在这里,我们还将附加title属性,以便用户可以知道分页的下一页上的内容类型。
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>
</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_p">
<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_p { position: absolute; top: 500px; right: 230px; }
/* pagination styling */ .pagination_p a { color: black; padding: 10px 18px; text-decoration: none; }
/* pagination hover effect on non-active */ .pagination_p 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_p { position: absolute; top: 500px; right: 230px; } /* pagination styling */
.pagination_p a { color: black; padding: 10px 18px; text-decoration: none; } /* pagination hover effect on non-active */
.pagination_p 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_p"> <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>
输出:
推荐阅读
【开发小技巧】01-如何使用JavaScript删除CSS属性?
【开发小技巧】02-如何使用canvasJS在PHP中制作动态图表?