ตัวอย่างการแบ่งหน้า 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;}
ปุ่มใช้งานและโฮเวอร์ได้แบบโค้งมน
เพิ่ม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; /* Gray
*/
}
ขอบมน
เคล็ดลับ:เพิ่มเส้นขอบโค้งมนให้กับลิงก์แรกและลิงก์สุดท้ายของคุณในการแบ่งหน้า:
ตัวอย่าง
.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 is for top
and bottom. Feel free to change it */
}
ขนาดเลขหน้า
เปลี่ยนขนาดของการแบ่งหน้าด้วยfont-sizeคุณสมบัติ:
ตัวอย่าง
.pagination a {
font-size: 22px;
}
การแบ่งหน้าตรงกลาง
หากต้องการให้เลขหน้าอยู่ตรงกลาง ให้ห่อองค์ประกอบคอนเทนเนอร์ (เช่น <div>) ล้อมรอบด้วยtext-align:center
ตัวอย่าง
.center {
text-align: center;
}
ตัวอย่างเพิ่มเติม
ตัวอย่าง
เกล็ดขนมปัง
อีกรูปแบบหนึ่งของการแบ่งหน้าเรียกว่า "เกล็ดขนมปัง":
ตัวอย่าง
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";
}