CSS အဆင်းရဲ အမြင့်

ပုံပြွင်း သတ်မှတ်ထားရာ

ပုံပြွင်း သတ်မှတ်ထားရာ သတ်မှတ်ထားသည်။

ပုံပြွင်း အများအပြား ပါဝင်သော ဝတ္ထု ကို သုံးစွဲပါမည် အခါ အစားအသား ကို ပြောင်းလဲထားသည်။

ပုံပြွင်း သတ်မှတ်ထားရာ ကို အသုံးပြုပါမည် ကို ရှေ့နောက် ပေါင်းစပ်ထားသည်။

ပုံပြွင်း သတ်မှတ်ထားရာ - ကြီးမားသော အကျဉ်းချုပ်

အဆိုပါ ပုံပြွင်း 'navsprites.gif' ကို အသုံးပြုပါမည် အဆိုပါ ပုံပြွင်း သတ်မှတ်ထားသည်။

နည်းပိုင်းကြည့်တင်

CSS အသုံးပြုပါမည် အကျဉ်းချုပ်များကို ပြသထားသည်။

အောက်ရှိ အမှတ်အသား အကျဉ်းချုပ်များတွင် အဆိုပါ ပုံပြွင်း 'navsprites.gif' ကို ပြသထားသည်:

နောက်ထပ်

#home {
  width: 46px;
  height: 44px;
  background: url(navsprites.gif) 0 0;
}

亲自试一试

例子解释：

  • <img id="home" src="trans.gif"> - သာမန် ပုံပြွင်း ကို သတ်မှတ်ထားသည်။ သို့သော် src အချက်အလက် မမြဲမဆို အချက်အလက် သတ်မှတ်ထားသည်။ အမှတ်အသား ပုံပြွင်း သတ်မှတ်ထားသော ပုံပြွင်း ဖြင့် ပြသထားသည်။
  • width: 46px; height: 44px; - သတ်မှတ်ထားသော ပုံပြွင်း အစိတ်အပိုင်းကို
  • background: url(navsprites.gif) 0 0; - သတ်မှတ်ထားသော ပုံပြွင်း နှင့် တည်နေရာ (left 0px, top 0px)

ပုံပြွင်း သတ်မှတ်ထားရာ - နည်းပါးလျှင် နည်းပါးလျှင် နည်းပါးလျှင်

ကျမ်းစာအုပ်များကို အသုံးပြုပါမည် သတ်မှတ်ထားသည်။ သို့သော် သတ်မှတ်ထားသော သတ်မှတ်ထားသည်။

ကျမ်းစာအုပ်များကို အသုံးပြုပါမည် သတ်မှတ်ထားသည်။ သို့သော် သတ်မှတ်ထားသော သတ်မှတ်ထားသည်။

နောက်ထပ်

#navlist {
  position: relative;
}
#navlist li {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  top: 0;
}
#navlist li, #navlist a {
  height: 44px;
  display: block;
}
#home {
  left: 0px;
  width: 46px;
  background: url('img_navsprites.gif') 0 0;
}
#prev {
  left: 63px;
  width: 43px;
  background: url('img_navsprites.gif') -47px 0;
}
#next {
  left: 129px;
  width: 43px;
  background: url('img_navsprites.gif') -91px 0;
}

亲自试一试

例子解释：

  • #navlist {position:relative;} - သတ်မှတ်ထားသော သုံးဆောက်ထားရာ တည်နေရာ သတ်မှတ်ထားသည်။
  • #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} - 外边距和内边距设置为 0，删除 list-style，并且所有列表项都均为绝对定位
  • #navlist li, #navlist a {height:44px;display:block;} - အရာဝတ္တု အကွက် အထပ် ၄၄ ပမာဏ

