အစဉ်အဝေးအတိုင်း အင်ဂျင်နီယာ ပြုလုပ်ခြင်း

အစဉ်အဝေးအတိုင်း အင်ဂျင်နီယာ ပြုလုပ်ခြင်း

ထိပ်တန်း အပြန်လည်တိုးမြှင့်ရေး

第一步 - ပုံစံ ထပ်ပေါင်းပြီ

<!-- ထိပ်တန်း လုံး -->
<div class="navbar">
  <a class="active" href="#">Home</a>
  <a href="#">Search</a>
  <a href="#">Contact</a>
  <a href="#">Login</a>
</div>

第二步 - ပုံစံ ထပ်ပေါင်းပြီ

/* ထိပ်တန်း လုံး ဖြင့် ဖော်ပြပုံ */
.navbar {
  width: 100%;
  background-color: #555;
  overflow: auto;
}
/* ချွတ်ဆိပ် */
.navbar a {
  float: left;
  padding: 12px;
  color: white;
  text-decoration: none;
  font-size: 17px;
  width: 25%; /* လေးခု အင်ဂျင်နီယာ အစဉ်အဝေးဖြင့် ပြသထားခြင်း။ သင့်ကို နှစ်ခု အင်ဂျင်နီယာ အစဉ်အဝေး 50% အသုံးပြီး သုံးခု အင်ဂျင်နီယာ အစဉ်အဝေး 33.33% အသုံးပြီး ရှိသည်။ */
  text-align: center; /* သင့်ကို သုံးပြီး သတင်းကို အရှေ့ဘက် စီစဥ်ပြီးခြင်း */
}
/* အမှတ်ပြုသူများ အပေါ် နှင့် လျှော့ပါ */
.navbar a:hover {
  background-color: #000;
}
/* လက်ရှိ/လက်တွေ့သော ချွတ်ဆိပ်များ ဖြင့် ဖော်ပြပုံ */
.navbar a.active {
  background-color: #04AA6D;
}
/* ထိပ်တန်းများ ပြန်လည်တိုးမြှင့်ရေး - အနံ့အရောင် 500 ပမာဏ ထက်သို့ နည်းပါးသော အနံ့အရောင်ရှိသော မျက်နှာပြင်တွင် နှင့်ဆိုင်သော ချွတ်ဆိပ်များ အစဉ်အဝေးဖြင့် ပြသထားခြင်း သို့မဟုတ် အစဉ်အဝေးဖြင့် ပြသထားခြင်း */
@media screen and (max-width: 500px) {
  .navbar a {
    float: none;
    display: block;
    width: 100%;
    text-align: left; /* သင့်ကို သုံးပြီး သတင်းကို ကွန်ပျူတာ အနံ့အရောင်ရှိသော မျက်နှာပြင်တွင် အရှေ့ဘက် စီစဥ်ပြီးခြင်း */
  }
}

亲自试一试

相关页面

教程：CSS 导航栏