cara membuat navigasi
Berikut adalah contoh cara membuat navigasi (menu) dengan HTML dan CSS:
HTML:
[13/7 10.15] Syaad: <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav>
<ul>
<li><a href="#">Beranda</a></li>
<li><a href="#">Tentang Kami</a></li>
<li><a href="#">Layanan</a></li>
<li><a href="#">Kontak</a></li>
</ul>
</nav>
</body>
</html>
CSS (style.css):
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #f1f1f1;
}
nav li {
display: inline-block;
}
nav li a {
display: block;
padding: 8px 16px;
text-decoration: none;
color: #333;
}
nav li a:hover {
background-color: #ddd;
}
Pada contoh di atas, sebuah elemen <nav> digunakan sebagai wadah untuk navigasi. Di dalamnya, kita menggunakan elemen <ul> sebagai daftar (list) dari menu. Setiap menu diwakili oleh elemen <li> dan tautan (link) menu diwakili oleh elemen <a>. Gaya CSS diterapkan melalui file eksternal "style.css".
: Dalam CSS, kita mengatur beberapa properti untuk mengatur tampilan navigasi. list-style-type: none; menghilangkan tanda bulet pada daftar. display: inline-block; pada elemen <li> mengatur agar menu terlihat secara horizontal. padding, margin, dan properti lainnya digunakan untuk mengatur tampilan dan ruang antar elemen menu.
: Warna latar belakang, warna teks, dan gaya efek hover dapat disesuaikan dengan preferensi desain Anda.
Pastikan untuk menyimpan HTML di file dengan ekstensi ".html" (misalnya "index.html") dan CSS di file dengan ekstensi ".css" (misalnya "style.css"). Kemudian, pastikan file HTML dan CSS terhubung dengan benar menggunakan <link> di bagian <head> dari HTML.
.png)
Komentar
Posting Komentar