CSS صفحات نمونہ

CSS کا استعمال سے ریسپانسیو صفحات بنانے سیکھیں.

سادے صفحات بنائیں

اگر ویب سائٹ میں بہت سارے پیجز ہیں تو آپ ممکن ہو کہ ہر پیج پر کچھ صفحات بنائیں چاہیئے:

مثال

.pagination {
  display: inline-block;
}
.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}

خود کا تجربہ کریں

صفحات فعال و قابل قرار دادن ماوس

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

مثال

.pagination a.active {
  background-color: #4CAF50;
  color: white;
}
.pagination a:hover:not(.active) {background-color: #ddd;}

خود کا تجربہ کریں

صفحات فعال و قابل قرار دادن ماوس با لبه‌های گرد

اگر نیاز به لبه‌های گرد برای دکمه‌های "active" و "hover" دارید، اضافه کنید border-radius ویژگی‌ها:

مثال

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

خود کا تجربہ کریں

افکت گذر قابل قرار دادن ماوس

لطفاً transition ویژگی‌ها برای اضافه کردن افکت گذر از رنگ به لینک‌های صفحه، برای زمانی که ماوس روی آن‌ها قرار می‌گیرد:

مثال

.pagination a {
  transition: background-color .3s;
}

خود کا تجربہ کریں

صفحات با لبه

از border ویژگی‌ها برای اضافه کردن لبه به صفحات:

مثال

.pagination a {
  border: 1px solid #ddd; /* خاکستری */
}

خود کا تجربہ کریں

لبه‌های گرد

توضیح:در لینک‌های اولین و آخرین صفحات، لبه‌های گرد اضافه کنید:

مثال

.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 ویژگی‌ها:

مثال

.pagination a {
  margin: 0 4px; /* فاصله‌های بیرونی و بالای پایین 0، قابل تغییر است */
}

خود کا تجربہ کریں

اندازه صفحات

از font-size تغییر اندازه صفحات از طریق این ویژگی‌ها:

مثال

.pagination a {
  font-size: 22px;
}

خود کا تجربہ کریں

صفحات قرار داده شده در وسط

برای قرار دادن صفحات در وسط، از آنچه که تنظیم شده است استفاده کنید text-align:center کوئی عناصر داخلی (مثلاً <div>) آن را احاطه می‌کند:

مثال

.center {}}
  text-align: center;
}

خود کا تجربہ کریں

بھی متعدد مثال

مثال

خود کا تجربہ کریں

بریک کرس

پیجنگ کی ایک دوسری شکل، جسے ‘بریک کرس’ کہا جاتا ہے، یہ ہےً:

مثال

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";
}

خود کا تجربہ کریں