कैसे बनाएं: चिह्न नेविगेशन बार

चिह्न बार कैसे बनाएं

पहला कदम - HTML जोड़ें：

<!-- चिह्न लाइब्रेरी जोड़ें -->
<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 नेविगेशन बार

शिक्षा:आइकॉन शिक्षा