Anda di halaman 1dari 4

Laporan Praktikum

Desain Web Praktik

Nama : Noor Kamila Aprilia


Nim : 5200311122

1. Sourcecode
- HTML

- CSS
2. Penjelasan Sourcecode
- Sourcecode HTML


Membuat doctype html dengan judul Tampilan Menu.Lalu beri link untuk
menghubungkan dengan file css.Css diberi nama Tampilan.css


Buat kelas dengan nama kelas nav.Di dalam nav masukkan tag ul . Di dalam
tag ul terdapat a href agar menu menu tsb bisa diklik . Buat 4 menu (
Menu,atas 1,atas 2,atas 3).


Di dalam menu diberi submenu. Beri tag ul dan a href lagi lalu beri nama pada
a href tsb (Samping 1, Samping 2, Samping 3,Samping 4)
- Sourcecode CSS


Atur margin,padding dan font textnya


Pada kelas nav atur lebar,border,tinggi dan beri atribut line height untuk
mengatur jarak submenu


Atur nav ul li. Setiap menunya beri lebar 20%,tingginya 45px. Beri atribut
float:left agar tampilan menunya bisa kesamping . Agar titik di menu bisa hilang
beri atribut list-style: none , atur nama agar bisa ketengah menggunakan atribut
text-align: center . Gunakan atribut border-radius agar ujung kotak menu bisa
melengkung seperti gambar contoh . Atur warna background dengan atribut
background dan atur warna teks denga atribut color


Atur peletakan sub menu dengan lebar: 100px,tinggi: 60px dan gunakan border
radius agar setiap pojok kanan atas dan kiri bawah bisa melengkung

Agar tampilan submenu bisa diklik muncul buat kelas lagi yaitu .nav ul li ul dan
.nav ul li:hover ul
Di kelas .nav ul li ul li beri atribut display: none agar hilang submenu nya dan
saat disentuh tidak muncul
Di kelas .nav ul li:hover ul beri atribut display: block agar saat diklik
submenunya bisa ditampilkan
Beri warna pada teks
3. Hasil

Anda mungkin juga menyukai