Membuat layout toko online css

Script css toko online. langkah pertama mebuat folder dengan nama toko online didalam folder toko online kita buat folder dengan nama css

Tulis script dibawah ini dan simpan di dalam folder css dengan nama style.css

/* CSS Document */
body{
background:url(../image/bg.jpg) repeat;
background-position:46px;
padding:0;
margin:0;
padding-bottom:10px;
}
.bersihkandiv{
clear:both;
border-top:1px;
width:100%;
}
.rangka{
width:980px;
margin-left:auto;
margin-right:auto;
}
.header{

height: 20px;
/*color:#FFFFFF;*/
}
.h1{
float:left;
padding-top:10px;
width:740px;
font-size:14px;
text-align:none;
font-family: Tahoma;
color:white;
}
.h1 a, .h1 a:visited{
color:#C90;
}
.h2{
padding-top:5px;
float:right;
width:160px;
font-size:14px;
text-align:left;
font-family: Tahoma;
}
.logo{
float:left;
padding:5px;
width:300px;
font-family: Tahoma;
color: #FFF;
}
.ok{
border-radius: 5px 5px 5px 5px;
background-color: black;
width: 980px;
float:left;
}
.menu{
border-radius: 5px 5px 5px 5px;
font-family: Tahoma;
background-color: #000;
padding: 10px;
height:20px;
width: 940px;
margin-bottom:20px;
font-size:14px;
font-weight: bold;
float:right;
margin-right:10;
}
.menu ul
{
float:left;
padding: 0;
margin: 0;
list-style: none;
}
.menu ul li
{
float : left;
position: relative;
}
.menu ul li a
{ color:#FFFFFF;
text-decoration : none;
display : block;
float: left;
padding: 5px 10px 5px 10px;
}
.menu ul li a:hover
{
border-bottom:2px solid#F00;
color:#999;
}
.menu ul li a:active
{
background-color:#ffffff;
color : #990;
}
.menu ul li ul
{
z-index:999999;
display : none;
background:#fff;
padding-left:10px;
}
.menu ul li:hover ul:hover
{
}
.menu ul li:hover ul
{
display : block;
top : 25px;
position: absolute;
padding-top: 1px;
left:0;
}
.menu ul li:hover ul li a
{
background-color:#fff;
color:#000;
display : block;
width: 150px;
background:url(../image/subMenuLi.jpg) no-repeat left;
}
.menu ul li:hover ul li a:hover
{
border:none;
color:#999;
}
.konten{
background-color: #666;
border: 1px solid #CCC;
min-height: 150px;
display:inline-block;
width:980px;
}
th{
text-align:center;
vertical-align: middle;
padding: 5px;
background:#039;
color:#FFF;
}
.slide{
float:left;
width:962px;
padding-top:0px;
padding-left:10px;
}
.kontenkanan{
float:left;
width:750px;
padding-top:10px;
padding-left:10px;
}
.kkanan-judul{
font-size:18px;
font-weight:bold;
}
.kkanan-isi{
font-size:14px;
text-align:justify;
}
.kontenkiri{
float:left;
width:200px;
padding-left:10px;
padding-top:10px;
}
.kn-box{
border: 1px solid #967171;
background-color: #000;
min-height: 100px;
width:232px;
float:left;
margin-left:10px;
margin-bottom: 10px;
}
.kn-nama{
height:30px;
text-align:center;
}
.kn-nama a, a:visited{
color:#C90;
text-decoration:none;
}
.kn-diskon{
position:absolute;
width:40px;
height:30px;
margin-left:15px;
margin-top:5px;
text-align:right;
color:#CBCBCB;
padding-top:10px;
background:#0365f9;
border-radius: 100%;
}
.kn-foto{
text-align:center;
margin-bottom:5px;
margin-top:5px;
background: black;
}
.kn-foto img{
width:180px;
height:180px;
text-align:center;
}
.kn-harga{
float:left;
width:190px;
padding-top:5px;
}
.kn_harga_lama{
text-decoration: line-through;
color:#F00;
float:right;
padding-right:5px;
}
.kn_harga_baru{
float:right;
padding-right:5px;
}

.kn-beli a{
float:center;
text-decoration:none;
width:25px;
text-align:center;
color:#fff;
padding:4px;
background-color: #00F;
}
.kn-isi{
text-align:justify;
height:25px;
}
.pkiri{
float:left;
width:200px;
}
.pkanan{
float:left;
width:200px;
}
.kn-judul{
color:#C90;
font-size:16px;
margin-bottom:10px;
border-bottom:1px solid #C90;
}
.kk-page{
border: 1px solid #967171;
margin-bottom: 10px;
background-color: #000;
padding: 5px;
}
.kk-judul{
color: #FFF;
padding: 5px;
margin-bottom: 5px;
background-color: #632121;
}
.kk-isi{
padding:5px;
border: 1px solid #967171;
}
.footer{
font-size: 12px;
color: rgb(255,255,255);
background-color: #666;
padding: 10px;
height:10px;
width:960px;
}
.footer a{
text-decoration:none;
color:#000;
}
.f1{
float:left;
width:520px;
text-align:left;
}
.f2{
float:right;
width:350px;
text-align:right;
}
.fatas{
float:left;
width:200px;
min-height:100px;
padding:10px;
font-size:14px;
}
.fatas h2{
font-family: Arial-narrow,Arial,Helvetica,sans-serif;
font-size: 1em;
text-align: left;
text-shadow: 1px 1px 0px #fff;
font-weight: normal;
text-transform: uppercase;
line-height: 16px;
color: #000;

.jarak{
float: left;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
border-radius: 5px;
width: 195px;
text-align:left;
height:220px;
background-color:#eee;
color:#000;
margin:5px;
font-size:12px;
margin-bottom:15px;
}
.login
{
background:#FFF;
width:270px;
height:170px;
padding:10px;
text-align:center;
border-radius:10px;
}
.button, .button:visited
{
border: 1px solid #999;
background:#0365f9;
padding:5px;
border-radius:5px;
color:#fff;
cursor:pointer;
text-decoration:none;
}
#toTop {
width: 100px;
border: 2px solid rgb(153, 153, 153);
background-color: #F00;
opacity: 0.9;
color: rgb(255, 255, 255);
text-align: center;
padding: 5px;
position: fixed;
bottom: 10px;
right: 10px;
cursor: pointer;
font-family: verdana;
font-size: 11px;
border-radius: 5px 5px 5px 5px;
z-index: 999;
}

Selamat Mencoba