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

作者code 2022年7月31日2023年10月15日

index.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

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

让链接同时具备两种打开方式