Membuat Navbar Sederhana dengan HTML CSS

         





Pada kali ini kita akan membuat Navbar sederhana dengan menggunakan HTML yang sebelumnya kita tau biasa disebut sebagai markup language atau penanda dan CSS sebagai penghias dari tag html nya, tanpa menggunakan framework. 

Langkah pertama adalah dengan membuat file index.html

 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
   <meta charset="UTF-8">  
   <meta name="viewport" content="width=device-width, initial-scale=1.0">  
   <title>Navbar</title>
   <style>  

   </style>
 </head>  
 <body>  

 </body>  
 </html>
 
Kemudian kita siapkan sebuah container menggunakan <div> </div> tag yang didalamnya kita isi tag <ul> dan <li>
 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
   <meta charset="UTF-8">  
   <meta name="viewport" content="width=device-width, initial-scale=1.0">  
   <title>Navbar</title>
   <style>

   </style>  
 </head>  
 <body>  
   <div class="container">  
     <ul>  
       <li><a href="">Home<a/></li>  
       <li><a href="">About<a/></li>  
       <li><a href="">Services<a/></li>  
       <li><a href="">Contact<a/></li>  
     </ul>  
   </div>  
 </body>  
 </html>

Preview 









Kemudian kita lanjutkan dengan mengganti display nya menjadi sejajar, posisinya berada ditengah dan menghilangkan style list titik default nya
 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
   <meta charset="UTF-8">  
   <meta name="viewport" content="width=device-width, initial-scale=1.0">  
   <title>Navbar</title>  
   <style>  
     body{  
       margin: 0;  
     }  
     .container{  
       text-align: center;  
       background-color: #0d6efd;  
     }  
     .container ul{  
       display: inline-flex;  
     }  
     .container ul li{  
     /* Menghilangkan titik list pada <li> tag */  
       list-style: none;   
       margin: 0 15px;  
       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;  
       font-weight: 500;  
     }  
     .container ul li a{  
       text-decoration: none;  
       color: white;  
     }  
   </style>  
 </head>  
 <body>  
   <div class="container">   
   <ul>   
    <li><a href="">Home</a></li>   
    <li><a href="">About</a></li>   
    <li><a href="">Services</a></li>   
    <li><a href="">Contact</a></li>   
   </ul>   
  </div>   
 </body>  
 </html>

Result





Komentar

Posting Komentar

Postingan Populer