margin : 10px auto;
width : 850px;
}
header, nav, section, footer,article , aside, ini, lagi {
display:block;
border:1px solid blue;
}
header {
background-image:url(saturationnya.png);
height : 80px;
}
nav {
padding:10px;
background-image:url(tengah.png);
height:45px;
}
ini{
background-image:url(tengah.png);
width:400px;
}
lagi{
float:right;
margin-bottom:10px;
height:30px;
width:600px;
}
section {
padding : 20px;
margin : auto;
height:500px;}
article {
float : left;
width : 400px;
height: 500px;
border:1px red;}
aside {
float : right;
width : 400px;
height: 450px;
border:1px solid red;}
footer{
background-image:url(saturationnya.png);
clear:both;
height:55px;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
ul li {
position: relative;
float: left;
width: 120px;
}
li ul {
position: absolute;
top: 30px;
display: none;
}
ul li a {
display: block;
text-decoration: none;
line-height: 20px;
color: white;
padding: 5px;
background: silver;
margin: 0 2px;
}
li:hover ul, li.over ul { display: block; }
ul li a:hover { background: black; }
</style>
</html>
Kemudian dipanggil dengan htmlnya
<!DOCTYPE html>
<html lang="en">
<head>
<title>Layout Modul4</title>
<link rel="stylesheet" href="css.css" type=text/css />
</head>
<body>
<header>
<img src="UM.png" width="85" align="center" /> <img src="name.jpg" width="400" align="center" />
</header>
<nav>
<tr>
<td><font color="green">  Search </td>
</tr>
<input type="text" />
<link href="css.css" rel="csssheet" type="text/css">
<ul id="nav">
<lagi>
<li align="center"><a href="">Home</a></li>
<li><a href="">News & Media</a>
<ul>
<li><a href="">Kanker</a></li>
<li><a href="">Shoping</a></li>
<li><a href="">Tren Mode</a></li>
</ul>
</li>
<li><a href="">Tutorials</a>
<ul>
<li><a href="">Kumpulan Resep</a></li>
</ul>
</li>
<li><a href="">Tips & Tricks</a>
<ul>
<li><a href="">Body Care</a></li>
<li><a href="">Hair Care</a></li>
</ul>
</li>
<li><a href="">Downloads</a>
<ul>
<li><a href="">Dress css</a></li>
<li><a href="">Song Of The Week</a></li>
</ul>
</li>
</ul>
</lagi>
</nav>
<section>
<article>
<img src="air mata.jpg" width="350" heigth="100" align="center" />
</article>
<aside>
2 tangan perempuan harus bisa dibersihkan, tetapi bahnnya bukan dari plastik.
setidaknya terdiri dari 200 bagian yang bisa digerakkan dan berfungsi baik untuk segala jenis
makanan. Mampu menjaga banyak anak di saat yang bersamaan.
Punya pelukan yang dapat menyembuhkan sakit hati dan keterpurukan,
dan semuanya dapat dilakukan hanya dengan dua tangan ini.
Air mata adalah salah satu cara dia mengekspresikan kegembiraan,
kegalauan, cinta, kesepian, penderitaan dan kebanggaan.
Perempuan akan berkorban demi orang yang dicintainya, mampu berdiri melawan
ketidak adilan. Dia tidak menolak kalau melihat yang lebih baik.
<p>
<ini>
<ol>
Events:
<li><a href="cookcheft.html"> Kumpulan Resep Masakan</a>
<li><a href="sweethome.html"> Kota Paling Romantis</a>
<li><a href="JuiceCafe.html"> Minuman Kesehatan</a>
<li><a href="Larissa_Malang.html"> Body Care Centre </a>
</ol>
</ini>
</aside>
</section>
<footer>
© 2011 Bunga Noenu
<font color="black">
<p align="center">
Home | News & Media | Tutorials | Tips & Tricks | Downloads
<p>
</font>
</footer>
</ body>
</html>
Tidak ada komentar:
Posting Komentar