কিভাবে তৈরি করা যায়: আইকন নেভিগেশন বার

আইকন বার কিভাবে তৈরি করা যায়

প্রথম পদক্ষেপ - 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>

দ্বিতীয় পদক্ষেপ - সিএসএস যোগ করা:

স্তর উপরীয় প্রদর্শন

.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; /* অকস্মীয়া বা বর্তমান রঙ যোগ করা */
}

亲自试一试

相关页面

教程：সিএসএস নেভিগেশন বার

教程：আইকন টিউটোরিয়াল