صفحه بندی در css3

10 / 10
از 1 کاربر

یکی از نکاتی که در طراحی سایت به آن توجه می شود صفحه بندی است. در این بخش از آموزش css3 قصد داریم چگونگی صفحه بندی در css3 را برای شما کاربران عزیز شرح دهیم. بنابراین درصورت تمایل به یادگیری نکات ریز در طراحی سایت با ما همراه باشید.
به طرو کلی در طراحی سایت صفحه بندی را به شکل های مختلف پیاده سازی می کنند.

در این مقاله برخی از انواع رایج صفحه بندی در css3 را توضیح می دهیم. عنصر صفحه بندی در css3، با عنوان Pagination اعمال می شود.

1. صفحه بندی ساده (Simple Pagination)

اگر در حال طراحی سایت با تعداد زیادی صفحه هستید، ممکن تمایل داشته باشید تا صفحات را به طور مرتب صفحه بندی کنید. برای این منظور از Pagination در css3 استفاده کنید.

ul.pagination {
display: inline-block;
padding: 0;
margin: 0;
}

ul.pagination li {display: inline;}

ul.pagination li a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}

2. صفحه بندی فعال و دارای هاور

در طراحی سایت با css3 می توانید با به کاربردن "active class." ، صفحه فعلی را برجسته کنید و همچنین این امکان را دارید تا با استفاده از سلکتور "hover:" ، رنگ لینک هر صفحه را در زمانی که موس بر روی آن قرار می گیرد، تغییر دهید.

ul.pagination li a.active {
background-color: #4CAF50;
color: white;
}

ul.pagination li a:hover:not(.active) {background-color: #ddd;}

ایجاد دکمه فعال و دارای هاور با حاشیه گرد

با اضافه کردن ویژگی border-radius، می توانید این کار را انجام دهید. مانند مثال زیر:

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

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

3. صفحه بندی دارای مرز (Bordered Pagination)

در طراحی سایت با css3 شما می توانید با استفاده از ویژگی border، به صفحه بندی خود مرز اضافه کنید.

ul.pagination li a {
border: 1px solid #ddd; /* Gray */
}

ارسال نظر و نظرات ثبت شده