1. MENU DROP DOWN
<html>
<head>
<title> Belajar menu drop down </title>
<style type="text/css">
#logo-text {
font-family:Georgia, "calibri", Times, serif;
font-size:38px;
color:#9900FF;
font-weight:normal;
float:left;
margin:-40px 0px 0px 10px;
}
.dropmenu {
background: #FF0000;
height: 300px;
width: 929px;
list-style-type: none;
margin: 40 0 0 200;
padding: 0px;
}
.dropmenu li {
border-right: solid 1px white;
float: left;
height: 30px;
}
.dropmenu li a {
color: #fff;
display: block;
font: 20px arial, verdana, sans-serif;
font-weight: bold;
padding: 9px 20px;
text-decoration: none;
}
.dropmenu li:hover { background: #FFFF00; position: relative; }
.dropmenu li:hover a { text-decoration: underline; }
.dropmenu li:hover ul {
background-color: #3f4a54;
border: 1px solid grey;
left: 0px;
padding: 1px;
top: 30px;
width: 160px;
}
.dropmenu li:hover ul li { border: none; height: 18px; }
.dropmenu li:hover ul li a {
background-color: #FFFF00;
border: 1px solid transparent;
color: #fff;
display: block;
font-size: 16px;
height: 18px;
line-height: 18px;
padding: 0px;
text-decoration: none;
text-indent: 5px;
width: 158px;
padding: 3px;
}
.dropmenu li:hover ul li a:hover {
background: white;
border: solid 1px #444;
color: #000000;
height: 18px;
padding: 3px;
}
.dropmenu ul {
left: -9999px;
list-style-type: none;
position: absolute;
top: -9999px;
}
</style>
</head>
<boyd>
<h1 id="logo-text">Menu Dropdown</h1>
<ul class="dropmenu">
<li><a href="#">Home</a>
<ul>
<li><a href="#">Beranda</a></li>
<li><a href="#">Buku Tamu</a></li>
</ul>
</li>
<li><a href="#">Profil</a>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twetter</a></li>
</ul>
</li>
<li><a href="#">Kontak</a>
<ul>
<li><a href="#">Whatapps</a></li>
<li><a href="#">Wechat</a></li>
<li><a href="#">Line</a></li>
<li><a href="#">BBM</a></li>
</ul>
</li>
</ul>
</body>
</html>
2. TABEL DENGAN EFEK MOUSE HOVER
<html>
<title>Table Zebra</title>
<head>
<style>
#body
{ background-color:#FF7373;
}
.utama
{
width:80%;
margin-top:20px;
margin-left:100px;
border:1px solid #000000;
font-family:Trebuchet MS, Arial, Helvetica, sans-serif;
text-align:center;
border-radius:0px;
}
td{border: 1px solid #ffffff;border-radius:0px;
}
th
{
text-align:center;
align:center;
background-color:#ffffff;
color:black;border-radius:0px;
}
.utama1
{
text-align:center;
border-radius:30px;
}
tr:hover {color: #ffffff;cursor: pointer;}
transition: all 1s;
</style>
</head>
<body>
<body id="body">
</div>
</body>
<table class="utama">
<tr>
<th>No</th>
<th>Nama</th>
<th>Tanggal lahir</th>
</tr>
<tr class="utama">
<td>1</td>
<td>ALFI NUR R</td>
<td>4 JANUARI 1994</td>
</tr>
<tr class="utama1">
<td>2</td>
<td>AULIA YUSTIKA P</td>
<td>4 JUNI 1998</td>
</tr>
<tr class="utama">
<td>3</td>
<td>ARIYANA CANDRA DEWI</td>
<td>13 DESEMBER 2003</td>
</tr>
</table>
</html>
Langganan:
Posting Komentar (Atom)
Tidak ada komentar:
Posting Komentar