Kali ini kita akan belajar membuat layout sederhana dengan 2 layout kiri dan kanan, oke kita langsung aja,
buat file index.php isikan code berikut
<!DOCTYPE HTML>
<html>
<head>
<link href="external.css" rel="stylesheet" type="text/css" />
<title>Template by IT Code Tutorial</title>
</head>
<body>
<div class="page">
<div class="header">
Header
</div>
<div class="menu">
Menu
</div>
<div class="kotak-isi">
<div class="isi-kiri">
isi kiri
</div>
<div class="isi-kanan">
isi kanan
</div>
</div>
<div class="footer">
Footerkamu © 2015
</div>
</div>
</body>
</html>
simpan file tersebut.
*keterangan : seperti yang telah kita ketahui untuk memanggil file external.css dari html menggunakan perintah <link href="external.css" rel="stylesheet" type="text/css" />
Setelah itu kita membuat file extrnal.css dan isikan code berikut
body{
background: white;
margin: 0;
foont-family: tahoma;
}
.page{
width: 1024px;
height: 768px;
margin: 0 auto;
border : 1px solid;
display: table;
}
.header{
background: green;
padding: 10px;
height: 200px;
}
.menu{
background: yellow;
padding: 5px;
height: 30px;
line-height: 30px;
padding-left: 10px;
}
.kotak-isi{
width: 100%;
display: table;
}
.isi-kiri{
width: 65%;
border : 1px solid;
float: left;
display: table;
padding: 10px;
min-height: 300px;
}
.isi-kanan{
width: 30%;
border : 1px solid;
float: right;
display: table;
padding: 10px;
min-height: 500px;
}
Silahkan pelajari lagi dan kembangkan lagi, semangat !!!
Untuk demo nya silahkan klik disini. semoga bermanfaat.
buat file index.php isikan code berikut
<!DOCTYPE HTML>
<html>
<head>
<link href="external.css" rel="stylesheet" type="text/css" />
<title>Template by IT Code Tutorial</title>
</head>
<body>
<div class="page">
<div class="header">
Header
</div>
<div class="menu">
Menu
</div>
<div class="kotak-isi">
<div class="isi-kiri">
isi kiri
</div>
<div class="isi-kanan">
isi kanan
</div>
</div>
<div class="footer">
Footerkamu © 2015
</div>
</div>
</body>
</html>
simpan file tersebut.
*keterangan : seperti yang telah kita ketahui untuk memanggil file external.css dari html menggunakan perintah <link href="external.css" rel="stylesheet" type="text/css" />
Setelah itu kita membuat file extrnal.css dan isikan code berikut
body{
background: white;
margin: 0;
foont-family: tahoma;
}
.page{
width: 1024px;
height: 768px;
margin: 0 auto;
border : 1px solid;
display: table;
}
.header{
background: green;
padding: 10px;
height: 200px;
}
.menu{
background: yellow;
padding: 5px;
height: 30px;
line-height: 30px;
padding-left: 10px;
}
.kotak-isi{
width: 100%;
display: table;
}
.isi-kiri{
width: 65%;
border : 1px solid;
float: left;
display: table;
padding: 10px;
min-height: 300px;
}
.isi-kanan{
width: 30%;
border : 1px solid;
float: right;
display: table;
padding: 10px;
min-height: 500px;
}
Silahkan pelajari lagi dan kembangkan lagi, semangat !!!
Untuk demo nya silahkan klik disini. semoga bermanfaat.
Tidak ada komentar:
Posting Komentar