Membuat Navigasi Web Keren HTML5 dan CSS3

Baik kali ini zlearn akan berbagi Tutorial dan Source Kode mengenai cara Membuat Navigasi Web Keren HTML5 dan CSS3 .  Nah kali ini zlearn.id  akan berbagi mengenai HTML5 dan CSS3 mengenai caranya Membuat Navigasi Web Keren HTML5 dan CSS3  Yang responsive di berbagai perangkat platform.
Ya kelebihan dari HTML 5 dan CSS 3 yaitu memiliki keunggulan membuat sebuah website menjadi responsive dan memudahkan para desainer web dalam membuat webnya dapat enak dilihat di berbagai perangkat atau Gadget.
Nah oleh karena itu zlearn  akan membuat Navigasi atau Navbar web yang responsive keren menggunakan HTML 5 dan CSS3. dan seperti biasa diakhir penghujung tutorial  Membuat Navigasi Web Keren HTML5 dan CSS3  Anda dapat mendownload soirce kode navigasu websitenya.

zlearn Membuat navigasi HTML 5 dan CSS3
zlearn Membuat navigasi HTML 5 dan CSS3
Tampilan Navigasi Mobile


Ya langsung praktek saja  ya. Baik buat dua buah file dengan nama index.html  dan style.css.  Catatan index.html berfungsi sebagai kerangka website yang akan kita buat dan style.css berfungsi untuk membuat website kita jadi cantik dan responsive.

1. Buka kode editor anda dan buat sebuah file dan beri nama index.html
<!DOCTYPE html>
<html>
<head>
<title>Zlearn | Navigasi HTML 5 dan CSS </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">Berita</a></li>
  <li><a href="#contact">Informasi</a></li>
  <ul style="float:right;list-style-type:none;">
    <li><a href="#about">Tentang</a></li>
    <li><a href="#login">Login</a></li>
  </ul>
</ul>

</body>
</html>
Setelah itu simpan file tersebut.

2. Kemudian Buat sebuah file dengan nama style.css berikut scriptnya:


ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #0cc1ec; } li { float: left; border-right:0px solid #bbb; } li:last-child { border-right: none; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover:not(.active) { background-color: #1e91f9; } .active { background-color: #4CAF50; }

Nah setelah itu simpan file style.css tadi. Dan kemudain jalankan di browser anda maka anda telah berhasil membuat sebuah Navigasi atau Navbar HTML 5 Yang responsive.
Dan yang mau download source kode Membuat Navigasi Web Keren HTML5 dan CSS3  Silahkan ikuti tautan download di abwah ini:

Download

Keterangan Passoword zip: zlearn.id  terimakasih telah berkunjung ke blog zlearn.id terus kunjungi zlearn.id  Untuk tutorial dan informasi menarik lainnya lagi.

Share this

Related Posts

Previous
Next Post »

Berita Unik

loading...