ตัวอย่างการแบ่งหน้า CSS

เรียนรู้วิธีการใช้ CSS ที่จะสร้างการแบ่งหน้าที่เหมาะกับโครงสร้างเว็บไซต์

การแบ่งหน้าง่าย

ถ้ามีหลายหน้าเว็บไซต์บนเว็บไซต์ของคุณ คุณอาจจะต้องการที่จะเพิ่มฟังก์ชันการแบ่งหน้าบนแต่ละหน้า:

ตัวอย่าง

.pagination {
  display: inline-block;
}
.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}

ทดลองด้วยตัวเอง

หน้าเพจที่สามารถเห็นได้เมื่อเปลี่ยนลิงก์

ด้วย .active คลาสที่แสดงระหว่างที่หน้าเพจที่คัดเลือกและเมื่อเปลี่ยนลิงก์ :hover เลือกเพื่อเปลี่ยนสีของลิงก์หน้าเพจทุกตัว

ตัวอย่าง

.pagination a.active {
  background-color: #4CAF50;
  color: white;
}
.pagination a:hover:not(.active) {background-color: #ddd;}

ทดลองด้วยตัวเอง

หน้าเพจที่มีขอบโหนกลมที่สามารถเห็นได้เมื่อเปลี่ยนลิงก์

ถ้าคุณต้องการที่จะมีขอบโหนกลมที่ "active" และ "hover" border-radius คุณสมบัติ

ตัวอย่าง

.pagination a {
  border-radius: 5px;
}
.pagination a.active {
  border-radius: 5px;
}

ทดลองด้วยตัวเอง

ปรากฎการณ์โทรเล็กตร์ที่สามารถเห็นได้เมื่อเปลี่ยนลิงก์

โปรดนำ transition คุณสมบัติเพิ่มลงลิงก์หน้าเพจเพื่อสร้างปรากฎการณ์โทรเล็กตร์เมื่อเห็นลิงก์

ตัวอย่าง

.pagination a {
  transition: background-color .3s;
}

ทดลองด้วยตัวเอง

หน้าเพจที่มีขอบชัน

ใช้ border คุณสมบัติเพิ่มขอบชันแก่หน้าเพจ

ตัวอย่าง

.pagination a {
  border: 1px solid #ddd; /* สีเทา */
}

ทดลองด้วยตัวเอง

ขอบโหนกลม

คำเตือน:เพิ่มขอบโหนกลมที่ด้านแรกและสุดท้ายของลิงก์หน้าเพจ

ตัวอย่าง

.pagination a:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.pagination a:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

ทดลองด้วยตัวเอง

ช่องว่างระหว่างลิงก์

คำเตือน:ถ้าไม่ต้องการที่จะเชื่อมโยงหน้าเพจเป็นกลุ่ม margin คุณสมบัติ

ตัวอย่าง

.pagination a {
  margin: 0 4px; /* ขนาดช่องว่างด้านบนและด้านล่าง 0 และสามารถปรับเปลี่ยนได้ */
}

ทดลองด้วยตัวเอง

ขนาดหน้าเพจ

ใช้ font-size เปลี่ยนขนาดของหน้าเพจด้วยการเปลี่ยนค่า

ตัวอย่าง

.pagination a {
  font-size: 22px;
}

ทดลองด้วยตัวเอง

หน้าเพจที่จัดวางในตำแหน่งกลาง

ถ้าต้องการที่จะจัดวางหน้าเพจในตำแหน่งกลาง text-align:center ลักษณะขององค์ประกอบฝายที่ล้อมรอบมัน (เช่น <div>)

ตัวอย่าง

.center {}}
  text-align: center;
}

ทดลองด้วยตัวเอง

ตัวอย่างเพิ่มเติม

ตัวอย่าง

ทดลองด้วยตัวเอง

โน้ตเรียน

หนึ่งรูปแบบของการแบ่งหน้าคือ 'โน้ตเรียน' (breadcrumbs):

ตัวอย่าง

ul.breadcrumb {
  padding: 8px 16px;
  list-style: none;
  background-color: #eee;
}
ul.breadcrumb li {display: inline;}
ul.breadcrumb li+li:before {
  padding: 8px;
  color: black;
  content: "/\00a0";
}

ทดลองด้วยตัวเอง