جستجو برای:
  • خانه
  • طراحی سایت
  • خدمات ما
    • سامانه یادگیری الکترونیکی – سایا (LMS)
    • سامانه الکترونیکی مدیریت آموزش (ساما) (EMS)
    • پشتیبانی نرم افزار
    • پشتیبانی سخت افزار
    • پشتیبانی شبکه
    • پشتیبانی ماشین های اداری
  • نمونه کارها
  • قالب و افزونه
  • دسته بندی مطالب
    • آموزش مجازی
    • اخبار سینما
    • افزونه وردپرس
    • آموزش افزونه وردپرس
    • بازی
    • دوره های رایگان
    • سریال
    • فناوری
    • فیلم
      • اکشن
      • تاریخی
      • ترسناک
      • کمدی
      • هیجان انگیز
      • ورزشی
    • قالب وردپرس
      • قالب خبری و وبلاگ
      • قالب شرکتی
      • قالب نمونه کار
      • قالب های چند منظوره
    • مقالات
      • بازایابی دیجیتال
      • برنامه نویسی
      • تولید و بازاریابی محتوا
      • طراحی و گرافیک
  • تماس با ما
  • DMCA
  • پشتیبان سایت
 
  • 02144824488
  • info@myhamyar.com
  • بلاگ
  • تماس با ما
  • درباره ما
همیارِمَن  | آموزش برنامه نویسی و طراحی سایت | طراحی گرافیک
دسترسی سریع
  • پشتیبان سایت
0

ورود و ثبت نام

  • خانه
  • طراحی سایت
  • خدمات ما
    • سامانه یادگیری الکترونیکی – سایا (LMS)
    • سامانه الکترونیکی مدیریت آموزش (ساما) (EMS)
    • پشتیبانی نرم افزار
    • پشتیبانی سخت افزار
    • پشتیبانی شبکه
    • پشتیبانی ماشین های اداری
  • نمونه کارها
  • قالب و افزونه
  • دسته بندی مطالب
    • آموزش مجازی
    • اخبار سینما
    • افزونه وردپرس
    • آموزش افزونه وردپرس
    • بازی
    • دوره های رایگان
    • سریال
    • فناوری
    • فیلم
      • اکشن
      • تاریخی
      • ترسناک
      • کمدی
      • هیجان انگیز
      • ورزشی
    • قالب وردپرس
      • قالب خبری و وبلاگ
      • قالب شرکتی
      • قالب نمونه کار
      • قالب های چند منظوره
    • مقالات
      • بازایابی دیجیتال
      • برنامه نویسی
      • تولید و بازاریابی محتوا
      • طراحی و گرافیک
  • تماس با ما
  • DMCA
  • پشتیبان سایت

بلاگ

همیارِمَن | آموزش برنامه نویسی و طراحی سایت | طراحی گرافیکبلاگدوره های رایگانآموزش صفحه بندی یا Pagination در CSS

آموزش صفحه بندی یا Pagination در CSS

21 آبان 1400
ارسال شده توسط همیار من
دوره های رایگان
292 بازدید
آموزش صفحه بندی یا Pagination در CSS

خب اصلا صفحه بندی یا Pagination یا ناوبری صفحه چیه؟ فک کنم دیگه تا الان برای یکبارم که شده صفحه بندی های یک سایت رو دیده اید، این صفحه بندی ها معمولا در پایان هر صفحه قرار میگیرند و کاربر با کلیک بروی شماره صفحه میتواند به صفحه مورد نظر منتقل شود.

پس بطور کلی به اون باکسی که در پایان یک صفحه قرار میگیرد و دارای یکسری شماره مثله ( …,۱,۲,۳ ) جهت پیمایش در صفحات یک سایت می باشد، صفحه بندی یا Pagination می گوییم.

بطور کلی میتونیم بگیم یک صفحه بندی ۲ بُعد داره :

  • بُعد ظاهر و طراحی : که توسط HTML و CSS ایجاد می شود
  • بُعد برنامه نویسی : که وقتی کاربر مثلا بروی صفحه شماره ۴ کلیک میکنه به اون صفحه منتقل شود، این کارا توسط زبان های برنامه نویسی و یا توسط اون سیستمی که قرار است سایت روش اجرا بشه، انجام میگیره.

ایجاد ستون اصلی صفحه بندی

فهرست عناوین

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

خب ما در ادامه میخوایم با بُعد طراحی یا ظاهری صفحه بندی ها آشنا بشیم و بتونیم صفحه بندی های دلخواه خودمون رو با استایل و شکل شمایل دلخواه خودمون ایجاد نماییم.

خب ما باید اول از هرچیزی ستون یا اون ساختار اصلی صفحه بندی مون رو ایجاد نماییم، ما از چندین روش میتونیم این ستون یا ساختار رو ایجاد نماییم ولی من از روش زیر استفاده میکنم :

  • استفاده از تگ 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>

 

اضافه کردن رنگ زمینه به آیتم های صفحه بندی

در ادامه میخوایم رنگ زمینه به شماره های صفحه بندی مون اضافه نماییم، من میخوام وقتی ماوس بروی شماره صفحه ها رفت رنگ زمینه اون شماره تغییر کنه.

1
2
3
.pagination a:hover{
background-color:#f2f2f2;
}

 

اضافه کردن صفحه فعال به صفحه بندی