ကျွန်တော်တို့ စတင် ကိုယ်စားပုံပြု နှင့် အေးချမ်းသာခြင်း ကို အဆိုပါ အချိန်အချက် အတွက် သတ်မှတ်ပါ:

  • #home {left:0px;width:46px;} - အရှေ့ ၀ ပမာဏ ချိန်တွင် ချိန်တွင် ယဉ်ကျေးမှု အကွက် ၄၆ ပမာဏ
  • #home {background:url(navsprites.gif) 0 0;} - ယဉ်ကျေးမှု ယဉ်ကျေးမှု ကို သို့မဟုတ် အခြေခံ အရှေ့ ၀ ပမာဏ, အခြေခံ အထပ် ၀ ပမာဏ
  • #prev {left:63px;width:43px;} - သို့မဟုတ် ၆၃ ပမာဏ အရှေ့သို့ ချိန်တွင် အခြေခံ ပါ (အိမ် ကိုယ်စားပုံပြု အကွက် ၄၆ ပမာဏ + အခံ အကွက်)
  • #prev {background:url('navsprites.gif') -47px 0;} - ယဉ်ကျေးမှု ယဉ်ကျေးမှု ကို သို့မဟုတ် ၄၇ ပမာဏ အရှေ့သို့ ချိန်တွင် ကိုယ်စားပုံပြုပါ (အိမ် ကိုယ်စားပုံပြု အကွက် ၄၆ ပမာဏ + ၁ ပမာဏ ပေါက်ခြင်း)
  • #next {left:129px;width:43px;} - သို့မဟုတ် ၁၂၉ ပမာဏ အရှေ့သို့ ချိန်တွင် အခြေခံ ပါ (အိမ် စတင် ၆၃ ပမာဏ + အိမ် ကိုယ်စားပုံပြု အကွက် ၄၃ ပမာဏ + အခံ အကွက်)
  • #next {background:url('navsprites.gif') -91px 0;} - ယဉ်ကျေးမှု ယဉ်ကျေးမှု ကို သို့မဟုတ် ၉၁ ပမာဏ အရှေ့သို့ ချိန်တွင် ကိုယ်စားပုံပြုပါ (အိမ် ကိုယ်စားပုံပြု အကွက် ၄၆ ပမာဏ + ၁ ပမာဏ ပေါက်ခြင်း + အိမ် ကိုယ်စားပုံပြု အကွက် ၄၃ ပမာဏ + ၁ ပမာဏ ပေါက်ခြင်း)

အမှတ်အသား ယဉ်ကျေးမှု - ကိုယ်စားပုံပြု မှု

အခြား သို့မဟုတ် ကြောင်း ထုတ်လုပ်ခြင်း ကို ပြုလုပ်ပါ၊

အကြောင်းကြား::hover ရှာဖွေသူ သည် ခုံးချိန်တွင် သာ မဟုတ် ဘဲ အရာဝတ္တု အားလုံး အတွက် အသုံးပြုခွင့်ရသည်。

ကျွန်တော်တို့၏ တိုက်ရိုက် ယဉ်ကျေးမှု ("navsprites_hover.gif") သည် ၃ ခု နှင့် ၃ ခု အသုံးပြုခြင်း အတွက် အသုံးပြုခြင်း အမှတ်အသား ကို ပါဝင်သည်:

နည်းပိုင်းကြည့်တင်

သို့ဖြစ်၍ ဒါ သည် တစ်ခုတည်းသော ယဉ်ကျေးမှု ဖြစ်၍ ၆ ခု တည်းသော ဖိုင် မဟုတ် သေး၍၊ အသုံးပြုသူ မှ အမှတ်အသား အပေါ် မှ အမှတ်အသား ထိုးထွင်းချိန်တွင်၊တင်သွင်းခြင်း ချိန်မှာ မရှိပါ.

ကိုယ်စားပြုခြင်း ကို သာ ၃ ကြိမ် ကိုယ်စားပုံပြု လုပ်ကြည်းသည့် ကိုယ်စားပုံပြုမှုကို ထပ်ထည့်ပါသည်:

နောက်ထပ်

#home a:hover {
  background: url('navsprites_hover.gif') 0 -45px;
}
#prev a:hover {
  background: url('navsprites_hover.gif') -47px -45px;
}
#next a:hover {
  background: url('navsprites_hover.gif') -91px -45px;
}

亲自试一试

例子解释：

#home a:hover {background: transparent url('img_navsprites_hover.gif') 0 -45px;} - 我们为所有三个悬停图像指定相同的背景位置，仅向下 45 像素