Sistem pengkodean CSS memang sangat memudahkan kita untuk membuat suatu website menjadi lebih menarik. Dengan kode CSS kita dapat merubah warna, bentuk,ukuran dan apa saja yang berkaitan dengan style website sesuai dengan kemampuan anda. Nah untuk mengetahui caranya ikuti tutorial berikut ini :
1. Pertama buka notepad atau dreamweaver
2. Ketikkan kode HTML dasar sebagai berikut :
<html>
<head>
<title>navbar css</title>
</head>
<body>
</body>
</html>
3. Tambahkan
<div class=”nav”>
<ul>
<li><a href=”link anda”>Tulisan</a></li>
<li><a href=”link anda”>Tulisan</a></li>
<li><a href=”link anda”>Tulisan</a></li>
<li><a href=”link anda”>Tulisan</a></li>
<div class=”clear”></div>
</ul>
<div class=”clear”></div>
</div>
setelah kode <body> , sehingga menghasilkan kode seperti dibawah :
<html>
<head>
<title>navbar css</title>
</head>
<body>
<div class=”nav”>
<ul>
<li><a href=”link anda”>Tulisan</a></li>
<li><a href=”link anda”>Tulisan</a></li>
<li><a href=”link anda”>Tulisan</a></li>
<li><a href=”link anda”>Tulisan</a></li>
<div class=”clear”></div>
</ul>
<div class=”clear”></div>
</div>
</body>
</html>
4. Lalu tambahkan kode css sebagai berikut :
<style>
.nav {
Background-color: #000;
Width:100%;
Height:40px;
}
.nav ul {
List-style: none;
}
.nav ul li {
Float: left;
}
.nav ul li a {
Text-decoration: none;
Color: #fff;
Float: left;
Padding:10px;
}
.nav ul li a:hover {
Background-color: #333;
}
.clear {
Clear:both;
}
</style>
Letakan kode diatas sebelum kode </head>, sehingga akan menghasilkan kode berikut :
<html>
<head>
<title>navbar css</title>
<style>
.nav {
Background-color: #000;
Width:100%;
Height:40px;
}
.nav ul {
List-style: none;
}
.nav ul li {
Float: left;
}
.nav ul li a {
Text-decoration: none;
Color: #fff;
Float: left;
Padding:10px;
}
.nav ul li a:hover {
Background-color: #333;
}
.clear {
Clear:both;
}
</style>
</head>
<body>
<div class=”nav”>
<ul>
<li><a href=”link anda”>Tulisan</a></li>
<li><a href=”link anda”>Tulisan</a></li>
<li><a href=”link anda”>Tulisan</a></li>
<li><a href=”link anda”>Tulisan</a></li>
<div class=”clear”></div>
</ul>
<div class=”clear”></div>
</div>
</body>
</html>
Selamat Mencoba
No comments:
Post a Comment