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

web前端开发

共 3830字,需浏览 8分钟

 · 2020-12-23

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

翻译 | web前端开发(web_qdkf)


要为页面创建分页效果非常简单,你可以使用Bootstrap,JavaScript以及最简单的HTML和CSS方法来实现。
当网站在单个页面上包含很多内容时,分页会很有用,因为单个页面将所有这些主题放在一起看起来都不太好。
很少有网站会使用滚动条来避免分页,反之亦然。但是,最好的外观呈现时滚动和分页相结合。
作为开发人员,你可以在页面上放置一些内容,以使该页面有些可滚动,直到烦人为止。
你可以使用分页将保留那些先前的内容并继续到新的内容页面,并且主题将相同。
在本文中,我们先创建分页的基本结构。在这里,我们还将附加title属性,以便用户可以知道分页的下一页上的内容类型。
HTML代码结构如下:
  
</span></code><code><span class="code-snippet_outer"> How to make a Pagination </span></code><code><span class="code-snippet_outer"> using HTML and CSS ? </span></code><code><span class="code-snippet_outer">

GeeksforGeeks

A Computer Science Portal for Geeks


Interview Experiences:


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 !


然后,我们再通过CSS创建网站的外观效果。

CSS代码结构如下:

 

最后,将HTML和CSS代码进行组合。

我们就得到了最终代码结构如下:

  
</span></code><code><span class="code-snippet_outer"> How to make a Pagination </span></code><code><span class="code-snippet_outer"> using HTML and CSS ? </span></code><code><span class="code-snippet_outer">


GeeksforGeeks

A Computer Science Portal for Geeks


Interview Experiences:


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 !


最终效果如下:


本文完~

浏览 35
点赞
评论
收藏
分享

手机扫一扫分享

举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

举报