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

स्वयं प्रयोग करें

अधिक इंस्टेंस

इंस्टेंस

स्वयं प्रयोग करें

ब्रेडक्रूम

पेजिंग का एक अन्य रूप ब्रेडक्रूम (breadcrumbs) कहलाता हैः

इंस्टेंस

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

स्वयं प्रयोग करें