Menu
CoddyTech
START LEARNING

Sorot Menu Aktif

Termasuk bagian Menguasai CSS dalam perjalanan HTML di Coddy. Pelajaran 39 dari 43.

challenge icon

Tantangan

Mudah

Sebuah menu navigasi sederhana dengan empat tautan telah disediakan. Tugasmu adalah membuatnya lebih interaktif menggunakan pseudo-class.

Tulis CSS untuk:

  1. Mengubah warna latar belakang tautan saat kamu mengarahkan kursor ke tautan tersebut menjadi rgba(50, 168, 82, 1).
  2. Mengubah warna teks menjadi putih saat tautan sedang diklik.

Coba sendiri

<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>

Semua pelajaran di Menguasai CSS

1Menguasai Selector, Kombinasi

PengantarSelector KeturunanSelector AnakSelector Saudara SebelahSelector Saudara UmumTantangan Rangkuman

4Proyek Menu Dropdown

Tambahkan SubmenuTampilkan SubmenuStyling tambahanInput dan tombol

7Membangun dengan CSS Grid

Dasar-Dasar GridPenempatan Item dengan grid-rowArea BernamaTantangan Rangkuman

2Pseudo-Class Interaktif

Pseudo-ClassEfek HoverEfek FocusGaya ActiveTantangan Rangkuman

5Efek Visual

GradienFilter CSSTransformasiTransisi dan Efek HoverTantangan Rangkuman

8Situs web Flavor Fiesta

Mengatur gridHeaderBagian utamaFooter

3pseudo-class struktural

pseudo-class strukturalMemilih Anak PertamaMemilih Anak TerakhirKekuatan Pola: Menggunakan nth-childTantangan Rangkuman

6Halaman Landing

Atur Gaya Bagian HeaderAtur Gaya TombolTata Letak BagianTata Letak KartuTambahkan Sentuhan Akhir

9Tantangan Akhir

Sorot Menu AktifBaris Tabel Berselang-selingEfek Hover TombolTata Letak Kartu GridGambar Utama yang Buram

Latihan sendiri: Playground Web