آموزش صفحه بندی یا Pagination در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش صفحه بندی یا Pagination در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
- 1 تعریف صفحه بندی یا Pagination در CSS
- 2 ایجاد ستون اصلی صفحه بندی
- 3 اضافه کردن رنگ زمینه به آیتم های صفحه بندی
- 4 اضافه کردن صفحه فعال به صفحه بندی
- 5 گرد کردن آیتم های صفحه بندی
- 6 کشیدن خط به دور لبه های آیتم ها
- 7 ایجاد فاصله بین آیتم های صفحه بندی
- 8 نحوه قرار دادن صفحه بندی در وسط صفحه
- 9 سایه دادن به صفحه بندی
تعریف صفحه بندی یا Pagination در CSS
خب اصلا صفحه بندی یا Pagination یا ناوبری صفحه چیه؟ فک کنم دیگه تا الان برای یکبارم که شده صفحه بندی های یک سایت رو دیده اید، این صفحه بندی ها معمولا در پایان هر صفحه قرار میگیرند و کاربر با کلیک بروی شماره صفحه میتواند به صفحه مورد نظر منتقل شود.
پس بطور کلی به اون باکسی که در پایان یک صفحه قرار میگیرد و دارای یکسری شماره مثله ( …,۱,۲,۳ ) جهت پیمایش در صفحات یک سایت می باشد، صفحه بندی یا Pagination می گوییم.
بطور کلی میتونیم بگیم یک صفحه بندی ۲ بُعد داره :
- بُعد ظاهر و طراحی : که توسط HTML و CSS ایجاد می شود
- بُعد برنامه نویسی : که وقتی کاربر مثلا بروی صفحه شماره ۴ کلیک میکنه به اون صفحه منتقل شود، این کارا توسط زبان های برنامه نویسی و یا توسط اون سیستمی که قرار است سایت روش اجرا بشه، انجام میگیره.
Free-Learn
ایجاد ستون اصلی صفحه بندی
خب ما در ادامه میخوایم با بُعد طراحی یا ظاهری صفحه بندی ها آشنا بشیم و بتونیم صفحه بندی های دلخواه خودمون رو با استایل و شکل شمایل دلخواه خودمون ایجاد نماییم.
خب ما باید اول از هرچیزی ستون یا اون ساختار اصلی صفحه بندی مون رو ایجاد نماییم، ما از چندین روش میتونیم این ستون یا ساختار رو ایجاد نماییم ولی من از روش زیر استفاده میکنم :
- استفاده از تگ a
همونطور که میدونید تگ a تگی است که با استفاده از آن میتوان یک لینک را در یک صفحه وب ایجاد کرد، خب پس اینجاهم برای اینکه شماره های موجود در صفحه بندی هامون قابل کلیک باشن میتونیم از این تگ استفاده نماییم.
پس میایم اول یک ظرف برای نگهداری شماره های صفحه بندی ایجاد میکنیم، خیلی راحت با استفاده از تگ Div میتوانیم این ظرف را ایجاد نماییم.
بعدش درون این ظرف میایم و از تگ a به نسبت شماره صفحه هامون استفاده مینماییم. چون میخوایم یک لینک داشته باشیم برای اولین صفحه و یک لینک برای آخرین صفحه و ۵ تا هم برای شماره گذاری، پس از ۷ تگ a استفاده مینماییم.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<body> <div class="pagination"> <a href="#">اولین صفحه</a> <a href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> <a href="#">آخرین صفحه</a> </div> </body> |
اگه لطف بفرمایید و بروی دکمه ( امتحان کنید ) کلیک نمایید ، همانطور که مشاهده مینمایید خب ما ستون اصلی رو با استفاده از تگ های DIV و A ایجاد کردیم.
در ادامه میخوایم یکمی بیشتر روی استایل یا شکل شمایل لینک هامون کار کنیم و خوشکلترش کنیم، پس اینجا دیگه باید از CSS استفاده نماییم.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<style> .pagination { display: inline-block; } .pagination a { color: black; float: right; padding: 8px 16px; text-decoration: none; } </style> |
Free-Learn
اضافه کردن رنگ زمینه به آیتم های صفحه بندی
در ادامه میخوایم رنگ زمینه به شماره های صفحه بندی مون اضافه نماییم، من میخوام وقتی ماوس بروی شماره صفحه ها رفت رنگ زمینه اون شماره تغییر کنه.
|
1 2 3 |
.pagination a:hover{ background-color:#f2f2f2; } |
Free-Learn
اضافه کردن صفحه فعال به صفحه بندی
در ادامه ی ( آموزش صفحه بندی یا Pagination در CSS ) میخوایم یک صفحه فعال برای صفحه بندی مون ایجاد نماییم، خب یعنی چی صفحه فعال!؟ به اون صفحه ای که کاربر درش قرار داره میگیم صفحه فعال، پس طبیعتا این صفحه فعال باید متفاوت باشه با دیگر صفحات ، جوری که کاربر بدونه در مثلا فلان صفحه قرار دارد.
نکته : ما باید کاری کنیم که وقتی ماوس بروی آیتم های صفحه بندی میره رنگ زمینه اون صفحه فعال تغییر نکنه ، پس از تکه زیر استفاده مینماییم.
تکه کد زیر داره میگه : وقتی ماوس بروی آیتم های لینک دار رفت رنگ زمینش را f2f2f2 کن ولی اون صفحه فعال رو رنگش رو تغییر نده.
|
1 2 3 |
.pagination a:hover:not(.active){ background-color:#f2f2f2; } |
|
1 2 3 4 5 6 7 8 |
.pagination a.active{ background-color:#5db616; color:#fff; } .pagination a:hover:not(.active){ background-color:#f2f2f2; } |
Free-Learn
گرد کردن آیتم های صفحه بندی
در ادامه میخوایم با استفاده از ویژگی border-radius آیتم ها ( منظورم همون شماره های صفحه بندی هس ) را گرد نماییم.
|
1 2 3 |
.pagination a { border-radius:50px; } |
Free-Learn
کشیدن خط به دور لبه های آیتم ها
با استفاده از ویژگی border میتوانیم یک خط به دور لبه های آیتم های صفحه بندی مون بکشیم.
|
1 2 3 |
.pagination a { border: 1px solid #ddd; } |
Free-Learn
ایجاد فاصله بین آیتم های صفحه بندی
در ادامه میخوایم با استفاده از ویژگی margin یک فاصله ی مشخصی را بین آیتم های صفحه بندی مون ایجاد نماییم.
|
1 2 3 |
.pagination a { margin:0 3px; } |
Free-Learn
نحوه قرار دادن صفحه بندی در وسط صفحه
در ادامه میخوایم یاد بگیریم که چگونه میتوان صفحه بندی مون رو در وسط صفحه قرار بدیم، برای اینکار خیلی راحت میتونیم یک کلاس ایجاد کنیم سپس صفحه بندی مون رو بزاریم داخل این کلاس.
|
1 2 3 |
.my-center{ text-align:center; } |
Free-Learn
سایه دادن به صفحه بندی
با استفاده از ویژگی box-shadow میتوانیم سایه های جذابی به صفحه بندی مون بدیم.
|
1 2 3 |
.pagination a { box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.2),0 1px 5px 0 rgba(0,0,0,0.12); } |
Free-Learn
خب دوستان خسته نباشید میگم بهتون ، به پایان این جلسه ( آموزش صفحه بندی یا Pagination در CSS ) رسیدیم، امیدوارم که مشکلی در این جلسه نداشته باشید.
