Tutorial sederhana membuat navbar menggunakan CSS
Assalamualaikum wr.wb
Selamat malam sahabat blogger kali ini Belajar di Perantauan aka membahas tentang CSS, pasti nya sudah tidak pangling lagi kan dengan kata CSS, CSS sekarang ini sudah muali banyak di gunakan untuk mempercantik desain website kita ,
Cascading Style Sheets. ... Cascading Style Sheet (CSS) merupakan aturan untuk mengatur beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman. untuk css pemula !!!
fungsi utama css adalah merancang, merubah, mendisain, membentuk halaman wesite(blog juga website). dan isi dari halaman website adalah tag-tag html, logikanya css itu dapat merubah tag-tag html(yang sederhana) sehingga menjadi lebih fungsional dan menarik.
Na kali ini kita akan membuat Navbar menggunakan CSS,
Ini tampilan navbar
Ini script indexnya ,simpan dengan nama index.php:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="master.css" type="text/css">
<title></title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="menu">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">PROFIL</a></li>
<li><a href="#">GALERY</a></li>
<li><a href="#">CONTAC AS</a></li>
</ul>
</div>
</div>
</div><!-- penutup row -->
<div class="row">
<div class="col-md-12">
<p>
<li id="id">BELAJAR DI PERANTAUAN</li>
</p>
</div>
</div>
</div><!-- penutup container -->
</body>
</html>
Ini script CSSnya , simpan dengan nama master.css:
body
{
background: #fff; <--untuk buat warna gambar>
}
#menu
{
width: 80%;
height: 60px;
background: black;
border-radius: 10px;
margin: 150px;
margin-top: auto;
line-height: 1px;
}
ul li {
margin-right: 70px;
margin-left: 70px;
}
li,a
{
list-style: none;
text-decoration: none;
float: left;
padding : 15px;
padding-bottom: 15px ;
font-size: 20px;
border-radius: 15px;
color: #fff;
}
a:hover
{
padding: 15px;
background: red;
}
#id
{
margin-top: 50px;
width: 78%;
height: 30px;
background: red;
border-radius: 10px;
margin: 150px;
margin-top: auto;
line-height: 30px;
text-align: center;
font-style: italic;
}
Untuk tutorial malam ini , itu aja ya gan , semoga bermamfaat silahkan di share.
0 Response to "Tutorial sederhana membuat navbar menggunakan CSS"
Post a Comment