>
Menu Dropdown
script HTML
ini script CSSnya :
berinama : menu.css
Tabel Zebra
script HTML
scrip CSSnya
Berinama : tab.css
script HTML
<html>
<head>
<title>MENU</title>
<link href="menu.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul class="dropdown">
<li><a href="">MOVIE</a>
<ul>
<li><a href="">Action</a></li>
<li><a href="">Anime</a></li>
<li><a href="">Comedy</a></li>
<li><a href="">Horor</a></li>
<li><a href="">Tailer</a></li>
<li><a href="">Other</a></li>
</ul>
<li><a href="">MUSIC</a>
<ul>
<li><a href="">Rock</a></li>
<li><a href="">Metal</a></li>
<li><a href="">Dangdut</a></li>
<li><a href="">Pop</a></li>
<li><a href="">Other</a></li>
</ul>
<li><a href="">SOFTWARE</a>
<ul>
<li><a href="">Multimedia</a></li>
<li><a href="">Utility</a></li>
<li><a href="">Graphic</a></li>
<li><a href="">Other</a></li>
</ul>
</li>
</ul>
</body>
</html>
<head>
<title>MENU</title>
<link href="menu.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul class="dropdown">
<li><a href="">MOVIE</a>
<ul>
<li><a href="">Action</a></li>
<li><a href="">Anime</a></li>
<li><a href="">Comedy</a></li>
<li><a href="">Horor</a></li>
<li><a href="">Tailer</a></li>
<li><a href="">Other</a></li>
</ul>
<li><a href="">MUSIC</a>
<ul>
<li><a href="">Rock</a></li>
<li><a href="">Metal</a></li>
<li><a href="">Dangdut</a></li>
<li><a href="">Pop</a></li>
<li><a href="">Other</a></li>
</ul>
<li><a href="">SOFTWARE</a>
<ul>
<li><a href="">Multimedia</a></li>
<li><a href="">Utility</a></li>
<li><a href="">Graphic</a></li>
<li><a href="">Other</a></li>
</ul>
</li>
</ul>
</body>
</html>
ini script CSSnya :
berinama : menu.css
/* dropdown */
.dropdown {
background:red;
height:50px;
margin: 0;
}
.dropdown li {
border-right: solid 2px white;
float: left;
height: 50px;
}
.dropdown li a {
color: #fff;
display: block;
font-size:20px;
font-family:"monospace";
line-height: 25px;
font-weight: bold;
padding: 10px;
text-decoration: none;
}
.dropdown li:hover {
background: #D40000;
position: relative;
}
.dropdown li:hover a {
text-decoration: none;
}
.dropdown li:hover ul {
border: 3px;
left: 0px;
padding: 3px;
top: 30px;
width: 100px;
}
.dropdown li:hover ul li {
border: 0;
height: 20px;
}
.dropdown li:hover ul li a {
background-color: red;
border: 1px solid transparent;
color: #2A0000;
display: block;
font-size: 15px;
height: 20px;
line-height: 13px;
padding: 0px;
text-decoration: none;
text-indent: 0px;
width: 150px;
padding: 3px;
}
.dropdown li:hover ul li a:hover {
background: white;
color: #000;
height: 13px;
padding: 3px;
}
.dropdown ul {
left: -9999px;
list-style-type: none;
position: absolute;
top: -9999px;
}
</style>
.dropdown {
background:red;
height:50px;
margin: 0;
}
.dropdown li {
border-right: solid 2px white;
float: left;
height: 50px;
}
.dropdown li a {
color: #fff;
display: block;
font-size:20px;
font-family:"monospace";
line-height: 25px;
font-weight: bold;
padding: 10px;
text-decoration: none;
}
.dropdown li:hover {
background: #D40000;
position: relative;
}
.dropdown li:hover a {
text-decoration: none;
}
.dropdown li:hover ul {
border: 3px;
left: 0px;
padding: 3px;
top: 30px;
width: 100px;
}
.dropdown li:hover ul li {
border: 0;
height: 20px;
}
.dropdown li:hover ul li a {
background-color: red;
border: 1px solid transparent;
color: #2A0000;
display: block;
font-size: 15px;
height: 20px;
line-height: 13px;
padding: 0px;
text-decoration: none;
text-indent: 0px;
width: 150px;
padding: 3px;
}
.dropdown li:hover ul li a:hover {
background: white;
color: #000;
height: 13px;
padding: 3px;
}
.dropdown ul {
left: -9999px;
list-style-type: none;
position: absolute;
top: -9999px;
}
</style>
Tabel Zebra
script HTML
<html>
<head>
<title>TABEL ZEBRA</title>
<link href="tab.css" rel="stylesheet" type="text/css">
</head>
<body>
<table align="center">
<th colspan="3" class="header">Tabel Spesifikasi Laptop </th>
<tr class="black" bgcolor="#090000">
<td width="229">Merek</td>
<td width="6">:</td>
<td width="753">Acer</td>
</tr>
<tr class="white">
<td>Seri</td>
<td>:</td>
<td>Aspire E1-471 </td>
</tr>
<tr class="black" bgcolor="#090000">
<td>Kapasitas HDD </td>
<td>:</td>
<td>500 GB </td>
</tr>
<tr class="white">
<td>Prosesor</td>
<td>:</td>
<td>Intel core i3 2.3 GHZ </td>
</tr>
<tr class="black" bgcolor="#090000">
<td>RAM</td>
<td>:</td>
<td>2 GB </td>
</tr>
<tr class="white">
<td>Warna</td>
<td>:</td>
<td>Hitam</td>
</tr>
</table>
</body>
</html>
<head>
<title>TABEL ZEBRA</title>
<link href="tab.css" rel="stylesheet" type="text/css">
</head>
<body>
<table align="center">
<th colspan="3" class="header">Tabel Spesifikasi Laptop </th>
<tr class="black" bgcolor="#090000">
<td width="229">Merek</td>
<td width="6">:</td>
<td width="753">Acer</td>
</tr>
<tr class="white">
<td>Seri</td>
<td>:</td>
<td>Aspire E1-471 </td>
</tr>
<tr class="black" bgcolor="#090000">
<td>Kapasitas HDD </td>
<td>:</td>
<td>500 GB </td>
</tr>
<tr class="white">
<td>Prosesor</td>
<td>:</td>
<td>Intel core i3 2.3 GHZ </td>
</tr>
<tr class="black" bgcolor="#090000">
<td>RAM</td>
<td>:</td>
<td>2 GB </td>
</tr>
<tr class="white">
<td>Warna</td>
<td>:</td>
<td>Hitam</td>
</tr>
</table>
</body>
</html>
scrip CSSnya
Berinama : tab.css
<style type="text/css">
.header {
font-size:larger;
width:1000px;
font-weight:bold;
}
.black {
color: #FFFBF0;
font-size:larger;
font-weight:bold;
}
.black:hover{
color: #0F5;
background: red;
border:solid;
}
.white {
color: red;
font-size:larger;
font-weight:bold;
}
.white:hover{
color:#F00;
background:#00F;
border:solid;
}
</style>
.header {
font-size:larger;
width:1000px;
font-weight:bold;
}
.black {
color: #FFFBF0;
font-size:larger;
font-weight:bold;
}
.black:hover{
color: #0F5;
background: red;
border:solid;
}
.white {
color: red;
font-size:larger;
font-weight:bold;
}
.white:hover{
color:#F00;
background:#00F;
border:solid;
}
</style>
