Script html :
<
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<link rel="stylesheet" href="dd.css" type="text/css"/>
<p><center><table id="table-a" height="50%">
<thead>
<tr><th>No</th><th>Nama</th> <th>NIM</th></tr>
</thead>
<tbody>
<tr><td>1.</td><td>Arif Setya N</td><td>L200130177</td></tr>
<tr><td>2.</td><td>-</td><td>-</td></tr>
<tr><td>3.</td><td>-</td><td>-</td></tr>
</tbody>
</table>
<body>
</body>
</html>
script css :
#table-a{ font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
width: 500px;
text-align: center;
border-collapse: collapse;}
#table-a th{ font-size: 13px;
font-weight: normal;
padding: 8px;
background: #FF3E29;
border-top: 4px solid #0099FF;
border-bottom: 1px solid #00CCFF;
color: #FF3E29;}
#table-a td{ padding: 8px;
background: #33CCFF;
border-bottom: 1px solid #0099FF;
color: #FF3E29;
border-top: 1px solid transparent;}
#table-a tr:hover td{ background: #FF0000;
color:#FF3E29;}
Minggu, 22 Desember 2013
Dropdown menu
html dan css internalnya :
<html>
<head>
<style type="text/css">
.dropmenu {
text-align:center;
border-radius: 20px;
background: #000000;
height: 30px;
width:498px;
list-style-type: none;
margin: inherit;
padding: 0px;
}
.dropmenu li {
border-right: thick;
float: left;
height: 30px;
width: 166px;
}
.dropmenu li a {
color: #333333;
display: block;
font: 12px arial, verdana, sans-serif;
font-weight: bold;
padding: 9px 20px;
text-decoration: none;
}
.dropmenu li:hover {
position: relative;
text-align:center;
}
.dropmenu li:hover a {
text-decoration: blink;
color: #00FF00;
}
.dropmenu li:hover ul {
left: 0px;
padding: 0px;
top: 30px;
width: 10px;
height: 30px;
}
.dropmenu li:hover ul li {
border: none;
height: 18px;
color: #0099FF;
}
.dropmenu li:hover ul li a {
background-color: #E6E6FAs;
border: 1px solid transparent;
border-radius:20px;
color: #009900;
display: block;
font-size: 11px;
height: 20px;
line-height: 18px;
padding: 0px;
text-decoration: none;
text-indent: 5px;
width: 158px;
padding: 3px;
}
.dropmenu li:hover ul li a:hover {
background: #333333;
border: solid 1px #00FF00;
color: #00FF00;
height: 18px;
padding: 3px;
}
.dropmenu ul {
left: -9999px;
list-style-type: none;
position: absolute;
top: -9999px;
}
</style>
</head>
<body>
<ul class="dropmenu">
<li><a href="#1">Menu 1</a>
<ul>
<li><a href="#a">Sub Menu 1</a></li>
<li><a href="#b">Sub Menu 2</a></li>
</ul>
</li>
<li><a href="#2">Menu 2</a>
<ul>
<li><a href="#c">Sub Menu 1</a></li>
<li><a href="#d">Sub Menu 2</a></li>
</ul>
</li>
<li><a href="#3">Menu 3</a>
<ul>
<li><a href="#e">Sub Menu 1</a></li>
<li><a href="#f">Sub Menu 2</a></li>
</ul>
</li>
</ul>
</body>
</html>
<html>
<head>
<style type="text/css">
.dropmenu {
text-align:center;
border-radius: 20px;
background: #000000;
height: 30px;
width:498px;
list-style-type: none;
margin: inherit;
padding: 0px;
}
.dropmenu li {
border-right: thick;
float: left;
height: 30px;
width: 166px;
}
.dropmenu li a {
color: #333333;
display: block;
font: 12px arial, verdana, sans-serif;
font-weight: bold;
padding: 9px 20px;
text-decoration: none;
}
.dropmenu li:hover {
position: relative;
text-align:center;
}
.dropmenu li:hover a {
text-decoration: blink;
color: #00FF00;
}
.dropmenu li:hover ul {
left: 0px;
padding: 0px;
top: 30px;
width: 10px;
height: 30px;
}
.dropmenu li:hover ul li {
border: none;
height: 18px;
color: #0099FF;
}
.dropmenu li:hover ul li a {
background-color: #333333;
border: 1px solid transparent;
border-radius:20px;
color: #009900;
display: block;
font-size: 11px;
height: 20px;
line-height: 18px;
padding: 0px;
text-decoration: none;
text-indent: 5px;
width: 158px;
padding: 3px;
}
.dropmenu li:hover ul li a:hover {
background: #333333;
border: solid 1px #00FF00;
color: #00FF00;
height: 18px;
padding: 3px;
}
.dropmenu ul {
left: -9999px;
list-style-type: none;
position: absolute;
top: -9999px;
}
</style>
</head>
<body>
<ul class="dropmenu">
<li><a href="#1">Menu 1</a>
<ul>
<li><a href="#a">Sub Menu 1</a></li>
<li><a href="#b">Sub Menu 2</a></li>
</ul>
</li>
<li><a href="#2">Menu 2</a>
<ul>
<li><a href="#c">Sub Menu 1</a></li>
<li><a href="#d">Sub Menu 2</a></li>
</ul>
</li>
<li><a href="#3">Menu 3</a>
<ul>
<li><a href="#e">Sub Menu 1</a></li>
<li><a href="#f">Sub Menu 2</a></li>
</ul>
</li>
</ul>
</body>
</html>
<html>
<head>
<style type="text/css">
.dropmenu {
text-align:center;
border-radius: 20px;
background: #000000;
height: 30px;
width:498px;
list-style-type: none;
margin: inherit;
padding: 0px;
}
.dropmenu li {
border-right: thick;
float: left;
height: 30px;
width: 166px;
}
.dropmenu li a {
color: #333333;
display: block;
font: 12px arial, verdana, sans-serif;
font-weight: bold;
padding: 9px 20px;
text-decoration: none;
}
.dropmenu li:hover {
position: relative;
text-align:center;
}
.dropmenu li:hover a {
text-decoration: blink;
color: #00FF00;
}
.dropmenu li:hover ul {
left: 0px;
padding: 0px;
top: 30px;
width: 10px;
height: 30px;
}
.dropmenu li:hover ul li {
border: none;
height: 18px;
color: #0099FF;
}
.dropmenu li:hover ul li a {
background-color: #333333;
border: 1px solid transparent;
border-radius:20px;
color: #009900;
display: block;
font-size: 11px;
height: 20px;
line-height: 18px;
padding: 0px;
text-decoration: none;
text-indent: 5px;
width: 158px;
padding: 3px;
}
.dropmenu li:hover ul li a:hover {
background: #333333;
border: solid 1px #00FF00;
color: #00FF00;
height: 18px;
padding: 3px;
}
.dropmenu ul {
left: -9999px;
list-style-type: none;
position: absolute;
top: -9999px;
}
</style>
</head>
<body>
<ul class="dropmenu">
<li><a href="#1">Menu 1</a>
<ul>
<li><a href="#a">Sub Menu 1</a></li>
<li><a href="#b">Sub Menu 2</a></li>
</ul>
</li>
<li><a href="#2">Menu 2</a>
<ul>
<li><a href="#c">Sub Menu 1</a></li>
<li><a href="#d">Sub Menu 2</a></li>
</ul>
</li>
<li><a href="#3">Menu 3</a>
<ul>
<li><a href="#e">Sub Menu 1</a></li>
<li><a href="#f">Sub Menu 2</a></li>
</ul>
</li>
</ul>
</body>
</html>
<html>
<head>
<style type="text/css">
.dropmenu {
text-align:center;
border-radius: 20px;
background: #000000;
height: 30px;
width:498px;
list-style-type: none;
margin: inherit;
padding: 0px;
}
.dropmenu li {
border-right: thick;
float: left;
height: 30px;
width: 166px;
}
.dropmenu li a {
color: #333333;
display: block;
font: 12px arial, verdana, sans-serif;
font-weight: bold;
padding: 9px 20px;
text-decoration: none;
}
.dropmenu li:hover {
position: relative;
text-align:center;
}
.dropmenu li:hover a {
text-decoration: blink;
color: #00FF00;
}
.dropmenu li:hover ul {
left: 0px;
padding: 0px;
top: 30px;
width: 10px;
height: 30px;
}
.dropmenu li:hover ul li {
border: none;
height: 18px;
color: #0099FF;
}
.dropmenu li:hover ul li a {
background-color: #E6E6FAs;
border: 1px solid transparent;
border-radius:20px;
color: #009900;
display: block;
font-size: 11px;
height: 20px;
line-height: 18px;
padding: 0px;
text-decoration: none;
text-indent: 5px;
width: 158px;
padding: 3px;
}
.dropmenu li:hover ul li a:hover {
background: #333333;
border: solid 1px #00FF00;
color: #00FF00;
height: 18px;
padding: 3px;
}
.dropmenu ul {
left: -9999px;
list-style-type: none;
position: absolute;
top: -9999px;
}
</style>
</head>
<body>
<ul class="dropmenu">
<li><a href="#1">Menu 1</a>
<ul>
<li><a href="#a">Sub Menu 1</a></li>
<li><a href="#b">Sub Menu 2</a></li>
</ul>
</li>
<li><a href="#2">Menu 2</a>
<ul>
<li><a href="#c">Sub Menu 1</a></li>
<li><a href="#d">Sub Menu 2</a></li>
</ul>
</li>
<li><a href="#3">Menu 3</a>
<ul>
<li><a href="#e">Sub Menu 1</a></li>
<li><a href="#f">Sub Menu 2</a></li>
</ul>
</li>
</ul>
</body>
</html>
<html>
<head>
<style type="text/css">
.dropmenu {
text-align:center;
border-radius: 20px;
background: #000000;
height: 30px;
width:498px;
list-style-type: none;
margin: inherit;
padding: 0px;
}
.dropmenu li {
border-right: thick;
float: left;
height: 30px;
width: 166px;
}
.dropmenu li a {
color: #333333;
display: block;
font: 12px arial, verdana, sans-serif;
font-weight: bold;
padding: 9px 20px;
text-decoration: none;
}
.dropmenu li:hover {
position: relative;
text-align:center;
}
.dropmenu li:hover a {
text-decoration: blink;
color: #00FF00;
}
.dropmenu li:hover ul {
left: 0px;
padding: 0px;
top: 30px;
width: 10px;
height: 30px;
}
.dropmenu li:hover ul li {
border: none;
height: 18px;
color: #0099FF;
}
.dropmenu li:hover ul li a {
background-color: #333333;
border: 1px solid transparent;
border-radius:20px;
color: #009900;
display: block;
font-size: 11px;
height: 20px;
line-height: 18px;
padding: 0px;
text-decoration: none;
text-indent: 5px;
width: 158px;
padding: 3px;
}
.dropmenu li:hover ul li a:hover {
background: #333333;
border: solid 1px #00FF00;
color: #00FF00;
height: 18px;
padding: 3px;
}
.dropmenu ul {
left: -9999px;
list-style-type: none;
position: absolute;
top: -9999px;
}
</style>
</head>
<body>
<ul class="dropmenu">
<li><a href="#1">Menu 1</a>
<ul>
<li><a href="#a">Sub Menu 1</a></li>
<li><a href="#b">Sub Menu 2</a></li>
</ul>
</li>
<li><a href="#2">Menu 2</a>
<ul>
<li><a href="#c">Sub Menu 1</a></li>
<li><a href="#d">Sub Menu 2</a></li>
</ul>
</li>
<li><a href="#3">Menu 3</a>
<ul>
<li><a href="#e">Sub Menu 1</a></li>
<li><a href="#f">Sub Menu 2</a></li>
</ul>
</li>
</ul>
</body>
</html>
<html>
<head>
<style type="text/css">
.dropmenu {
text-align:center;
border-radius: 20px;
background: #000000;
height: 30px;
width:498px;
list-style-type: none;
margin: inherit;
padding: 0px;
}
.dropmenu li {
border-right: thick;
float: left;
height: 30px;
width: 166px;
}
.dropmenu li a {
color: #333333;
display: block;
font: 12px arial, verdana, sans-serif;
font-weight: bold;
padding: 9px 20px;
text-decoration: none;
}
.dropmenu li:hover {
position: relative;
text-align:center;
}
.dropmenu li:hover a {
text-decoration: blink;
color: #00FF00;
}
.dropmenu li:hover ul {
left: 0px;
padding: 0px;
top: 30px;
width: 10px;
height: 30px;
}
.dropmenu li:hover ul li {
border: none;
height: 18px;
color: #0099FF;
}
.dropmenu li:hover ul li a {
background-color: #333333;
border: 1px solid transparent;
border-radius:20px;
color: #009900;
display: block;
font-size: 11px;
height: 20px;
line-height: 18px;
padding: 0px;
text-decoration: none;
text-indent: 5px;
width: 158px;
padding: 3px;
}
.dropmenu li:hover ul li a:hover {
background: #333333;
border: solid 1px #00FF00;
color: #00FF00;
height: 18px;
padding: 3px;
}
.dropmenu ul {
left: -9999px;
list-style-type: none;
position: absolute;
top: -9999px;
}
</style>
</head>
<body>
<ul class="dropmenu">
<li><a href="#1">Menu 1</a>
<ul>
<li><a href="#a">Sub Menu 1</a></li>
<li><a href="#b">Sub Menu 2</a></li>
</ul>
</li>
<li><a href="#2">Menu 2</a>
<ul>
<li><a href="#c">Sub Menu 1</a></li>
<li><a href="#d">Sub Menu 2</a></li>
</ul>
</li>
<li><a href="#3">Menu 3</a>
<ul>
<li><a href="#e">Sub Menu 1</a></li>
<li><a href="#f">Sub Menu 2</a></li>
</ul>
</li>
</ul>
</body>
</html>
Langganan:
Postingan (Atom)