SOURCE CODE CSS:
body
{
margin: 10px auto;
width: 750px;
}
header,nav,section,footer
{
display: block;
border: 1px solid blue;
}
header
{
height: 80px;
width: 750px;
border: 1px solid green;
}
nav
{
float: left;
width: 750px;
height: 80px;
border: 1px solid blue;
}
.nav #button a:active{
background-color:magenta;
}
.nav #search{
margin:5px;
margin-left:500px;
}
article
{
float:left;
margin-top: 20px;
margin-left: 20px;
height: 350px;
width: 500px;
border: 2px dashed red;
}
aside
{
float:left;
margin-top: 20px;
margin-left: 20px;
height: 350px;
width: 180px;
border: 2px dashed blue;
}
section
{
margin-top: 22px;
width: 750px;
height: 400px;
border: 1px solid red;
}
footer
{
clear: both;
width: 750px;
height: 30px;
}
ul li a {display: block;
text-decoration:none;
line-height:3px;
color:white;
padding:10px;
background:black;
margin:2px 2px;}
ul {margin:1;
padding:10;
list-style: none;}
ul li {position: relative;
float: left;
width:90px;}
li ul {position: absolute;
top: 1px;
display: none;}
SOURCE CODE 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>
<title>Desain Layout STUDY KASUS</title>
<link rel="stylesheet" href="studykasus.css" type="text/css" />
</head>
<body>
<header>
header
</header>
<nav>
nav
<div class="nav">
<ul id="button">
<li><a href="">home</a></li>
<li><a href="">news</a></li>
<li><a href="">tutorial</a></li>
<li><a href="">downloads</a></li>
</ul>
<div id="search">search : <input></input></div>
</div>
<div class="section">
<div id="article">
</nav>
<section>
<article>
article
</article>
<aside>
aside
</aside>
section
</section>
<footer>
footer
</footer>
</div>
</body>
</html>
Tidak ada komentar:
Posting Komentar