Jifunze kuhakikisha: Viungo vya navi vya kifupi

Jifunze kuhakikisha navi ya kifupi ya viungo vya navi vya kifupi.

Kumekadiri navi ya kusaidia wa kusaidia

Kipindi cha kwanza - Kuingiza HTML:

<!-- Menu ya navi -->
<div class="navbar">
  <a class="active" href="#">Home</a>
  <a href="#">Search</a>
  <a href="#">Contact</a>
  <a href="#">Login</a>
</div>

Kipindi cha pili - Kuingiza CSS:

/* Kuingiza stili ya menu ya navi */
.navbar {
  width: 100%;
  background-color: #555;
  overflow: auto;
}
/* Viungo vya navi */
.navbar a {
  float: left;
  padding: 12px;
  color: white;
  text-decoration: none;
  font-size: 17px;
  width: 25%; /* Mito wa kifupi nne. Ikiwa una viungo vya pili, tukue 50%, kwa viungo vya tatu tukue 33.33%, na tena tena tena. */
  text-align: center; /* Ikiwa unaonyesha kwamba hao tunahitaji kueneza uangalifu wa kushoto */
}
/* Kuingiza rangi ya mbao wa miguu wa kisiwa */
.navbar a:hover {
  background-color: #000;
}
/* Kuingiza stili ya viungo vya navi vya sasa / vya kushoto */
.navbar a.active {
  background-color: #04AA6D;
}
/* Kuingiza uharibifu wa kusaidia - kwenye ekran yenye umatekelezo wa 500 mita au chini, tena tena tena tukue viungo vya navi kwa ukubwa wa kushoto, haitakuwa kwenye mazingira ya kusaidia */
@media screen and (max-width: 500px) {
  .navbar a {
    float: none;
    display: block;
    width: 100%;
    text-align: left; /* Ikiwa unaonyesha kwamba hao tunahitaji kueneza uangalifu wa kushoto kwenye ekran yenye umatekelezo mdogo */
  }
}

Kutokaambaa: Bonyeza hapa kufikia

Kutokaambaa: Picha za kifungu

Kutokaambaa: Mafunzo:Kutokaambaa: Kichwa cha kifungu cha CSS