Hasilnya seperti:
Code .cssnya:
body {
margin: 10px auto;
width: 906px;
}
header,logo,nav,ol,right,left,section,article,aside,footer{
display:block;
}
header{
background-image: url(2.jpg);
height:105px;
}
logo{
float : left;
margin-left : 10px;
height : 100px;
width : 90px;
background-image : url(3.jpg);
}
nav{
background-color : white;
height: 39px;
padding-top: 10px;
padding-left: 10px;
border: 1px black;
font-family: Kristen ITC;
font-size: 15px;
}
ol {
margin: 0;
padding: 0;
list-style:none;
}
ol li {
position:relative;
float: left;
width: 100px;
}
li ol {
position: absolute;
top: 30px;
display: none;
}
ol li a {
display: block;
text-decoration: none;
line-height: 20px;
color: black;
padding: 5px;
background-color: #FFFF66;
margin-left: 2px;
margin-right: 2px;
border: 1px solid black;
-moz-border-radius:10px;
-webkit-border-radius:10px;}
ol li a:hover { background: #FFFFCC; }
li:hover ol, li.over ol { display: block; }
right {
float: left;
margin-left: 2px;
}
left{
float: right;
margin-right: 2px;
}
section{
float:left;
background-image : url(1.jpg);
height:420px;
width: 280px;
border: 1px black;
}
article{
padding-left: 10px;
font-family: Times New Roman;
font-size: 21px;
color: white;
border: 9px black;
}
aside{
padding-left: 10px;
font-family: Calibri;
font-size: 16px;
color: white;
border: 9px black;
}
article{
background-color : black;
color: white;
float:right;
width:606px;
height:250px;
line-height: 20px;
}
aside{
background-color : black;
float:right;
width:606px;
height:169px;
}
footer{
background-color : black;
clear:both;
padding:12px;
border: 1px black;
height: 29px;
font-family: Calibri;
font-size: 16px;
color: white;
text-align : center;
line-height: 20px;
}
Code .htmlnya:
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Spongebob Squarepants by RagiL</title>
<link rel="stylesheet" href="ss.css" type="text/css" />
</head>
<body>
<header>
<logo></logo>
</header>
<nav>
<right>
Search: <input type="text">
</right>
<left>
<div id="nav">
<left>
<div id="font"><ol>
<li><a href="">Home</a></li>
<li><a href="">News</a>
<ol>
<li><a href="">Spongebob</a></li>
<li><a href="">Mr. Krab</a></li>
<li><a href="">Patric</a></li>
<li><a href="">Gary</a></li>
<li><a href="">Sandy</a></li>
</ol></li>
<li><a href="">Movie</a>
<ol>
<li><a href="">Episode 1</a></li>
<li><a href="">Episode 2</a></li>
<li><a href="">Episode 3</a></li>
<li><a href="">Episode 4</a></li>
<li><a href="">Episode 5</a></li>
<li><a href="">Episode 6</a></li>
<li><a href="">Episode 7</a></li>
</ol> </li>
<li><a href=""> Music</a>
<ol>
<li><a href="">Opening</a></li>
<li><a href="">Closing</a></li>
</ol></li>
<li><a href="">Galery</a>
<ol>
<li><a href="">Nudie Pants</a></li>
<li><a href="">Nickelodeon</a></li>
<li><a href="">Big Action</a></li>
<li><a href="">Big Twist</a></li>
<li><a href="">Bikini Bottom</a></li>
<li><a href="">Sheldon Plankton</a></li>
<li><a href="">Gery The Snail</a></li>
</ol></li>
</ol></div></div>
</left>
</nav>
<section>
</section>
<article>
<br><br><strong>Spongebob Squarepants</strong> Hot Steamy Goodness<br>
Liat acaranya setiap hari setiap saat @GLO..Ltv
<h1>TOeng..TOeng..</h1></article>
<aside>
<br/><strong>Event:</strong>
<ul>
<li><a href="coba.html">Lomba Mirip Personil Spongebob</a><br/></li>
<li><a href="coba.html">Lomba Cipta OST. Spongebob</a><br/></li>
<li><a href="coba.html">Kunjungan Industri Spongebob</a><br/></li>
<li><a href="coba.html">Komunitas Spongebob Regenerasi</a><br/></li>
</ul>
</aside>
<footer>
Home | News | Movie | Music | Galery<br>
© by Ragil Tri Astuti-209533420398
</footer>
</body>
</html>
No comments:
Post a Comment