Diberdayakan oleh Blogger.

Labels

Followers

Labels

Demo image Demo image Demo image Demo image Demo image >

Recent Post

Rabu, 18 Desember 2013

Tugas CSS 2

08.14    1 comment
Menu Dropdown
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>


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>




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>


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>

1 komentar: