Hur skapa:丸形导航

Lär dig hur du använder CSS för att skapa丸形 navigationsmeny.

Skapa丸形导航

Steg 1 - Lägg till HTML:

<div class="pill-nav">
  <a class="active" href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
</div>

Steg 2 - Lägg till CSS:

/* Ställ in länkstilar för丸形导航menyn */
.pill-nav a {
  display: inline-block;
  color: black;
  text-align: center;
  padding: 14px;
  text-decoration: none;
  font-size: 17px;
  border-radius: 5px;
}
/* Ändra färg på länk när musen hålls över */
.pill-nav a:hover {
  background-color: #ddd;
  color: black;
}
/* Lägg till färg för aktiv eller nuvarande länk */
.pill-nav a.active {
  background-color: dodgerblue;
  color: white;
}

Prova själv

Relaterade sidor

Tutorials:CSS-navigationsfält

Tutorials:Hur skapa toppnavigationsfält