Senin, 28 Februari 2011
Source kode CSS :
body{
margin: 10px auto;
width:950px
}
.header{
border:1px solid green;
height:100px;
}
.nav{
border:1px solid blue;
height:70px;
}
.nav #button a:active{
background-color:aqua;
}
.nav #search{
margin:5px;
margin-left:700px;
}
.section{
border:1px solid red;
}
.section #article{
border:1px dotted orange;
float:left;
width:650px;
height:390px;
margin-left:8px;
margin-top:10px;
margin-right:15px;
margin-bottom:0px;
}
.section #sidebar{
border:1px dotted purple;
margin-left:650px;
margin-top:10px;
margin-right:;
margin-bottom:0px;
width:240px;
height:390px;
}
.footer{
border:1px solid brown;
height:20px;
}
ul li a {display: block;
text-decoration:none;
line-height:2px;
color:#dedede;
padding:10px;
background:#505050;
margin:1px 1px;}
ul {margin:1;
padding:0;
list-style: none;}
ul li {position: relative;
float: left;
width:90px;}
li ul {position: absolute;
top: 1px;
display: none;}
Source kode HTML :
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en">
<head>
<link rel="stylesheet" href="studikasusstyle.css" type=text/css />
<title>Studi Kasus</title>
</head>
<body>
<div class="header">
header
</div>
<div class="nav">
<ul id="button">
<li><a href="">home</a></li>
<li><a href="">tips</a></li>
<li><a href="">tutorial</a></li>
<li><a href="">news</a></li>
<li><a href="">downloads</a></li>
</ul>
<div id="search">search : <input></input></div>
</div>
<div class="section">
<div id="article">
article
</div>
<div id="sidebar">
sidebar
</div>
section
</div>
<div class="footer">
footer
</div>
</body>
</html>
0 komentar:
Posting Komentar