CSS 分页实例

学习如何使用 CSS 创建响应式分页。

سادہ پینجنگ

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

مثال

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

خود کو بچاس کریں

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

خود کو بچاس کریں