Membuat Layout Sederhana Toko Kue Menggunakan CSS
script layout.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Layout Sederhana</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="banner">
<div class="logo"><img src="logo-kue.png" alt="logo" width="100%" height="70px"></div>
<div class="title">QueQu.com<br>
<div class="text-title">" QueQu Halal, Enak, Lezat, dan Bergizi "</div></div>
<div class="alamat">
Pondok Ungu Permai<br>
Jl. Merseyside No.18 Rt.008/011<br>
Kaliabang Tengah - Bekasi Utara<br>
021-88730665
</div>
</div>
<div class="content">
<div class="content-kiri">
<div class="navigation">
<ul>
<li><a href=".">Beranda</a></li>
<li><a href=".">Produk</a></li>
<li><a href=".">Resep</a>
<ul>
<li><a href=".">Resep Kue Kering</a></li>
<li><a href=".">Resep Kue Basah</a></li>
<li><a href=".">Resep Kue Ulang Tahin</a></li>
<li><a href=".">Resep Kue Bolu</a>
<ul class="sub">
<li><a href=".">Resep Bolu Kukus</a></li>
<li><a href=".">Resep Bolu Panggang</a></li>
<li><a href=".">Resep Bolu Coklat</a></li>
<li><a href=".">Resep Bolu Pandan</a></li>
</ul>
</li>
</ul>
</li>
<li><a href=".">Tentang Kami</a></li>
<li><a href=".">Kontak</a></li>
</ul>
</div>
<div class="promo"><img src="kue1.jpg" alt="" width="100%" height="140px"></div>
<div class="promo"><img src="kue2.jpg" alt="" width="100%" height="140px"></div>
<div class="promo"><img src="kue1.jpg" alt="" width="100%" height="140px"></div>
</div>
<div class="iklan"><marquee behavior="alternate"> Selamat Datang Di Toko Kami </marquee></div>
<div class="content-tengah">
<div class="isi-content">
<img src="kue1.jpg" alt="" width="100%" height="170px">
<div class="text-content">Kue Kecubit</div>
</div>
<div class="isi-content">
<img src="kue2.jpg" alt="" width="100%" height="170px">
<div class="text-content">Kue Bulet</div>
</div>
<div class="isi-content">
<img src="kue1.jpg" alt="" width="100%" height="170px">
<div class="text-content">Kue Cubit</div>
</div>
<div class="isi-content">
<img src="kue2.jpg" alt="" width="100%" height="170px">
<div class="text-content">Kue Bosok</div>
</div>
<div class="isi-content">
<img src="kue1.jpg" alt="" width="100%" height="170px">
<div class="text-content">Kue Markarane</div>
</div>
<div class="isi-content">
<img src="kue2.jpg" alt="" width="100%" height="170px">
<div class="text-content">Kue Limpoo</div>
</div>
<div class="pagging">
<div class="number">
<div class="number1"> << </div>
<div class="number1">1</div>
<div class="number1">2</div>
<div class="number1">3</div>
<div class="number1"> >> </div>
</div>
</div>
</div>
</div>
<div class="footer">Design by heeyriku © 2015</div>
</div>
</body>
</html>
script style.css
body{
padding: 0;
margin: 0;
}
.container{
width: 1000px;
height:780px;
margin: 0 auto;
}
.banner{
width: 100%;
height: 120px;
background: #019875;
}
.logo{
width: 70px;
height: 70px;
margin:40px 10px 0 20px;
float: left;
}
.title{
margin:44px 20px 0 0;
float: left;
font-size: 36px;
text-shadow: 1px 3px 5px red;
color: #fff;
}
.text-title{
font-size: 13px;
color: #fff;
text-shadow: none;
}
.alamat{
float: right;
margin:20px;
color: #fff;
}
.content{
width: 100%;
height: 450px;
}
.iklan{
width: 800px;
border-bottom:3px solid #019875;
float: left;
padding: 3px 0;
}
.content-kiri{
width: 200px;
height: 615px;
float: left;
background: #eee;
}
.content-kanan{
width: 200px;
height: 450px;
float: left;
background: #eee;
}
.content-tengah{
width: 800px;
height: 615px;
float: left;
background: #eee;
}
.isi-content{
width: 200px;
height: 220px;
margin:10px 30px;
float: left;
}
.text-content{
text-align: center;
margin: 2px 0;
color: #019875;
font-weight: bold;
}
.pagging{
width: 760px;
padding: 20px;
float: left;
}
.number{
width: 300px;
height: 20px;
margin:0 auto;
color:#019875;
}
.number1{
float: left;
border: 1px solid #019875;
padding: 10px 20px;
}
.footer{
width: 1000px;
padding: 20px 0;
background: #019875;
float: left;
text-align: center;
color: #fff;
}
.promo{
width: 175px;
padding: 10px;
height: 143px;
border:1px solid #019875;
}
.navigation ul {
list-style-type: none;
margin: 0;
margin-left: -40px;
}
.navigation ul a {
text-decoration: none;
color: #fff;
}
.navigation ul li {
padding:5px;
background: #019875;
border: 1px solid #fff;
}
.navigation ul li:hover {
background: #26A65B;
}
.navigation li ul {
display:none;
position:absolute;
}
.navigation li:hover ul{
display:block;
width: 200px;
margin-top:-25px;
margin-left:155px;
}
.sub{
display: none !important;
}
.navigation ul li ul li:hover .sub{
display: block !important;
}
source codenya bisa di download disini
Selamat mencoba, learning by doing :)