Kamis, 29 Januari 2015
Minggu, 11 Januari 2015
layouting home
index.html
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css/base.css" />
</head>
<body>
<div id="wrap">
<!--Header-->
<div id="headerWrap">
<div class="headingBlockA1">
<div class="logo">
</div>
<div class="kategori">
</div>
<div class="kategori">
</div>
<div class="kategori">
</div>
<div class="kategori">
</div>
<div class="kategori">
</div>
</div>
<div class="headingBlockA2">
<div class="gnav">
</div>
<div class="gnav">
</div>
<div class="gnav">
</div>
<div class="gnav">
</div>
</div>
</div>
<!--/header-->
<!--MAIN-->
<div id="mainWrap">
<div id="mainArea">
<div class="banner">
</div>
</div>
</div>
<!--/mAIN-->
<!--FOOTER-->
<div id="footerWrap">
<div id="footerArea">
<div class="columnBlock">
</div>
<div class="columnBlock">
</div>
<div class="columnBlock">
</div>
<div class="columnBlock2">
</div>
<div class="columnBlock2">
</div>
</div>
</div>
<div id="footerWrap2">
<div class="copyright">
</div>
</div>
<!--/FOOTER-->
</div>
</body>
</html>
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css/base.css" />
</head>
<body>
<div id="wrap">
<!--Header-->
<div id="headerWrap">
<div class="headingBlockA1">
<div class="logo">
</div>
<div class="kategori">
</div>
<div class="kategori">
</div>
<div class="kategori">
</div>
<div class="kategori">
</div>
<div class="kategori">
</div>
</div>
<div class="headingBlockA2">
<div class="gnav">
</div>
<div class="gnav">
</div>
<div class="gnav">
</div>
<div class="gnav">
</div>
</div>
</div>
<!--/header-->
<!--MAIN-->
<div id="mainWrap">
<div id="mainArea">
<div class="banner">
</div>
</div>
</div>
<!--/mAIN-->
<!--FOOTER-->
<div id="footerWrap">
<div id="footerArea">
<div class="columnBlock">
</div>
<div class="columnBlock">
</div>
<div class="columnBlock">
</div>
<div class="columnBlock2">
</div>
<div class="columnBlock2">
</div>
</div>
</div>
<div id="footerWrap2">
<div class="copyright">
</div>
</div>
<!--/FOOTER-->
</div>
</body>
</html>
base.css
@charset "utf-8";
/* CSS Document */
#wrap{
width:100%;
}
/*header*/
#headerWrap{
width:100%;
height:100px;
background-color:#000;
}
.headingBlockA1{
float:left;
width:500px;
height:100px;
background-color:#C00;
}
.headingBlockA2{
float:right;
width:500px;
height:100px;
background-color:#C00;
}
.logo{
float:left;
width:200px;
height:100px;
background-color:#99F;
}
.kategori{
float:left;
width:50px;
height:100px;
background-color:#F06;
margin-left:5px;
}
.kategori:hover{
background-color:#3F6;
}
.gnav{
width:100px;
height:100px;
margin-right:5px;
background-color:#639;
float:left;
}
.gnav:hover{
background-color:black;
}
/*header*/
/*main*/
#mainWrap{
width:100%;
height:1000px;
background-color:#09F;
}
#mainArea{
width:960px;
height:1000px;
margin:0 auto;
background-color:#FF9;
}
.banner{
width:940px;
height:400px;
background-color:#69C;
margin:10px;
}
/*main*/
/*footer*/
#footerWrap{
width:100%;
height:400px;
background-color:#6F6;
}
#footerWrap2{
width:100%;
height:50px;
background-color:#000;
}
#footerArea{
width:960px;
height:400px;
background-color:#F36;
margin:0 auto;
}
.columnBlock{
width:300px;
height:100px;
margin:10px;
float:left;
background-color:#036;
}
.columnBlock2{
width:300px;
height:200px;
background-color:#036;
float:left;
margin:10px;
}
.copyright{
width:960px;
height:50px;
margin:0 auto;
background-color:#000;
}
/*footer*/
Langganan:
Postingan (Atom)