A.Latar belakang.
Membuat tampilan layout sederhana HTML dan CSS.
B.maksud dan tujuan.
Dapat membuat layout sederhana.
C.pembahasan.
INDEX HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style1.css">
</head>
<body>
<div class="wrap">
<div class="header">
<h1>reza blog</h1>
<p>Tutorial belajar membuat layout website sederhana</p>
</div>
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Javascript</a></li>
</ul>
</div>
<div class="badan">
<div class="sidebar">
sidebar
<ul>
<li><a href="#">Tutorial HTML dasar</a></li>
<li><a href="#">Tutorial CSS dasar</a></li>
<li><a href="#">Tutorial PHP dasar</a></li>
<li><a href="#">Tutorial JQuery dasar</a></li>
</ul>
</div>
<div class="content">
content
</div>
</div>
<div class="clear"></div>
<div class="footer">
footer
</div>
</div>
</body>
</html>
INDEX CSS.
.wrap{
background: blue;
width: 900px;
margin: 10px auto;
}
/*bagian header*/
.wrap .header{
background: green;
/*height: 50px;*/
padding: 2px 10px;
}
/*akhir header*/
/*bagian menu*/
.wrap .menu{
background: yellow;
}
.wrap .menu ul{
padding: 0;
margin: 0;
background: yellow;
overflow: hidden;
}
.wrap .menu ul li{
float: left;
list-style-type: none;
padding: 10px;
}
/*akhir menu*/
.clear{
clear: both;
}
.badan{
height: 450px;
}
/*bagian sidebar*/
.wrap .badan .sidebar{
background: orange;
float: left;
width: 25%;
height: 100%;
}
/*akhir sidebar*/
.wrap .badan .content{
background: red;
float: left;
height: 100%;
width: 75%;
}
.wrap .footer{
width: 100%;
padding: 10px;
}
silahkan di coba.
D.waktu.
20 menit.
E.kesimpulan.
Dapat membuat layout sederhana dengan code HTML dan CSS.
1 Komentar
Top 10 Best Pokies Apps in India 2021 - JT Hub
BalasHapusTop 10 Best 제주 출장마사지 Pokies Apps in India 2021. 1. 강릉 출장안마 The Pirate Party, the first casino on the planet. 2. Slot Machines at 안동 출장샵 Betway, one of the 시흥 출장마사지 best 광양 출장샵 gambling sites in India. 3. Best