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

最新推荐文章于 2021-06-03 08:13:47 发布

weixin_39525812

最新推荐文章于 2021-06-03 08:13:47 发布

阅读量220

点赞数

英文 | 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代码制作结构：

 <html>   <head>     <title>         How to make a Pagination         using HTML and CSS ?     title> head>   <body>     <center>                   <h1>GeeksforGeeksh1>         <p>A Computer Science Portal for Geeksp>     center>           <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>               <div class="pagination_section">         <a href="#"><< Previousa>         <a href="#" title="Algorithm">1a>         <a href="#" title="DataStructure">2a>         <a href="#" title="Languages">3a>         <a href="#" title="Interview" class="active">4a>         <a href="#" title="practice">5a>         <a href="#">Next >>a>     div> body>   html>

设计结构： 在上一节中，我们创建了将要使用CSS的基本网站的结构。 CSS代码看起来不错的结构：

    /* 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;     }

组合HTML和CSS代码：这是以上两个部分的组合的最终代码。

               How to make a Pagination         using HTML and CSS ?                  /* 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;         }

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