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
0 comments:
Post a Comment