如何创建：图标导航栏

如何创建图标栏

第一步 - 添加 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>

Βήμα 2 - Προσθήκη 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

Εκμάθηση:Εκμάθηση εικονιδίων