0
点赞
收藏
分享

微信扫一扫

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

RIOChing 2022-11-08 阅读 197

如何使用HTML和CSS进行分页?_分页

英文 | https://www.geeksforgeeks.org/how-to-make-a-pagination-using-html-and-css/?ref=rp

翻译 | web前端开发(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_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和CSS进行分页?_html_03

如何使用HTML和CSS进行分页?_css_04

举报

相关推荐

0 条评论