Menu Bar sederhana Dengan CSS - Hallo sahabat Dev-Create, Pada Artikel yang anda baca kali ini dengan judul Menu Bar sederhana Dengan CSS, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel css, Artikel menubar, Artikel website, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Menu Bar sederhana Dengan CSS
link : Menu Bar sederhana Dengan CSS

Baca juga


Menu Bar sederhana Dengan CSS


Assalamualaikum wr. wb.
Hai sobat blogger kali ini admin mau nulis tutorial singkat menegnai desain website yaitu membuat menu bar sederhana dengan css.
         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>Menu 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 jika ditulis dari awal akan seperti 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 nya , desain atau warnanya bisa di atur sesuai keinginan masing-masing. hehe :)


Demikianlah Artikel Menu Bar sederhana Dengan CSS

Sekianlah artikel Menu Bar sederhana Dengan CSS kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Menu Bar sederhana Dengan CSS dengan alamat link https://dev-create.blogspot.com/2019/08/menu-bar-sederhana-dengan-css.html