CSS Pagination နမူနာများ
CSS ကို အသုံးပြု၍ တုံ့ပြန်မှုရှိသော pagination ဖန်တီးနည်းကို လေ့လာပါ။
ရိုးရှင်းသော Pagination
သင့်တွင် စာမျက်နှာများစွာရှိသော ဝဘ်ဆိုက်တစ်ခုရှိပါက၊ စာမျက်နှာတစ်ခုစီတွင် pagination အမျိုးအစားအချို့ကို သင်ထည့်သွင်းလိုပေမည်။
ဥပမာ
.pagination {
display: inline-block;
}
.pagination a {
color:
black;
float: left;
padding: 8px
16px;
text-decoration: none;
}
တက်ကြွပြီး လွှမ်းမိုးနိုင်သော Pagination
လက်ရှိစာမျက်နှာကို .active
အတန်း တစ်ခုဖြင့် မီးမောင်းထိုးပြပြီး :hover
စာမျက်နှာလင့်ခ်တစ်ခုစီ၏အရောင်ကို ၎င်းတို့အပေါ်မှ မောက်စ်ရွှေ့သည့်အခါ ရွေးချယ်မှုကိရိယာကို အသုံးပြုပါ-
ဥပမာ
.pagination a.active {
background-color:
#4CAF50;
color: white;
}
.pagination a:hover:not(.active) {background-color: #ddd;}
Rounded Active နှင့် Hoverable ခလုတ်များ
border-radiusလုံးဝန်းသော "active" နှင့် "hover" ခလုတ်ကို လိုချင် ပါက ပိုင်ဆိုင်မှုကို ထည့်ပါ -
ဥပမာ
.pagination a {
border-radius: 5px;
}
.pagination a.active {
border-radius: 5px;
}
Hoverable Transition Effect
transitionhover တွင် အကူးအပြောင်းအကျိုးသက်ရောက်မှုဖန်တီးရန် စာမျက်နှာလင့်ခ်များသို့ ပိုင်ဆိုင်မှုကို ထည့်ပါ -
ဥပမာ
.pagination a {
transition: background-color .3s;
}
နယ်နိမိတ်မျဉ်း
borderpagination တွင် ဘောင်များထည့်ရန် ပိုင်ဆိုင်မှုကို သုံး ပါ-
ဥပမာ
.pagination a {
border: 1px solid #ddd; /* Gray
*/
}
လုံးဝန်းသော နယ်နိမိတ်များ
အကြံပြုချက်- pagination ရှိ သင်၏ ပထမဆုံး နှင့် နောက်ဆုံး လင့်ခ်တွင် အဝိုင်းသား ဘောင်များကို ထည့်ပါ-
ဥပမာ
.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 */
}
Pagination အရွယ်အစား
font-sizeပိုင်ဆိုင်မှု ဖြင့် pagination ၏အရွယ်အစားကို ပြောင်းပါ-
ဥပမာ
.pagination a {
font-size: 22px;
}
ဗဟိုပြု Pagination
pagination ကို ဗဟိုပြုရန်၊ ကွန်တိန်နာဒြပ်စင် ( <div> ကဲ့သို့) နှင့်ပတ်ပတ်လည် ပတ်ထားသည်။text-align:center
ဥပမာ
.center {
text-align: center;
}
နောက်ထပ် ဥပမာများ
ဥပမာ
Breadcrumbs
pagination ၏နောက်ထပ်ပြောင်းလဲမှုကို "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";
}