Berikut adalah Script CSS dari tampilan diatas (disimpan dengan nama cssempat.css):
#fontbesar {
font-family:Arial;
font-size:16px;
color: Black;
font-weight: bold;
}
#margin{
margin-left:10px;
}
#font {
font-family:Arial;
font-size:11px;
color: Black;
font-weight: bold;
}
#fontkecil {
font-family:Arial;
font-size:11px;
color: black;
}
#wrapper {
background-color: white;
margin: auto;
width: 750px;
border: 1px;
height:490px;
}
#header {
height: 80px;
border: 1px;
background-image:url(header.jpg);
background-repeat:no-repeat;
}
#inner {
float: left;
margin: 5px 0;
border: 1px;
}
#sidebar {
background-image:url(sidebar.jpg);
background-repeat:no-repeat;
float: left;
margin-right: 20px;
width: 180px;
height: 330px;
border: 1px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
#news{
margin-top: 20px ;
margin-left: 20px ;
width: 135px;
height: 280px;
border: 1px ;
}
#content {
background-image:url(content.jpg);
background-repeat:no-repeat;
float: left;
width: 544px;
height: 330px;
border: 1px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
#footer {
background-image:url(footer.jpg);
background-repeat:no-repeat;
clear: both;
height: 50px;
border: 1px;
}
#nav{margin:5px;
height: 30px;
border: 1px;
}
ol {
margin: 0;
padding: 0;
list-style:none;
}
ol li {
position:relative;
float: left;
width: 120px;
}
li ol {
position: absolute;
top: 30px;
display: none;
}
ol li a {
display: block;
text-decoration: none;
line-height: 20px;
color: #000;
padding: 5px;
background: orange;
margin: 0 2px;
-moz-border-radius:10px;
-webkit-border-radius:10px;}
ol li a:hover { background: red; }
li:hover ol, li.over ol { display: block; }
#search {
margin-top:0px;
margin-left:250px ;}
Dan untuk Scriptnya sebagai berikut :
<!DOCTYPE HTML> <html lang="en"> <head> <title>Simple to Perfect</title> <link rel="stylesheet" href="cssempat.css" type="text/css" /> </head> <body background="back.jpg"> <div id="wrapper"> <div id="header"> </div> <div id="nav"><div id="font" align = "center"><ol> <li><a href="">Home</a></li> <li><a href="">Smpl t Prfct</a> <li><a href="">Gallery's</a> <ol> <li><a href="">Landscape Road</a></li> <li><a href="">Fashion Race</a></li> </ol></li> <li><a href="">Magaziners</a> <ol> <li><a href="">Motorplus</a></li> <li><a href="">Ototrend</a></li> <li><a href="">Otosport</a></li> </ol></li> <li><a href="">Event</a> <ol> <li><a href="">Indoprix</a></li> <li><a href="">Motoprix</a></li> <li><a href="">Cross</a></li> </ol></li> <li><a href="">Tips</a></li> </ol></div></div> <div id="inner"> <div id="sidebar"> <div id="news"><div id="fontkecil"> <hr> <b>Hot News</b> <hr> <ul> <li><a href="">Jepret New CBR 250</a></li> <li><a href="">Make easy service</a></li> <li><a href="">Motogp Go Back 2011</a></li></ul><hr> <b>Big Community</b><hr> <ul> <li><a href="">Moto Bikers </a></li> <li><a href="">Cepotz</a></li> <li><a href="">Quizz</a></li></ul> </div> </div> </div> <div id="content"> <br> <div id="fontbesar">Rossi Ducati Hope Perfect</div> <br> <div id="margin"> <img src = "ducati.jpg" height="100"/> </div> MOTOGP 2011 pastinya akan lebih menarik dengan pindahnya Rossi dari Yamaha, dan beralih kerjasama dengan Ducati. Tidak semudah yang dibayangkan bagaimana Rossi menyesuaikan diri dengan tunggangan barunya. Akan tetapi Rossi tetap Rossi, yang selalu membawa kejutan bagi para rival-rivalnya. Hal ini terbukti bahwa Rossi dapat beradaptasi dengan baik saat pindah dari Honda ke Yamaha tahun 2004 lalu. </div> </div> <div id="footer"> <div id="search"> <label><a href=""><b>Search</b></a></label> <input type="text" name="email"> </div> </div> </div> </body> </html>
Tidak ada komentar:
Posting Komentar