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

📅  最后修改于: 2021-08-30 12:41:05             🧑  作者: Mango

为页面创建分页非常简单,您可以使用 Bootstrap、JavaScript 以及最简单的方法 HTML 和 CSS 来实现。当网站在单个页面上包含大量内容时,分页很有用,如果将所有这些主题放在一起,单个页面将不会看起来很好。很少有网站使用滚动来避免分页,反之亦然。但是最好的外观来自滚动和分页的组合。作为开发人员,您可以在页面上放置一些内容,使该页面具有可滚动性,直到它变得烦人为止。之后,您可以使用分页来保留以前的内容并继续到新的内容页面,但主题将相同。

创建结构:在本节中,我们将只创建分页的基本网站结构。在这里,我们还将附加 title 属性,以便用户可以知道分页的下一页的内容类型。

  • 用于制作结构的 HTML 代码:
    
    
      
    
        
            How to make a Pagination
            using HTML and CSS ?
        
    
      
    
        
                        

    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 代码:这是上述两部分组合的最终代码。



  

    
        How to make a Pagination
        using HTML and CSS ?
    
      
    

  

    
                    

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

输出: