【开发小技巧】03-如何使用HTML和CSS进行分页？

最新推荐文章于 2021-12-07 15:40:40 发布

web前端开发V

最新推荐文章于 2021-12-07 15:40:40 发布

阅读量253

点赞数

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

输出：