my TASKS: TUGAS CSS-2 (Dropdown Menu & Table Zebra)

Berikut contoh script html dan css dalam membuat dropdown menu

<html>

<head>

<tittle> PRODUCT "DIFA" <tittle>

rel="stylesheet"type="text/css">

<ul>

<li class='has-sub'><a href='#'><span>Products</span></a>

<ul>

<li class='has-sub'><a href='#'><span>Product 1</span></a>

<ul>

</ul>

</li>

<li class='has-sub'><a href='#'><span>Product 2</span></a>

<ul>

</ul>

</li>

</ul>

</li>

<li><a href='#'><span>About</span></a></li>

<li class='last'><a href='#'><span>Contact</span></a></li>

</ul>

</div>

</html>

Css nya

#cssmenu ul,

#cssmenu li,

#cssmenu span,

#cssmenu a {

margin: 0;

padding: 0;

position: relative;

}

#cssmenu {

height: 49px;

border-radius: 5px 5px 0 0;

-moz-border-radius: 5px 5px 0 0;

-webkit-border-radius: 5px 5px 0 0;

background: #fefefe;

background: -moz-linear-gradient(top, #fefefe 0%, #eee9f0 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fefefe), color-stop(100%, #eee9f0));

background: -webkit-linear-gradient(top, #fefefe 0%, #eee9f0 100%);

background: -o-linear-gradient(top, #fefefe 0%, #eee9f0 100%);

background: -ms-linear-gradient(top, #fefefe 0%, #eee9f0 100%);

background: linear-gradient(top, #fefefe 0%, #eee9f0 100%);

border-bottom: 2px solid #db000b;

width: auto;

}

#cssmenu:after,

#cssmenu ul:after {

content: '';

display: block;

clear: both;

}

#cssmenu a {

background: #fefefe;

background: -moz-linear-gradient(top, #fefefe 0%, #ececec 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fefefe), color-stop(100%, #ececec));

background: -webkit-linear-gradient(top, #fefefe 0%, #ececec 100%);

background: -o-linear-gradient(top, #fefefe 0%, #ececec 100%);

background: -ms-linear-gradient(top, #fefefe 0%, #ececec 100%);

background: linear-gradient(top, #fefefe 0%, #ececec 100%);

color: #000;

display: inline-block;

font-family: Helvetica, Arial, Verdana, sans-serif;

font-size: 12px;

line-height: 49px;

padding: 0 20px;

text-decoration: none;

}

#cssmenu ul {

list-style: none;

}

#cssmenu > ul {

float: left;

}

#cssmenu > ul > li {

float: left;

}

#cssmenu > ul > li > a {

color: #000;

font-size: 12px;

}

#cssmenu > ul > li:hover:after {

content: '';

display: block;

width: 0;

height: 0;

position: absolute;

left: 50%;

bottom: 0;

border-left: 10px solid transparent;

border-right: 10px solid transparent;

border-bottom: 10px solid #db000b;

margin-left: -10px;

}

#cssmenu > ul > li:first-child > a {

border-radius: 5px 0 0 0;

-moz-border-radius: 5px 0 0 0;

-webkit-border-radius: 5px 0 0 0;

}

#cssmenu > ul > li.active:after {

content: '';

display: block;

width: 0;

height: 0;

position: absolute;

left: 50%;

bottom: 0;

border-left: 10px solid transparent;

border-right: 10px solid transparent;

border-bottom: 10px solid #db000b;

margin-left: -10px;

}

#cssmenu > ul > li.active > a {

-moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);

-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);

box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);

background: #ececec;

background: -moz-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ececec), color-stop(100%, #ffeeff ef));

background: -webkit-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);

background: -o-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);

background: -ms-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);

background: linear-gradient(top, #ececec 0%, #ffeeff ef 100%);

}

#cssmenu > ul > li:hover > a {

background: #ececec;

background: -moz-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ececec), color-stop(100%, #ffeeff ef));

background: -webkit-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);

background: -o-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);

background: -ms-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);

background: linear-gradient(top, #ececec 0%, #ffeeff ef 100%);

-moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);

-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);

box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);

}

#cssmenu .has-sub {

z-index: 1;

}

#cssmenu .has-sub:hover > ul {

display: block;

}

#cssmenu .has-sub ul {

display: none;

position: absolute;

width: 200px;

top: 100%;

left: 0;

}

#cssmenu .has-sub ul li {

*margin-bottom: -1px;

}

#cssmenu .has-sub ul li a {

background: #db000b;

border-bottom: 1px dotted #ff0f1b;

filter: none;

font-size: 11px;

display: block;

line-height: 120%;

padding: 10px;

color: #ffffff;

}

#cssmenu .has-sub ul li:hover a {

background: #a80008;

}

#cssmenu .has-sub .has-sub:hover > ul {

display: block;

}

#cssmenu .has-sub .has-sub ul {

display: none;

position: absolute;

left: 100%;

top: 0;

}

#cssmenu .has-sub .has-sub ul li a {

background: #a80008;

border-bottom: 1px dotted #ff0f1b;

}

#cssmenu .has-sub .has-sub ul li a:hover {

background: #8f0007;

}

Dan ini adalah script membuat TABLE ZEBRA

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Table Zebra</title>
<style>
    body{
        font:14px 'Segoe UI'
    }
    table#zeb{
        border:#CCCCCC 1px solid;
        }
    table#zeb th{
        height:30px;
        vertical-align:middle;
    }
    table#zeb td, th{
        border-bottom:#CCCCCC 1px solid;
        padding:5px;
    }
    table#zeb td{
        text-align:center;
    }
    table#zeb tbody tr:nth-child(even) {
        background-color: #999;
    }
    table#zeb tbody tr:hover{
        background-color:#555;
        cursor:pointer;
        color: #FFFFFF;
    }
</style>
</head>

<body>
<table id="zeb" width="600" border="0" cellspacing="0" cellpadding="0">
<thead>
    <th>No</th>
    <th>NAMA</th>
    <th>JURUSAN</th>
</thead>
<tbody>
<tr>
    <td>1</td>
    <td>Difa </td>
    <td>Informatika</td>
</tr>
<tr>
    <td>2</td>
    <td>Fida </td>
    <td>Komunikasi</td>
</tr>
<tr>
    <td>3</td>
    <td>Ifda</td>
    <td>Informatika</td>
</tr>
<tr>
    <td>4</td>
    <td>Dafi </td>
    <td>Komunikasi </td>
</tr>
<tr>
    <td>5</td>
    <td>Afid </td>
    <td>Informatika </td>
</tr>
<tr>
    <td>6 </td>
    <td>Fadi </td>
    <td>Komunikasi </td>

</tr>
</tbody>
</table>

</body>
</html>

my TASKS

Minggu, 22 Desember 2013

TUGAS CSS-2 (Dropdown Menu & Table Zebra)

Tidak ada komentar:

Posting Komentar