【案例练习】02—32 个网站分页效果的练习_html

英文 | https://niemvuilaptrinh.medium.com/how-to-create-pagination-and-20-pagination-examples-for-websites-7919ddf66f14

整理 | 杨小爱


当一个网站有很多产品或文章时，分页是一个非常重要的功能。它加快了页面加载速度，同时，也让存放的内容更加清晰有条理，现在，就让我们学习如何使用 HTML、CSS 和 Javascript 为网站设计分页功能吧！

1、如何使用 HTML CSS 创建基本分页

首先，我们需要学习如何使用 HTML 和 CSS 为网页创建基本分页！

<div class="pagination">
   <a href="#">«</a>
   <a href="#">1</a>
   <a class="active" href="#">2</a>
   <a href="#">3</a>
   <a href="#">4</a>
   <a href="#">5</a>
   <a href="#">6</a>
   <a href="#">»</a>
 </div>

active负责通过您为其设置的颜色帮助用户知道他们在哪个页面。通常这个类的颜色会与其他页码不同。为了更好地理解，请参阅以下 CSS 代码！

CSS​

.pagination a {
   color: black;
   float: left;
   padding: 8px 16px;
   text-decoration: none;
   transition: background-color .3s;
 }
 .pagination a.active {
   background-color: dodgerblue;
   color: white;
 }
 .pagination a:hover:not(.active) {
   background-color: #ddd;
 }

最终效果如下：

【案例练习】02—32 个网站分页效果的练习_html_02

演示地址：​​https://codepen.io/haycuoilennao19/pen/xxVZMLZ​​

正如您在上面的示例中看到的那样，我们的​active是矩形形状。

​在下一部分中，我们将向您介绍如何创建一个圆圈分页效果！

2、如何使用 HTML CSS 创建分页边框

HTML​

<div class="pagination">
   <a href="#">«</a>
   <a href="#">1</a>
   <a class="active" href="#">2</a>
   <a href="#">3</a>
   <a href="#">4</a>
   <a href="#">5</a>
   <a href="#">6</a>
   <a href="#">»</a>
 </div>

CSS

.pagination a {
    color: black;
    float: left;
    padding:  12px 18px;
    text-decoration: none;
  }
  .pagination a.active {
    background-color: dodgerblue;
    color: white;
    /*Thiết kế hình tròn With CSS*/
    border-radius: 50%;
  }
  .pagination a:hover:not(.active) {
    background-color: #ddd;
    border-radius: 50%;
  }

现在，我们来看看下面的最终效果。

【案例练习】02—32 个网站分页效果的练习_分页_03

演示地址：​​https://codepen.io/haycuoilennao19/pen/NWNxoaO​​

3、如何使用 li 创建分页

在这部分中，我们将学习如利用 li 标签创建网页分页效果！

HTML​

<div class="flex">
   <ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li>
     <div class="bar"></div>
   </ul>
 </div>

CSS

.flex {
   width: 400px;
   height: 80px;
   line-height: 80px;
   background-color: #eeeeee;
   position: absolute;
   top: 15%;
   left: 40%;
   margin: -25px 0 0 -150px;
 }
 .flex ul {
   display: flex;
   padding: 0;
   margin: 0;
   box-shadow: 0 10px 20px 0 #cccccc;
 }
 .flex ul li {
   flex: 1;
   list-style: none;
   text-align: center;
   position: relative;
   font-size: 20px;
   font-weight: bold;
   transition: 0.3s ease;
   cursor: pointer;
   user-select: none;
 }
 .flex ul li:hover {
   background-color: rgba(255, 255, 255, 0.25);
   color: #65bcc9;
 }
 .flex ul li:hover:nth-of-type(2) ~ .bar {
   left: 20%;
 }
 .flex ul li:hover:nth-of-type(3) ~ .bar {
   left: 40%;
 }
 .flex ul li:hover:nth-of-type(4) ~ .bar {
   left: 60%;
 }
 .flex ul li:hover:nth-of-type(5) ~ .bar {
   left: 80%;
 }
 .flex ul .bar {
   width: 20%;
   background-color: dodgerblue;
   height: 5px;
   position: absolute;
   left: 0;
   bottom: 0;
   transition: 0.3s ease;
 }

现在，我们一起来看看最终效果！

【案例练习】02—32 个网站分页效果的练习_css_04

演示地址：​​https://codepen.io/haycuoilennao19/pen/OJNMdEw​​

现在，我们再来看看更多其他的效果，希望对您的学习与工作有所帮助。

04、Javascript 分页

【案例练习】02—32 个网站分页效果的练习_分页_05

演示地址：https://codepen.io/ainalem/pen/YOraaR

05、 HTML CSS 分页效果集合

【案例练习】02—32 个网站分页效果的练习_css_06

演示地址：https://codepen.io/vineethtrv/pen/MYBeyB

