Nasıl oluşturulur: İkonlu navigasyon çubuğu

Önceki Sayfa Ayrıştırılmış Geçiş
Sonraki Sayfa Araç Çubuğu Arama

CSS ile ikonlu yanıt verici navigasyon çubuğu nasıl oluşturulur öğrenin。

İkonlu navigasyon çubuğu

İkonlu yanıt verici navigasyon çubuğu oluşturma

Adım 1 - HTML ekleyin：

Bir simge kütüphanesi yükleyin
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="navbar">
  <a class="active" href="#"><i class="fa fa-fw fa-home"></i> Home</a>
  <a href="#"><i class="fa fa-fw fa-search"></i> Search</a>
  <a href="#"><i class="fa fa-fw fa-envelope"></i> Contact</a>
  <a href="#"><i class="fa fa-fw fa-user"></i> Login</a>
</div>

İkinci adım - CSS ekle:

/* Navigasyon panellerinin tarzını ayarla */
.navbar {
  width: 100%;
  background-color: #555;
  overflow: auto;
}
/* Navigasyon panelleri bağlantısı tarzı */
.navbar a {
  float: left;
  text-align: center;
  padding: 12px;
  color: white;
  text-decoration: none;
  font-size: 17px;
}
/* Fare ile üzerine gelindiğinde navigasyon panelleri bağlantısı tarzı */
.navbar a:hover {
  background-color: #000;
}
/* Mevcut/aktif navigasyon panelleri bağlantısı */
.active {
  background-color: #04AA6D;
}
/* Ekranın genişliği 500 pikselden küçük olduğunda yanıt verici ekle - navigasyon panellerini dikey olarak otomatik olarak göster, değilse yatay olarak göster Add responsiveness - will automatically display the navbar vertically instead of horizontally on screens less than 500 pixels */
@media screen and (max-width: 500px) {
  .navbar a {
    float: none;
    display: block;
  }
}

Kişisel Deneyim