با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش CSS را دنبال می کنند. زمانیکه مطلبی را در موتورهای جستجوگر از جمله Google جستجو می کنید، به دلیل زیاد بودن، نتایج در صفحات ۲ ، ۳ و… لیست می شود، و در انتهای صفحه یک نوار pagination (صفحه بندی) با شماره صفحات و دکمه صفحه ی قبلی و بعدی برای دسترسی شما به صفحه ی مورد نظر لحاظ شده است، مشابه همین حالت می تواند در وب سایت هایی با محتوای زیاد اتفاق بیفتد، در اینگونه موارد که محتوای وب سایت در چنیدن صفحه تقسیم می شود، برای دسترسی کاربران به صفحات مورد نظرشان استفاده از تکنیک صفحه بندی در CSS بهترین راه کار می باشد، در ادامه ی مباحث برای آشنایی با پیاده سازی pagination در CSS با ما همراه باشید.
در این آموزش ما شما را با ساختار اصلی pagination در CSS و چند حالت مختلف آن آشنا می کنیم.
برای ایجاد یک pagination در CSS ساده در وب سایت خود می توانید یک صفحه بندی ساده مانند زیر اضافه کنید.
صفحه بندی در CSS – حالت ساده
1 2 3 4 5 6 7 8 9 10 | .pagination { display: inline-block; } .pagination a { color: black; float: left; padding: 8px 16px; text-decoration: none; } |
pagination در CSS -ویژگی hover
در مثال فوق از کلاس .active
برای مشخص کردن صفحه ی فعال و با استفاده از انتخابگر :hover
نیز حرکت ماوس روی هر بخش از pagination را مشخص می کنیم.
1 2 3 4 5 6 | .pagination a.active { background-color: #4CAF50; color: white; } .pagination a:hover:not(.active) {background-color: #ddd;} |
صفحه بندی در CSS -گرد کردن گوشه ها
با استفاده از ویژگی border-radius
می توانید گوشه های دکمه های active و پس زمینه hover را گرد کرد.
1 2 3 4 5 6 7 | .pagination a { border-radius: 5px; } .pagination a.active { border-radius: 5px; } |
pagination در CSS -افزودن انیمیشن
با استفاده از ویژگی transition
می توانید یک افکت انیمیشن در حالت hover
تعریف کنید:
با استفاده از ویژگی border
می توانید به مرزهای صفحه بندی خود border اضافه کنید:
1 2 3 | .pagination a { border: 1px solid #ddd; /* Gray */ } |
1 2 3 4 5 6 7 8 9 | .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
می توانید بین لینک های صفحه بندی فاصله ایجاد کنید:
1 2 3 | .pagination a { margin: 0 4px; /* 0 is for top and bottom. Feel free to change it */ } |
با ویژگی font-size
می توانید اندازه ی فونت صفحه بندی را تغییر دهید:
برای قراردادن صفحه بندی در مرکز کافیست کد text-align:center
را به عنصر ظرف (مثل <div>) آن اضافه کنید:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | <!DOCTYPE html> <html> <head> <style> .pagination { display: inline-block; } .pagination a { color: black; float: left; padding: 8px 16px; text-decoration: none; transition: background-color .3s; border: 1px solid #ddd; } .pagination a.active { background-color: #4CAF50; color: white; border: 1px solid #4CAF50; } .pagination a:hover:not(.active) {background-color: #ddd;} </style> </head> <body> <p>Next/Previous buttons:</p> <div class="pagination"> <a href="#">❮</a> <a href="#">❯</a> </div> <p>Navigation pagination:</p> <div class="pagination"> <a href="#" class="active">Home</a> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </body> </html> |
1 2 3 4 5 6 7 8 9 10 11 12 13 | 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"; } |
اگر از وب سایتی با محتوای بسیار زیاد استفاده می کنید که باید در صفحات متعدد قرار بگیرند استفاده از ویژگی صفحه بندی در CSS برای دسترسی به صفحات مختلف بهترین گزینه برای اینگونه موارد است.
erfan
سلام لینک دهی به این صفحه بندی برای صفحات بعدی از چه طریقی انجام میشه.
برای صفحه قبل جاوااسکریپت جواب می ده ولی برای صفحات بعد که تا حالا بازدید نشدن چیکار باید کرد؟؟
ممنون
پی وی لرن
با سلام
برای صفحه بندی شما باید دقیقا آدرس صفحه قبل و بعد را داخل href قرار دهید و در html و css صرفا لینک ها دمو هستند بعد در سمت سرور با زبان های دیگر مانند asp و php می توانید درست کنید.