06、CSS3 Javascript 分页

【案例练习】02—32 个网站分页效果的练习_html_07

演示地址：https://codepen.io/hakimel/pen/gfIsk

07、CSS分页

演示地址：

【案例练习】02—32 个网站分页效果的练习_html_08


08、使用SVG进行分页

演示地址：https://codepen.io/MarioD/pen/OmWaqz

【案例练习】02—32 个网站分页效果的练习_css_09

09、悬停和活动分页

演示地址：https://codepen.io/dgknca/pen/WNeKEpp

【案例练习】02—32 个网站分页效果的练习_分页_10

10、CSS分页

演示地址：https://codepen.io/matchboxhero/pen/gmIno


【案例练习】02—32 个网站分页效果的练习_分页_11

11、响应式分页

演示地址：https://codepen.io/micadev/pen/goygpO


【案例练习】02—32 个网站分页效果的练习_html_12

12、动画分页效果

演示地址：https://codepen.io/ainalem/pen/bGdVdwx

【案例练习】02—32 个网站分页效果的练习_css_13

13、数字动画分页效果

演示地址：https://codepen.io/ainalem/pen/BaNzPLr

【案例练习】02—32 个网站分页效果的练习_html_14

14、使用 GSAP 进行分页

演示地址：https://codepen.io/pyrografix/pen/bpePBa

【案例练习】02—32 个网站分页效果的练习_分页_15

15、JQuery分页效果

演示地址：https://codepen.io/wouterbles/pen/gpaMRd


【案例练习】02—32 个网站分页效果的练习_css_16


16、响应式分页

演示地址：https://codepen.io/nazarelen/pen/ORyZzv

【案例练习】02—32 个网站分页效果的练习_分页_17

17、悬停分页

演示地址：https://codepen.io/lbebber/pen/lFdHu

【案例练习】02—32 个网站分页效果的练习_css_18

18、JQuery分页

演示地址：https://codepen.io/Idered/pen/qthxp

【案例练习】02—32 个网站分页效果的练习_css_19

19、使用 SVG 进行分页

演示地址：https://codepen.io/Adamlwells408/pen/RYMVVb

【案例练习】02—32 个网站分页效果的练习_html_20


20、Jquery CSS3分页

演示地址：https://codepen.io/banik/pen/BxrGjp

【案例练习】02—32 个网站分页效果的练习_css_21

21、 CSS Javascript分页

演示地址：https://codepen.io/mandynicole/pen/cELet

【案例练习】02—32 个网站分页效果的练习_html_22

22、响应式分页

演示地址：https://codepen.io/tomhodgins/pen/zqZeqv

【案例练习】02—32 个网站分页效果的练习_分页_23

23、响应式分页

演示地址：https://codepen.io/iamryanyu/pen/WbjWwm

【案例练习】02—32 个网站分页效果的练习_css_24

24、CSS3响应式分页

演示地址：https://codepen.io/netzzwerg/pen/hfutI

【案例练习】02—32 个网站分页效果的练习_css_25

25、分页按钮

演示地址：https://codepen.io/himalayasingh/pen/WmNKjE

【案例练习】02—32 个网站分页效果的练习_css_26

26、SVG分页

演示地址：https://codepen.io/chrisgannon/pen/xVOjZq

【案例练习】02—32 个网站分页效果的练习_css_27

27、CSS分页

演示地址：https://codepen.io/jsnanigans/pen/dXAYBJ

【案例练习】02—32 个网站分页效果的练习_css_28

28、变形分页

演示地址：https://codepen.io/aaroniker/pen/pojXjrZ


【案例练习】02—32 个网站分页效果的练习_css_29

29、分页

演示地址：https://codepen.io/crawlink/pen/qNbwpE

【案例练习】02—32 个网站分页效果的练习_分页_30


30、分页导航

演示地址：https://codepen.io/himalayasingh/pen/BOxoex

【案例练习】02—32 个网站分页效果的练习_html_31

31、悬停分页效果

演示地址：https://codepen.io/markmead/pen/WgJzKJ


【案例练习】02—32 个网站分页效果的练习_html_32

32、分页

演示地址：https://codepen.io/alphardex/pen/QWwwwpp

【案例练习】02—32 个网站分页效果的练习_html_33

总结

以上就是我今天与您分享的32个分页案例的练习效果，希望对您的网站开发工作有所帮助，如果您有任何问题，请在留言区给我留言，我会尽快回复。

最后，感谢您的阅读，如果您觉得今天内容有帮助，请记得点赞我，关注我，并将它分享给您身边需要的朋友，也许能够帮助到他。

祝您今天过得愉快！

推荐阅读

​​【案例练习】01—38个网站的设计用户界面案例练习​​



学习更多技能

请点击下方公众号



【案例练习】02—32 个网站分页效果的练习_分页_34

【案例练习】02—32 个网站分页效果的练习_分页_35