Network BLOGs: CSS/HTML Drop Down

1. DROP DOWN

<html>
<head>
<title> L200120140 LINDA Drop Down</title>
<style>
.tab{
   width:20%;
   margin: 40 1 1 40;
   background-color:#C9C;
   color:pink;
   font-size:24;
   text-decoration:none;
   border-radius:6px;
   }

a{text-decoration:none;}
td,tr    {
       font-family:Trebuchet MS, Arial, Helvetica, sans-serif;
       color:white;
       }

.dropv   {
       padding: 0;
       margin: 0;
       }

.dropv a
       {
       display: inline;
       width: 170px;
       }

.dropv li
       {
       float:left;
       padding: 0px 8px 2px 0px;
       }

.dropv li ul
       {
       position: absolute;
       background:#C6F;
       padding: 0px 0px 0px 5px;
       width: 170px;
       right: -9999px;
       }

.dropv li:hover ul
       {
       border-radius:6px;
       right: auto;
       }
.dropv li ul a
       {
       border-radius:6px;
       color: white;
       text-decoration: none;
       display: block;
       }
.dropv li ul a:hover
       {
       color: red;
       background:pink;
       }
</style>
</head>
<body>
<h1><center><font color=”purple”>Belajar CSS tentang Drop Down</center></h1>
<br> <center><font color=”red”> Linda Marwati / L200120140 / G</center> </br>
<hr>
<table>
<tr>
   <td>
       <ul>
           <li><a href=”#”>BERANDA</a>
               <ul>
                   <li><a href=”#”>Artikel</a></li>
                   <li><a href=”#”>Menu</a></li>
               </ul>
   </td>
   <td>
       <ul>
           <li><a href=”#”>PROFIL</a>
               <ul>
                       <li><a href=”#”>Linda Marwati</a></li>
                       <li><a href=”#”>L200120140</a></li>
                       <li><a href=”#”>Kelas : G</a></li>
               </ul>
           </li>
       </ul>
   </td>
    <td>
       <ul>
           <li><a href=”#”>FAVORIT</a>
               <ul>
                       <li><a href=”#”>Galeri</a></li>
                       <li><a href=”#”>Puisi</a></li>
                       <li><a href=”#”>Lagu</a></li>
               </ul>
           </li>
       </ul>
   </td>
</tr>
</table>
</body>
</html>

2. TEKS ZEBRA

<html>
<title>L200120140 Zebra</title>
<head>

   .utama
   {
           width:50%;
           margin-top:10px;
           margin-left:10px;
           font-family:Trebuchet MS;
           text-align:center;
           border-radius:3px;
   }

td
   {
   border: 1px solid red ;border-radius:50px ;
   }

th
   {
   text-align:center;
   align:center;
   background-color:red;
   color:white;border-radius:5px;
   }

tr:hover   {color:red;cursor: pointer;}
            transition: all 1s;

</style>

</head>
<body>
<body id=”body”>
</div>
<h1><center><font color=”purple”> Belajar Teks Zebra mengunakan CSS </center> </h1>
<br><center> Linda Marwati / L200120140 / G </center> </br>
<hr>
</body>
<table>
   <tr>
       <th>MAKANAN</th>
       <th>MINUMAN</th>
       <th>SNACK</th>
       </tr>
    <tr>
       <td>Nasi Goreng Seafood</td>
       <td>Es Teh</td>
       <td>Kentang Goreng</td>
   </tr>
    <tr>
       <td>Nasi Goreng Biasa</td>
       <td>Es Jeruk</td>
       <td>Nugget</td>
   </tr>
   <tr>
        <td>Mie Goreeng</td>
       <td>Cofee</td>
       <td>Sosis</td>
   </tr>
</table>
</html>

Network BLOGs

Cari

Rabu, 18 Desember 2013

CSS/HTML Drop Down

Tidak ada komentar:

Posting Komentar