CSS Bară de navigare. Link de navigare activ / curent. Link-uri centrate & adăugare borders.

Link de navigare activ / curent

Adăugați o clasă „activă” la link-ul curent pentru a anunța utilizatorul pe ce pagină se află:





Exemplu:

.active {
  background-color: #4CAF50;
  color: white;
}

Link-uri centrate & adăugare borders

Adăugați text-align: center la <li> sau <a> pentru a centra legăturile.

Adăugați proprietatea border la <ul> Adăugați un border în jurul barei de navigare. Dacă doriți, de asemenea, borders în interiorul barei de navigare, adăugați un border-bottom la toate elementele <li>, cu excepția ultimului:





Exemplu:

ul {
  border: 1px solid #555;
}

li {
  text-align: center;
  border-bottom: 1px solid #555;
}

li:last-child {
  border-bottom: none;
}