سلام! اگه شما هم مثل خیلی‌ها تو طراحی‌های وب خودتون نیاز به صفحه‌بندی دارید، جای درستی اومدید. صفحه‌بندی برای تقسیم محتوای طولانی به چند بخش کوچیک‌تر استفاده میشه، تا کاربرها راحت‌تر بتوانند اطلاعات مورد نظرشون رو پیدا کنند.
صفحه‌بندی تو وبسایت‌ها معمولاً به معنی دکمه‌های قبلی، بعدی، و گاهی شماره‌هاست که کاربر می‌تونه صفحات مختلف رو با اونا تغییر بده. این که چرا صفحه‌بندی مهمه، خیلی سادست؛ چون به کاربر کمک می‌کنه اطلاعات رو راحت‌تر و سریع‌تر دسته‌بندی کنه.
حالا بریم سراغ چگونگی پیاده‌سازی این تکنیک تو CSS. معمولاً شما باید با HTML و CSS کار کنید تا ساختار و سبک‌بندی صفحه‌بندی رو انجام بدید. از اونجا که قوانین CSS پیشرفته‌تر شده، می‌تونیم از فلکس‌باکس یا گرید استفاده کنیم تا صفحه‌بندی‌های مدرن‌تر و زیباتری بسازیم.
بهتره اول با یک مثال ساده شروع کنیم. فرض کنید ما یک لیست طولانی از داده‌ها داریم و می‌خواهیم با استفاده از صفحه‌بندی اونا رو به نمایش بذاریم. توی مثال زیر، نشون میدیم چطور می‌تونید با CSS دکمه‌های صفحه‌بندی بسازید.
<nav class="pagination">
<a href="#" class="prev">قبلی</a>
<a href="#" class="page-number active">1</a>
<a href="#" class="page-number">2</a>
<a href="#" class="page-number">3</a>
<a href="#" class="next">بعدی</a>
</nav>
<style>
.pagination {
display: flex;
list-style-type: none;
}
.page-number, .prev, .next {
margin: 5px;
padding: 8px 16px;
text-decoration: none;
color: #000;
border: 1px solid #ddd;
border-radius: 5px;
}
.active {
background-color: #4CAF50;
color: white;
}
.page-number:hover, .prev:hover, .next:hover {
background-color: #ddd;
}
</style>
<nav>: این عنصر HTML برای ایجاد یک نوار ناوبری استفاده می‌شود که در اینجا برای صفحه‌بندی کاربرد دارد.
<a> با کلاس prev: این لینک دکمهٔ «قبلی» را ایجاد می‌کند.
<a> با کلاس page-number: این لینک‌ها شماره صفحات را نشان می‌دهند.
کلاس active: برای مشخص کردن شماره صفحه فعلی استفاده می‌شود و سبک متفاوتی دارد تا مشخص شود کاربر در کدام صفحه قرار دارد.
استایل‌های CSS: کلیه تنظیمات ظاهری دکمه‌ها و نحوه نمایش نوار ناوبری در این قسمت است که برای زیباسازی و کاربری بهتر اعمال می‌شود.