如何使用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代码结构如下：

  
      </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 !         
     
 
                 << Previous         1         2         3         4         5         Next >>

然后，我们再通过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 !         
     
 
                 << Previous         1         2         3         4         5         Next >>

最终效果如下：

本文完~