सीएसएस पेजिनेशन उदाहरण
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;}
गोल सक्रिय और होवरेबल बटन
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; /* Gray
*/
}
गोल सीमाएं
टिप: पेजिनेशन में अपने पहले और आखिरी लिंक में गोल बॉर्डर जोड़ें:
उदाहरण
.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 is for top
and bottom. Feel free to change it */
}
पृष्ठ पर अंक लगाना आकार
प्रॉपर्टी के साथ पेजिनेशन का आकार बदलें font-size:
उदाहरण
.pagination a {
font-size: 22px;
}
केंद्रित पृष्ठ पर अंक लगाना
पेजिनेशन को केंद्र में रखने के लिए, इसके चारों ओर एक कंटेनर तत्व (जैसे <div>) लपेटें text-align:center
उदाहरण
.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";
}