css
body {
margin: 10px auto;
width: 1330px;
}
header{
height:100px;
border-top: 1px solid green;
border-right: 1px solid green;
border-left: 1px solid green;
border-bottom: 1px solid blue;
background-image:url(head3.png);
background-repeat: repeat-x;}
#gbrheadr{
float:left;
width:100px;
height:80px;
background-image:url(gambar.png);
margin-left:100px;
}
#teks{
float:left;
width:800px;
height:40px;
background-image:url(teks.png);
margin-left:20px;
}
nav {
height:40px;
border: 1px solid green;
background-color:#5ae3e8;
}
#search {
float:left;
width:60px;
height:20px;
margin-top:3px;
margin-left:80px;
}
#formsearch {
float:left;
margin-left:2px;
width:140px;
height:20px;
margin-top:3px;
}
#home {
float:right;
width:100px;
height:20px;
margin-right:500px;
border:1px solid blue;
margin:2px;
text-align:center;
background-color:#00aacf;
}
#aksesoris {
float:right;
width:100px;
height:20px;
margin-right:500px;
border:1px solid blue;
margin:2px;
text-align:center;
background-color:#00aacf;
}
#fan {
float:right;
width:100px;
height:20px;
margin-right:500px;
border:1px solid blue;
margin:2px;
text-align:center;
background-color:#00aacf;
}
#gambar{
float:right;
width:80px;
height:20px;
margin-right:500px;
border:1px solid blue;
margin:2px;
text-align:center;
background-color:#00aacf;
}
#download{
float:right;
width:100px;
height:20px;
margin-right:500px;
border:1px solid blue;
margin:2px;
text-align:center;
background-color:#00aacf;
}
#dalam {
width:1325px;}
section {
height:500px;
border: 1px solid green;
}
article {
float:left;
border: 1px solid red;
width:292px;
height:492px;
background-image:url(doraemon-1.png);
border:4px solid black;
}
aside {
height:350px;
width:1018px;
float:left;
}
#event {
height:145px;
width:1025px;
float:right;
border: 1px solid #1082f6;
background-color:#ade0e4;
}
footer{
height:30px;
border:1px solid blue;
padding-left:500px;
background-image:url(footer1.png)
}
#bawah {
float:left;
width:500px;
height:20px;
font-weight:bold;
margin:2px;
text-align:center;
}
Html
<!doctype HTML>
<html lang="en">
<head>
<title>background image</title>
<link rel="stylesheet" href="mystyle.css" type= "text/css" />
</head>
<body>
<header>
<div id="gbrheadr"></div>
<div id="teks"></div>
</header>
<nav><div id="search">
Search
</div>
<div id="formsearch"><input type="text" maxlength=80>
</div>
<div id="download">
<a href="download.html">Download</a>
</div>
<div id="gambar">
<a href="Gambar.html">
Gambar
</a></div>
<div id="fan">
<a href="Fan.html">Fans Area
</a></div>
<div id="aksesoris">
<a href="aksesoris.html">Aksesoris
</a></div>
<div id="home">
<a href="home.html">Home
</a></div>
</nav>
<section><div id="dalam">
<article>
</article>
<aside><p>DORAEMON adalah sebuah robot kucing yang dibuat pada tanggal 3 September 2112. Produksi missal berbagai macam tipe robot terjadi pada abad ke 22.
Di sebuah pabrik yang tidak jauh dari Tokyo, diproduksilah robot-robot kucing.
Karena sebuah kecelakaan, DORAEMON kurang 1sekrup disbanding robot kucing lainnya & menjadi barang kelas dua.
Walau DORAEMON tidak begitu baik dalam study-nya,robot ini dikirim ke Akademi Robot untuk dilatih sebagai robot rumah tangga.
Dia bisa lulus juga pada akhirnya. Tetapi, tidak semuanya berjalan mulus bagi doraemon.
DORAEMON gagal dalam semua ujiannya. dan menjadi pengasuh dari keturunan Nobita.
<p>Akibatnya , DORAEMON dilelang kepada sebuah keluarga miskin yang terlilit hutang, yang tak lain adalah keluarga keturunan Nobi Nobita.
Pada suatu hari, saat DORAEMON sedang asyik tidur siang, sebuah robot tikus menggigit kedua daun telinganya.
musibah ini membuat DORAEMON sangat sedih & menangis selama 10 hari. Air mata membuat warna aslinya yang kuning terang menjadi biru
</aside>
</div>
<div id="event">
<b>EVENT</b>
<font face=arial black color=#33cccc>
<ul>
<li><b><a href="lomba1.html">Lomba Mirip Doraemon</a></b>
<li><b><a href="Gatheing.html">Gathering Fans Doraemon</a></b>
<li><b><a href="Jumpa.html">Jumpa Pencipta Karakter Doraemon </a></b>
</ul>
</font>
</div>
</section>
<footer>
<div id="bawah">
<a href="home.html">Home</a> | <a href="aksesoris.html">Aksesoris</a> | <a href="fans.html">Fans Area</a> | <a href="gambar.html">Gambar</a> | <a href="download.html">Downloads</a>
</div>
</footer>
</body>
</html>
Tidak ada komentar:
Posting Komentar