Whatsup gan! posting kedua saya membagikan "Cara Membuat Layout Sederhana" baca baik baik ya....
Nah...saya membuat layout ini menggunakan software "Sublime Text" saya mencoba membuatnya, jika kalian berminat membuat layout seperti gambar diatas kalian harus mencopy code dibawah ini..
<!DOCTYPE html>
<html>
<head>
<title>Computer Sekai Tutorial</title>
<style type="text/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:about;
}
.badan{
height: 450px;
}
/*bagian sidebar*/
.wrap .badan .sidebar{
background:orange;
float: left;
width: 25%;
height: 100%
}
/*akhir sidebar*/
.wrap .badan .content{
backgroud: red;
float: left;
heigt: 100%;
width: 75%;
}
.wrap .footer{
width: 100%;
padding: 10px;
}
</style>
</head>
<div class="wrap">
<div class="header">
<h1>Computer Sekai</h1>
<p>Tutorial belajar membuat layout website sedehana</p>
</div>
<div class="menu">
<ul>
<li><a href="https://computersekai.blogspot.co.id/">Home</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Javasript</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">
Copyright 2017, All rights reserved. Powered by Reang Komputer & Computer Sekai
</div>
</div>
</body>
</html>
Sekian dari saya nantikan tutorial terbaru dan trendy dari blog ini...
<html>
<head>
<title>Computer Sekai Tutorial</title>
<style type="text/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:about;
}
.badan{
height: 450px;
}
/*bagian sidebar*/
.wrap .badan .sidebar{
background:orange;
float: left;
width: 25%;
height: 100%
}
/*akhir sidebar*/
.wrap .badan .content{
backgroud: red;
float: left;
heigt: 100%;
width: 75%;
}
.wrap .footer{
width: 100%;
padding: 10px;
}
</style>
</head>
<div class="wrap">
<div class="header">
<h1>Computer Sekai</h1>
<p>Tutorial belajar membuat layout website sedehana</p>
</div>
<div class="menu">
<ul>
<li><a href="https://computersekai.blogspot.co.id/">Home</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Javasript</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">
Copyright 2017, All rights reserved. Powered by Reang Komputer & Computer Sekai
</div>
</div>
</body>
</html>
0 Comments for "Cara Membuat Layout Sederhana"