Aktif Menüyü Vurgulama
Coddy'nin HTML Journey'sinin CSS Hakimiyeti bölümünün bir parçası. Ders 39 / 43.
Görev
KolayDört bağlantıdan oluşan basit bir gezinme menüsü verilmiştir. Göreviniz, sözde sınıfları kullanarak menüyü daha etkileşimli hâle getirmektir.
Şunları yapmak için CSS yazın:
- Kullanıcı bir bağlantının üzerine geldiğinde bağlantının arka plan rengini
rgba(50, 168, 82, 1)olarak değiştirin. - Bağlantıya etkin olarak tıklanırken metin rengini beyaz olarak değiştirin.
Kendin dene
<html>
<head>
<title>Highlight Active Menu</title>
<style>
nav a {
padding: 10px;
text-decoration: none;
color: black;
}
/* Add your styles here */
</style>
</head>
<body>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#" class="active">Blog</a>
<a href="#">Contact</a>
</nav>
</body>
</html>
CSS Hakimiyeti bölümündeki tüm dersler
1Seçici Uzmanlığı – Kombinasyon
GirişAlt Öğe SeçicisiÇocuk SeçiciBitişik Kardeş SeçicisiGenel Kardeş SeçicisiÖzet Meydan Okuması2Etkileşimli Sözde Sınıflar
Sözde SınıflarHover EfektleriOdaklanma EfektleriAktif StillerÖzet Meydan Okuması3Yapısal sözde sınıflar
Yapısal sözde sınıflarİlk Çocuğu HedeflemeSon Çocuğu HedeflemeDesen Gücü: nth-child KullanımıÖzet Meydan Okuması6Açılış Sayfası
Header Bölümünü Stilize EtButonu Stilize EtBölüm DüzeniKart DüzeniSon Dokunuşları Ekle9Son Meydan Okumalar
Aktif Menüyü VurgulamaZebra Tablo SatırlarıButon Hover EfektiGrid Kart DüzeniBulanık Hero GörseliKendi başına pratik yap: Web playground