CSS part I

Setelah mengenal Cascading Style Sheet untuk pertama kali sekarang kita akan mencoba belajar CSS ke tahap selanjutnya dengan tutorial membuat sebuah navigator bar vertical.
berikut kode yang dapat digunakan
<style>
#nav{
float:left;
background-color:#CC9900;
padding:2px 0px 2px 0px;
color:#993300;
width:100px;
heigth:15px;}
#nav a{
background-color:#CC9900;
padding:2px 0px 2px 2px;
color:#993300;
width:100px;
display:block;
heigth:15px;}
#nav a:hover{
background-color:#CCCC00;
color:#996600;
padding:2px 0px 2px 0px;
width:100px;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
</style>

kode di atas merupakan kode untuk membuat navigator bar secara vertikal.
Kode di atas di letakkan pada bagian head dalam sebuah web.

berikut kode html yang digunakan
<body>
<div id=”nav”>
<a href=”#”>home</a>
<a href=”#”>profile</a>
<a href=”#”>about us</a>
<a href=”#”>our product</a>
</div>
</body>

selamat mencoba.
anda dapat mengembangkan dari kode yang saya berikan

Advertisement

~ by raidex89 on August 25, 2007.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Connecting to %s

 
Follow

Get every new post delivered to your Inbox.