Minggu, 07 November 2010

TUGAS CSS

index.htm
<html>
<head>
<title>MOCHAMAD ZAQI WEB'S</title>
<!--htmlink.htm-->
<frameset rows=20%,* border=20>
<frame src="topframe.htm"name="atas" scrolling="no" noresize>
<frameset rows="*" cols="19%,81%">
<frame src="leftframe.htm" name="kiri" noresize>
<frame src="rightframe.htm" name="kanan">
</frameset>
<noframes></noframes>
</head>
</html>

leftframe.htm
<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css">
<title>leftframe</title>
<!--htmlink.htm-->
<frame>
<body class="bodyleft">
<div class="leftlinks">
<a href="rightframe.htm"target="kanan"><font class="sp2">Home</font></a>
<a href="profile.htm"target="kanan"><font class="sp2">Profile</font></a>
<a href="warna1.htm"target="kanan"><font class="sp2">warna 1</font></a>
<a href="warna2.htm"target="kanan"><font class="sp2">warna 2</font></a>
<a href="warna3.htm"target="kanan"><font class="sp2">warna 3</font></a>
<a href="gallery.htm"target="kanan"><font class="sp2">Gallery</font></a>
<a href="bukutamu.htm"target="kanan"><font class="sp2">Buku Tamu</font></a>
<a href="contact.htm"target="kanan"><font class="sp2">Contact Us</font></a>
</div>
</body>
</frame>
</head>
</html>

css.css

.sp1 {
font-size: 20px;
color:#FFFFFF;
}
.sp2 {
font-size: 20px;
color:#FFFFFF;
}
.sp3 {
font-size: 28px;
color:#FFFFFF;
}
.bodytop {
background-color:black;
}
.bodyleft {
background-color:red;
}
.bodywarna1 {
background-color:#00FF00;
}
.bodywarna2 {
background-color:#3366FF;
}
.bodywarna3 {
background-color:#FFFF00;
}
.leftlinks {
border:1px solid #22476C;
padding:5px;
margin:5px;
text-align:middle;
background-color:#FF0000;
width:150px; }
.leftlinks a {
display:block;
margin:3px 0px;
border-top:1px solid #4C86C0;
border-left:1px solid #4C86C0;
border-right:1px solid #22476C;
border-bottom:1px solid #22476C;
padding: 4px 10px;
text-align:center;
background-color:#000000;
color:#EDEDED;
text-decoration:none; }
.leftlinks a:link {
color:#EDEDED; }
.leftlinks a:visited {
color:#EDEDED; }
.leftlinks a:hover {
display:block;
margin:3px 0px;
border-top:1px solid #22476C;
border-left:1px solid #22476C;
border-bottom:1px solid #4C86C0;
border-right:1px solid #4C86C0;
padding: 5px 9px 3px 11px;
text-align:center;
background-color:#336699;
color:#EED929;
text-decoration:none; }

ini tampilan background css dan TOMBOL 3 D pada CSS