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

最新推荐文章于 2023-12-05 09:30:29 发布

web前端开发V

最新推荐文章于 2023-12-05 09:30:29 发布

阅读量494

点赞数

原文链接：https://mp.weixin.qq.com/s?__biz=MjM5MDA2MTI1MA==&mid=2649119666&idx=2&sn=ea2a75b5709c710009f973bb7df3d35f&chksm=be587c1f892ff50913d35227ae08cf59a48e7b32c83eb3a3bbe1b1dca2816f6d1769dd5ca118&scene=126&&sessionid=0

版权

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

最终效果如下：

演示地址：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%;
  }

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

演示地址：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;
 }

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