如何创建:带图标的侧边栏
学习如何使用 CSS 创建带有图标的侧边导航菜单。
如何创建带有图标的侧边栏
第一步 - 添加 HTML:
加载图标库 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- ဆက်သွယ်ပုံ --> <div class="sidebar"> <a href="#home"><i class="fa fa-fw fa-home"></i> Home</a> <a href="#services"><i class="fa fa-fw fa-wrench"></i> Services</a> <a href="#clients"><i class="fa fa-fw fa-user"></i> Clients</a> <a href="#contact"><i class="fa fa-fw fa-envelope"></i> Contact</a> </div>
ဒုတိယပုံ - စက်တင် CSS ထပ်ပေးရန်
/* ဆက်သွယ်ပုံ အဆိုအရ အေးအေးချင်း - အထိမ်းအား လုံးဝ */ .sidebar { height: 100%; width: 160px; position: fixed; z-index: 1; top: 0; left: 0; background-color: #111; overflow-x: hidden; padding-top: 16px; } /* ဘယ်သည့်ဘယ်သည့် ဆက်သွယ်ပုံ အဆိုအရ အေးအေးချင်း */ .sidebar a { padding: 6px 8px 6px 16px; text-decoration: none; font-size: 20px; color: #818181; display: block; } /* အသံအသွား ဖြစ်စဉ် အသစ် သတ်မှတ်ခြင်း */ .sidebar a:hover { color: #f1f1f1; } /* အဓိကအသုံးများ အဆိုအရ အေးအေးချင်း */ .main { margin-left: 160px; /* ဘယ်သည့်ဘယ်သည့် ဆက်သွယ်ပုံ အား ကိုယ်တိုင် ကူးစက်ကြောင်း */ padding: 0px 10px; } /* သန်းခြောက်ပေါင်း အထိမ်းအား ဝင်ရိုး ကို သဘောတူညီစွာ အသုံးပြုရန် မီဒီယာအသုံး အသစ် အသုံးပြု (အထိမ်းအား နှစ်သက် အထိမ်းအား လေးပေါင်း ပေ ထက် ပိုသော အချိန်အတွင်း၌ နောက်အိမ်ခြေ အရွယ် နည်းပါ) */ @media screen and (max-height: 450px) { .sidebar {padding-top: 15px;} .sidebar a {font-size: 18px;} }
相关页面
教程:CSS 导航栏
教程:如何创建图标导航栏