วิธีการ - การแบ่งหน้า CSS
เรียนรู้วิธีสร้างการแบ่งหน้าด้วย CSS
วิธีการสร้างการแบ่งหน้า
ขั้นตอนที่ 1) เพิ่ม 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>
ขั้นตอนที่ 2) เพิ่ม CSS:
ตัวอย่าง
/* Pagination links */
.pagination a {
color:
black;
float: left;
padding: 8px
16px;
text-decoration: none;
transition: background-color .3s;
}
/* Style the active/current link
*/
.pagination a.active {
background-color: dodgerblue;
color: white;
}
/*
Add a grey background color on mouse-over */
.pagination a:hover:not(.active) {background-color: #ddd;}
ไปที่CSS Pagination Tutorialเพื่อเรียนรู้เพิ่มเติมเกี่ยวกับการแบ่งหน้า