cid1015 用6 分钟 HTML CSS 翻页设计包括源码下载

index.html

  1. <!DOCTYPE html>
  2. <html lang="en" dir="ltr">
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <link rel="stylesheet" href="style.css">
  7. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.css">
  8. </head>
  9. <body>
  10. <div class="pagination">
  11. <a href="#" class="prev"><i class="fas fa-angle-left"></i></a>
  12. <a href="#" class="num active">1</a>
  13. <a href="#" class="num">2</a>
  14. <a href="#" class="num">3</a>
  15. <a href="#" class="num">4</a>
  16. <a href="#" class="num">5</a>
  17. <a href="#" class="next"><i class="fas fa-angle-right"></i></a>
  18. </div>
  19. </body>
  20. </html>
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.css">
  </head>
  <body>
    <div class="pagination">
      <a href="#" class="prev"><i class="fas fa-angle-left"></i></a>
      <a href="#" class="num active">1</a>
      <a href="#" class="num">2</a>
      <a href="#" class="num">3</a>
      <a href="#" class="num">4</a>
      <a href="#" class="num">5</a>
      <a href="#" class="next"><i class="fas fa-angle-right"></i></a>
    </div>
  </body>
</html>

 

style.css

  1. *{
  2. margin: 0;
  3. padding: 0;
  4. text-decoration: none;
  5. box-sizing: border-box;
  6. font-family: "Open Sans",sans-serif;
  7. }
  8. body{
  9. background: #f1f1f1;
  10. }
  11. .pagination{
  12. position: absolute;
  13. top: 50%;
  14. width: 100%;
  15. text-align: center;
  16. transform: translateY(-50%);
  17. }
  18. .pagination a{
  19. margin: 6px 1px;
  20. display: inline-block;
  21. width: 60px;
  22. background: #2c3e50;
  23. height: 60px;
  24. line-height: 60px;
  25. color: #fff;
  26. font-weight: 600;
  27. transition: 0.3s;
  28. position: relative;
  29. padding-right: 26px;
  30. }
  31. .prev,.next{
  32. padding-right: 12px !important;
  33. font-size: 20px;
  34. }
  35. .pagination a:hover{
  36. color: #e74c3c;
  37. }
  38. .active{
  39. color: #e74c3c !important;
  40. }
  41. .prev{
  42. border-radius: 30px 0 0 30px;
  43. }
  44. .next{
  45. border-radius: 0 30px 30px 0;
  46. }
  47. .pagination a::before,.pagination a:after{
  48. content: "";
  49. position: absolute;
  50. border-top: 30px solid transparent;
  51. border-bottom: 30px solid transparent;
  52. }
  53. .num::before,.next::before{
  54. border-right: 20px solid #2c3e50;
  55. right: 100%;
  56. }
  57. .num:after,.prev:after{
  58. border-right: 20px solid #f1f1f1;
  59. right: 0;
  60. }
*{
  margin: 0;
  padding: 0;
  text-decoration: none;
  box-sizing: border-box;
  font-family: "Open Sans",sans-serif;
}

body{
  background: #f1f1f1;
}

.pagination{
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
  transform: translateY(-50%);
}

.pagination a{
  margin: 6px 1px;
  display: inline-block;
  width: 60px;
  background: #2c3e50;
  height: 60px;
  line-height: 60px;
  color: #fff;
  font-weight: 600;
  transition: 0.3s;
  position: relative;
  padding-right: 26px;
}
.prev,.next{
  padding-right: 12px !important;
  font-size: 20px;
}
.pagination a:hover{
  color: #e74c3c;
}

.active{
  color: #e74c3c !important;
}

.prev{
  border-radius: 30px 0 0 30px;
}

.next{
  border-radius: 0 30px 30px 0;
}

.pagination a::before,.pagination a:after{
  content: "";
  position: absolute;
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
}
.num::before,.next::before{
  border-right: 20px solid #2c3e50;
  right: 100%;
}

.num:after,.prev:after{
  border-right: 20px solid #f1f1f1;
  right: 0;
}

 

 

让链接同时具备两种打开方式
获取源码: Pagination
下载数:56人次, 文件大小: 1.1 KB, 上传日期: 2020年-11 月-25日

公众号回复:gcode  获取解压密码

qrcode_for_gh_6ea2c28a1709_258 (1)

2,346 人查阅

类似文章