در ادامه ی ( آموزش صفحه بندی یا 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;
}

 

گرد کردن آیتم های صفحه بندی

در ادامه میخوایم با استفاده از ویژگی border-radius آیتم ها ( منظورم همون شماره های صفحه بندی هس ) را گرد نماییم.

1
2
3
.pagination a {
border-radius:50px;
}

 

کشیدن خط به دور لبه های آیتم ها

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

1
2
3
.pagination a {
border: 1px solid #ddd;
}

 

ایجاد فاصله بین آیتم های صفحه بندی

در ادامه میخوایم با استفاده از ویژگی margin یک فاصله ی مشخصی را بین آیتم های صفحه بندی مون ایجاد نماییم.

1
2
3
.pagination a {
margin:0 3px;
}

نحوه قرار دادن صفحه بندی در وسط صفحه

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

1
2
3
.my-center{
text-align:center;
}

 

سایه دادن به صفحه بندی

با استفاده از ویژگی 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);
}
بیشتر بخوانیم:
  • برترین ابزارهای تحلیل سایت
  • آموزش رایگان HTML مقدماتی تا پیشرفته بخش قالب بندی
  • آموزش کار با جداول در CSS
  • نحوه کامل فلکس باکس یا Flexbox در CSS3
  • قالب بندی متون در HTML
اشتراک گذاری:
برچسب ها: CSSPaginationآموزشآموزش CSSآموزش css pdfآموزش css پروژه محورآموزش css پیشرفتهآموزش css حرفه ایآموزش css و htmlآموزش css3آموزش css3 pdfآموزش css3 پیشرفتهآموزش css3 رایگانآموزش صفحه بندیآموزش صفحه بندی در cssصفحه بندی
در تلگرام
کانال ما را دنبال کنید!
در اینستاگرام
ما را دنبال کنید!

مطالب زیر را حتما مطالعه کنید

لوگو ادمین سایت

آموزش انیمیشن‌سازی با CSS

در این قسمت از آموزش انیمشن‌سازی در CSS قصد داریم به طور کلی به آموزش...
همیارمن

نحوه اضافه کردن کد PHP در وردپرس

اگر به دنبال اضافه کردن کد php در وردپرس به صفحات در وردپرس هستید به...

دوره رایگان طراحی فروشگاه اینترنتی!

در حال آپدیت... امروزه شاهد سایت های فروشگاهی بسیاری هستیم. افراد بسیاری وجود دارند که...

آموزش ایجاد لیست کشویی وابسته به هم در HTML

در این مقاله در همیار من قصد داریم یکی از مطالب بسیار مهم و کاربردی...
ترفندهای عکاسی حرفه‌ای با موبایل (ساده و بدون هزینه!)

ساده و بدون هزینه ترفند های عکاسی حرفه ای با موبایل را یاد بگیرید

یکی از وسایلی که امروزه تقریبا با همه ما همراه شده است و ساعت‌ها آن...
لوگو ادمین سایت

DOM چیست و چه کاربردی دارد؟

DOM عبارتی است که بیشتر آنرا در زبان جاوا اسکریپت می‌شنویم. در این مقاله در...

دیدگاهتان را بنویسید لغو پاسخ

جستجو در همیارمَن
جستجو برای:
  • آموزش مجازی
  • اخبار سینما
  • افزونه وردپرس
    • آموزش افزونه وردپرس
  • بازی
  • پیشنهادی
  • دسته‌بندی نشده
  • دوره های رایگان
  • سریال
  • فناوری
  • فیلم
    • اکشن
    • تاریخی
    • ترسناک
    • جنایی
    • کمدی
    • مستند
    • معمایی
    • هیجان انگیز
    • ورزشی
  • قالب HTML
  • قالب وردپرس
    • قالب خبری و وبلاگ
    • قالب شرکتی
    • قالب نمونه کار
    • قالب های چند منظوره
  • مقالات
    • بازایابی دیجیتال
    • برنامه نویسی
    • تولید و بازاریابی محتوا
    • طراحی و گرافیک
آخرین مطالب سایت
  • آموزش انیمیشن‌سازی با CSS
  • بهترین فیلم های اسلشر تاریخ سینما
  • نقد فیلم Cure – یک فیلم هیپنوتیزم کننده
  • نقد فیلم یتیم Orphan: First Kill
  • کسب درآمد از آموزش آنلاین چگونه است؟
برچسب‌ها
CSS HTML آموزش آموزش CSS آموزش css3 آموزش css3 pdf آموزش css3 رایگان آموزش css3 پیشرفته آموزش css pdf آموزش css حرفه ای آموزش css و html آموزش css پروژه محور آموزش css پیشرفته آموزش افزونه وردپرس آموزش تولید محتوا آموزش رایگان html همیارمن آموزش رایگان زبان html آموزش وب سایت افزونه وردپرس بازاریابی بازاریابی دیجیتال بازی بررسی بررسی بازی تولید محتوا دانلود افزونه وردپرس دانلود قالب وردپرس دوره دوره رایگان دیجیتال مارکتینگ سایت فناوری فیلم قالب قالب سایت قالب وب سایت قالب وردپرس نقد نقد بازی نقد فیلم نقد و بررسی نقد و بررسی بازی نقد و بررسی فیلم وردپرس ووکامرس

ورود

رمز عبور را فراموش کرده اید؟

هنوز عضو نشده اید؟ عضویت در سایت