ထုတ်လုပ်တာ

အင်ဂျင်နီယာ ပေါ်လွှာ ထုတ်လုပ်တာ

ပထမဆုံးအဆက် - ဟေတိုင်း ထိန်းချုပ်ကုန်း

ဝီကီ အတိုင်းအတာ ထိန်းချုပ်ကုန်း
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="icon-bar">
  <a class="active" href="#"><i class="fa fa-home"></i></a>
  <a href="#"><i class="fa fa-search"></i></a>
  <a href="#"><i class="fa fa-envelope"></i></a>
  <a href="#"><i class="fa fa-globe"></i></a>
  <a href="#"><i class="fa fa-trash"></i></a>
</div>

ဆုံးဖြတ် - စက်တင်ချက် ထပ်ထည့်

အခြေခံ အကြောင်း

.icon-bar {
  width: 90px; /* အရွယ် ကို သတ်မှတ် */
  background-color: #555; /* ရှည်စင် အရောင် */
}
.icon-bar a {
  display: block; /* လက်ဆုံး လက်ဆုံး အစား အဆက်ဆက် ပေါင်းစပ် */
  text-align: center; /* အကြား စုတ်ယိုက် */
  padding: 16px; /* အပြင်ဘက် အပိုင်း ထပ်ထည့် */
  transition: all 0.3s ease; /* ချို့ကြည့် အနှစ်ခန့်မှာ လှည့်ချိုးလိမ်းမှု ထပ်ထည့် */
  color: white; /* ကြားသစ် အရောင် */
  font-size: 36px; /* အကြမ်းအား အရွယ်အစား တိုးပေး */
}
.icon-bar a:hover {
  background-color: #000; /* ချို့ကြည့် အရောင် ထပ်ထည့် */
}
.active {
  background-color: #04AA6D; /* ပြီး/လက်ရှိ အရောင် ထပ်ထည့် */
}

亲自试一试

အခြေခံ အကြောင်း

.icon-bar {
  width: 100%; /* ပြင်ဘက် အကြာ */
  background-color: #555; /* ရှည်စင် အရောင် */
  overflow: auto; /* ပေါင်းစပ် အပျက်အစီး ဖြစ်သော အခြေအနေ */
}
.icon-bar a {
  float: left; /* ပေါင်းစပ် လက်ဆုံး ခုံ */
  text-align: center; /* အကြား စုတ်ယိုက် */
  width: 20%; /* အတူ ကြားသစ် (လက္ခဏာ ၅ ခု ဖြစ်၍ လက္ခဏာ အကြာ ၂၀% = ၁၀၀%) */
  padding: 12px 0; /* အရောင်းနှင့် အဆိပ်ဆိပ် အပြင်ဘက် အပိုင်း */
  transition: all 0.3s ease; /* ချို့ကြည့် အနှစ်ခန့်မှာ လှည့်ချိုးလိမ်းမှု ထပ်ထည့် */
  color: white; /* ကြားသစ် အရောင် */
  font-size: 36px; /* အကြမ်းအား အရွယ်အစား တိုးပေး */
}
.icon-bar a:hover {
  background-color: #000; /* ချို့ကြည့် အရောင် ထပ်ထည့် */
}
.active {
  background-color: #04AA6D; /* ပြီး/လက်ရှိ အရောင် ထပ်ထည့် */
}

亲自试一试

相关页面

教程：CSS 导航栏

教程：图标教程