Social Icons

Rabu, 18 Desember 2013

CSS Table

Karena baru belajar dan belum menguasai secara  100%, maka sederhana saja

Berikut script HTML

<textarea>
<html>
<head>
<title>Data Pribadi Mahasiswa</title>
<link href="css2.css" rel="stylesheet" type="text/css">
</head>
<body>
<table align="center">
<th colspan="3" class="header">Tabel Data Pribadi Mahasiswa</th>
<tr class="Green" bgcolor="Green">
    <td width="352">Nama</td>
    <td width="12">:</td>
    <td width="600">Wahyu Eko</td>
    </tr>
<tr class="Red">
    <td>NIM</td>
    <td>:</td>
    <td>L200120115</td>
    </tr>
<tr class="Red" bgcolor="Red">
    <td>Alamat</td>
    <td>:</td>
    <td>Jl. Kuburan No. 13</td>
    </tr>
<tr class="white">
    <td>TTL</td>
    <td>:</td>
    <td>Simpang kanan, 12 Desember 1970</td>
    </tr>
<tr class="Yellow" bgcolor="Yellow">
    <td>Universitas</td>
    <td>:</td>
    <td>UNS</td>
    </tr>
<tr class="white">
    <td>Jurusan</td>
    <td>:</td>
    <td>MIPA</td>
    </tr>
</table>
</body>
</html>
</textarea>


Berikut script CSS

<textarea>
@charset "utf-8";
<style type="text/css">
#body{
background-color:Red}
.data
{
width:40%;
margin-top:20px;
margin-left:100px;
border:1px solid Black;
font-family: Georgia, "Times New Roman", Times, serif, Helvetica;
text-align:center;

}
td{
border: 1px solid;

}

th
{
text-align:center;
align:center;
background-color:black;
color:white;
}
.data1
{
text-align:center;
background-color:#ccc;
}

tr:hover   {
color:Black;
background:#00F;
cursor: crosshair;
}
transition: all 1s;
</style>
</textarea>

Atau download disini
readmore...

CSS Mouse Hover

Karena baru belajar dan belum menguasai secara  100%, maka sederhana saja

Berikut script Html
<textarea>
<html>
<head>
<title>GUDANG ANIME</title>
<link href="css1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul class="dropmenu">
<li><a href="#Genre.html">Genre</a>
    <ul>
    <li><a href="#Fantasy.html">Fantasy</a></li>
    <li><a href="#Romance.html">Romance</a></li>
 <li><a href="#Sci-Fi.html">Sci-Fi</a></li>
    </ul>
</li>
<li><a href="#Tutorial.html">Tutorial</a>
    <ul>
    <li><a href="#Download.html">Cara download</a></li>
    <li><a href="#Putar.html">Cara memutar</a></li>
    <li><a href="#Subtittle.html">Edit subtittle</a></li>
    </ul>
</li>
<li><a href="#Donasi.html">Donasi</a>
    <ul>
    <li><a href="#Paypal.html">Paypal</a></li>
    <li><a href="#Mandiri.html">Mandiri</a></li>
    <li><a href="#BCA.html">BCA</a></li>
    </ul>
</li>
</ul>
</body>
</html>
</textarea>


Kemudian berikut script CSS

<textarea>
/* dropmenu */
.dropmenu {
    background: #000;
    height: 50px;
    list-style-type: none;
    margin: 0;
    padding: 0px;
}
.dropmenu li {
    border-right: solid 2px black;
    float: left;
    height: 50px;
}
.dropmenu li a {
    color: #F00;
    display: block;
    font: 12px  Georgia, "Times New Roman", Times, serif, verdana, sans-serif;
    font-weight: bold;
    padding: 20px 70px;
    text-decoration: underline;
}
.dropmenu li:hover { background: #6F0; position: relative; }
.dropmenu li:hover a { text-decoration: none; }
.dropmenu li:hover ul {
    background-color: #333;
    border: 1px solid #6FC;
    left: 0px;
    padding: 3px;
    top: 30px;
    width: 160px;
}
.dropmenu li:hover ul li { border: 1; height: 18px; }
.dropmenu li:hover ul li a {
    background-color: #9CF;
    border: 1px solid transparent;
    color: #3C0;
    display: block;
    font-size: 14px;
    height: 20px;
    line-height: 18px;
    padding: 0px;
    text-decoration: none;
    text-indent: 5px;
    width: 150px;
    padding: 3px;
}
.dropmenu li:hover ul li a:hover {
    background: #666;
    border: solid 1px #666;
    color: #666;
    height: 18px;
    padding: 3px;
}
.dropmenu ul {
    left: -9999px;
    list-style-type: none;
    position: absolute;
    top: -9999px;
}
</style>
</textarea> 


Atau donwload disini 
readmore...
Langganan: Postingan (Atom)