ఎలా సృష్టించాలి: ప్రతిమా నేవిగేషన్ పట్టీ

ప్రతిమా పట్టీ సృష్టించడం ఎలా

మొదటి చర్య - హ్ట్మ్ల్ జోడించండి

ప్రతిమా లైబ్రరీ జోడించండి అనువాదం
<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>

రెండవ చర్య - CSS జోడించండి

అడుగుల ఉదాహరణ

.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%; /* సమాన పరిమాణం (5 చిహ్నాలు, ప్రతి చిహ్నం పరిమాణం 20% = 100%) */
  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 导航栏

教程：图标教程