langkah pertama yaitu buat sebuah folder dengan nama belajar
kemudian buat index.html di dalam folder belajar
lalu buat lagi style.css di dalam folder belajar
nah kalo yang di atas sudah buat copy kan script di bawah ini ke dalam index.html
<!DOCTYPE html>
<html>
<head>
<title>web profil</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="navbar">
<ul>
<li><a href="#">profil</a></li>
<li><a href="#">kontak us</a></li>
<li><a href="#">about</a></li>
</ul>
</div>
</body>
</html>
nah sedikit ane jelasin maksud program di atas
<link rel="stylesheet" type="text/css" href="style.css"> ini berguna untuk memanggil fungsi css pada style.css
<div class="navbar"> kalo yang ini berguna untuk membuat wadah untuk menu atau sering di sebut navbar
nah setalah yang di atas di buat maka kita buat menu di dalam navbar dengan ul dan li,
ul adalah kumpulan dari beberapa li sedangkan li adalah bagian yang terdapat di dalam ul begitu lah sekiranya kalo menggunakan bahasa saya hahaha
sedangkan <a href="#"> berguna untuk pemanggilan link jika mau
untuk css nya copy script di bawah ini
body{
background: rgb(240,249,255);
}
.navbar{
width: 100%;
height: 30px;
background-color: blue;
box-shadow:0 0 16px blue;
}
.navbar ul{
margin:0px;
padding:0px;
list-style: none;
}
.navbar ul li{
margin: 0px;
display: inline;
}
.navbar ul li a{
border-right: 1px solid white;
color: white;
border-radius:none;
color: white;
padding: 5px 5px;
display:inline-block;
}
nah sedikit penjelelasan tentang css di atas
kita lebih ke ul dan li nya aja karna kita membahas
cara membuat menu di navbar
nah yang paling penting itu adalah bagian
list-style: none; nah fungsi ini bekerja untuk menghilangkan list pada li
display: inline; yang ini berguna untuk membuat posisi menu kesamping bukan kebawah
border-right: 1px solid white; yang ini berfungsi untuk membuat batasan pada setiap menu
display:inline-block; berguna untuk memposisikan nama menu ketengah dengan sedikit bantuan dari padding
Out Of Topic Show Konversi KodeHide Konversi Kode Show EmoticonHide Emoticon