Hallo...
Semangat Pagi !
Ketika saya memosting tutorial ini, awannya mendung, cuaca kurang mendukung. Padahal tadi pagi cerah. ahh tak apa lah, saya tetap semangat untuk memosting walaupun awan tak cerah.
Baiklah kawan, di postingan ini saya melanjutkan postingan sebelumnya
nah, setelah tadi membuat layout web dengan menu vertikal, kali ini kita akan membuat layout web dengan menu horizontal.
Yuk simak !
Tahap Pelaksanaan :
1. Langkah awal sudah pasti membuka text editor yang kita punya, di sini saya menggunakan sublime text 3.
2. Langkah selanjutnya, tulis kode di bawah ini, lalu simpan dengan nama "branda.html"
<!DOCTYPE html>
<html><head>
<title>HALAMAN SAYA</title>
<style>
#atas{
margin-left: 50px;
width: 90%;
height: 80px;
background: #888;
border-top-right-radius: 100px; /*membentuk lekungan pada kanan atas web*/
}
h2{
padding-top: 20px;
padding-left: 50px;
color: #fff;
font-family: Purisa; /*bentuk huruf*/
}
#nav{
margin-top: -19px; /*jarak dari bawah ke atas*/
margin-left: 50px; /*jarak dari kiri ke kanan*/
width: 90%; /*panjang atau lebar*/
height: 40px; /*tinggi*/
background: #222; /*warna dasar*/
border-bottom: 7px solid#4183D7; /*membuat garis biu di bawah nav*/
}
.menu li{
display: inline-block; /*membentuk nav menjadi horizontal atau ke samping*/
padding: 10px; /*mengatur jarak kiri, kanan, bawah, atas*/
}
.menu li a{
text-decoration: none; /*menghilangkan dekorasi teks*/
color: #fff; /*warna dari huruf*/
}
#content{
margin-left: 50px;
width: 1097px;
height: 500px;
background: #444;
padding: 30px;
color: #fff;
}
#bawah{
margin-left: 50px;
width: 90%;
height: 40px;
background: #111;
color: #fff;
margin-top: -20px;
}
p{
padding-top: 10px;
margin-left: 450px;
}
</style>
</head>
<body>
<div id="atas">
<h2>JUDUL HALAMAN</h2>
</div>
<div id="nav">
<ul class="menu">
<li><a href="">Menu 1</a></li>
<li><a href="">Menu 2</a></li>
<li><a href="">Menu 3</a></li>
</ul>
</div>
<div id="content">
KONTEN HALAMAN
</div>
<div id="bawah">
<p>Copy Right by @SA-lee</p>
</div>
</body>
</html>
Kode di atas saya gabungkan css dan html nya. supaya teman-teman mudah untuk mencoba.
3. Simpan, dan buka di browser kalian dengan cara "CTRL+O"
Referensi :
-
Penutup :
Trimakasih telah menyimak postingan saya hari ini, jika postingan ini membantu anda, silahkan share. Dan jangan lupa join blog saya yuk !
Selamat mencoba dan selamat belajar !
