<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
</script>
<style>
.kotakkecil1{
width: 50px;
height: 50px;
float: left;
font-weight: 900;
font-size: 24px;
border: 1px solid blue;
margin-left: 0px;
margin-bottom: 3px;
margin-top: 3px;
text-align: center;
vertical-align: middle;
line-height: 50px;
background-color: #900;
color: #FF0;
cursor: pointer;
}
.kotakkecil1:hover {
background-color: #006;
color: #FFF;
cursor: pointer;
}
.kotakkecil2{
width: 50px;
height: 50px;
float: left;
font-weight: 900;
font-size: 24px;
border: 1px solid blue;
margin-left: 3px;
margin-bottom: 3px;
margin-top: 3px;
text-align: center;
vertical-align: middle;
line-height: 50px;
background-color: #900;
color: #FF0;
cursor: pointer;
}
.kotakkecil2:hover {
background-color: #006;
color: #FFF;
cursor: pointer;
}
.kotakkecil3, .kotakkosong {
width: 50px;
height: 50px;
float: left;
font-weight: 900;
font-size: 24px;
border: 1px solid blue;
margin-left: 3px;
margin-bottom: 3px;
margin-top: 3px;
text-align: center;
vertical-align: middle;
line-height: 50px;
background-color: #900;
color: #FF0;
cursor: pointer;
}
.kotakkecil3:hover {
background-color: #006;
color: #FFF;
cursor: pointer;
}
.kotakkecil4{
width: 50px;
height: 50px;
float: left;
font-weight: 900;
font-size: 24px;
border: 1px solid blue;
margin-left: 3px;
margin-bottom: 3px;
margin-top: 3px;
text-align: center;
vertical-align: middle;
line-height: 50px;
background-color: #900;
color: #FF0;
cursor: pointer;
}
.kotakkecil4:hover {
background-color: #006;
color: #FFF;
cursor: pointer;
}
.kotakkecil5{
width: 50px;
height: 50px;
float: left;
font-weight: 900;
font-size: 24px;
border: 1px solid blue;
margin-left: 0px;
margin-bottom: 3px;
margin-top: 3px;
text-align: center;
vertical-align: middle;
line-height: 50px;
background-color: #900;
color: #FF0;
cursor: pointer;
}
.kotakkecil5:hover {
background-color: #006;
color: #FFF;
cursor: pointer;
}
.kotakkecil6{
width: 50px;
height: 50px;
float: left;
font-weight: 900;
font-size: 24px;
border: 1px solid blue;
margin-left: 3px;
margin-bottom: 3px;
margin-top: 3px;
text-align: center;
vertical-align: middle;
line-height: 50px;
background-color: #900;
color: #FF0;
cursor: pointer;
}
.kotakkecil6:hover {
background-color: #006;
color: #FFF;
cursor: pointer;
}
.kotakkecil7 {
width: 50px;
height: 50px;
float: left;
font-weight: 900;
font-size: 24px;
border: 1px solid blue;
margin-left: 3px;
margin-bottom: 3px;
margin-top: 3px;
text-align: center;
vertical-align: middle;
line-height: 50px;
background-color: #900;
color: #FF0;
cursor: pointer;
}
.kotakkecil7:hover {
background-color: #006;
color: #FFF;
cursor: pointer;
}
.kotakkecil8{
width: 50px;
height: 50px;
float: left;
font-weight: 900;
font-size: 24px;
border: 1px solid blue;
margin-left: 3px;
margin-bottom: 3px;
margin-top: 3px;
text-align: center;
vertical-align: middle;
line-height: 50px;
background-color: #900;
color: #FF0;
cursor: pointer;
}
.kotakkecil8:hover {
background-color: #006;
color: #FFF;
cursor: pointer;
}
.kotakkecil9{
width: 50px;
height: 50px;
float: left;
font-weight: 900;
font-size: 24px;
border: 1px solid blue;
margin-left: 0px;
margin-bottom: 3px;
margin-top: 3px;
text-align: center;
vertical-align: middle;
line-height: 50px;
background-color: #900;
cursor: pointer;
color: #FF0;
}
.kotakkecil9:hover {
background-color: #006;
color: #FFF;
cursor: pointer;
}
.kotakkeci1{
width: 50px;
height: 50px;
float: left;
font-weight: 900;
font-size: 24px;
border: 1px solid blue;
margin-left: 3px;
margin-bottom: 3px;
margin-top: 3px;
text-align: center;
vertical-align: middle;
line-height: 50px;
background-color: #900;
cursor: pointer;
color: #FF0;
}
.kotakkeci1:hover {
background-color: #006;
color: #FFF;
cursor: pointer;
}
.kotakkeci2, .kotakkosong {
width: 50px;
height: 50px;
float: left;
font-weight: 900;
font-size: 24px;
border: 1px solid blue;
margin-left: 3px;
margin-bottom: 3px;
margin-top: 3px;
text-align: center;
vertical-align: middle;
line-height: 50px;
background-color: #900;
cursor: pointer;
color: #FF0;
}
.kotakkeci1:hover {
background-color: #006;
color: #FFF;
cursor: pointer;
}
.kotakkeci3, .kotakkosong {
width: 50px;
height: 50px;
float: left;
font-weight: 900;
font-size: 24px;
border: 1px solid blue;
margin-left: 3px;
margin-bottom: 3px;
margin-top: 3px;
text-align: center;
vertical-align: middle;
line-height: 50px;
background-color: #900;
cursor: pointer;
}
.kotakkeci4, .kotakkosong {
width: 50px;
height: 50px;
float: left;
font-weight: 900;
font-size: 24px;
border: 1px solid blue;
margin-left: 0px;
margin-bottom: 3px;
margin-top: 3px;
text-align: center;
vertical-align: middle;
line-height: 50px;
background-color: #900;
cursor: pointer;
}
.kotakkeci5, .kotakkosong {
width: 50px;
height: 50px;
float: left;
font-weight: 900;
font-size: 24px;
border: 1px solid blue;
margin-left: 3px;
margin-bottom: 3px;
margin-top: 3px;
text-align: center;
vertical-align: middle;
line-height: 50px;
background-color: #900;
cursor: pointer;
}
.kotakkeci6{
width: 50px;
height: 50px;
float: left;
font-weight: 900;
font-size: 24px;
border: 1px solid blue;
margin-left: 3px;
margin-bottom: 3px;
margin-top: 3px;
text-align: center;
vertical-align: middle;
line-height: 50px;
background-color: #900;
color: #FF0;
cursor: pointer;
}
.kotakkeci6:hover {
background-color: #006;
color: #FFF;
cursor: pointer;
}
.kotakkeci7{
width: 50px;
height: 50px;
float: left;
font-weight: 900;
font-size: 24px;
border: 1px solid blue;
margin-left: 3px;
margin-bottom: 3px;
margin-top: 3px;
text-align: center;
vertical-align: middle;
line-height: 50px;
background-color: #900;
cursor: pointer;
color: #FF0;
}
.kotakkeci7:hover {
background-color: #006;
color: #FFF;
cursor: pointer;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Kalkulator Sederhana</title>
</head>
<body>
<div style="width: 212px;
height: 60px;
border: 3px solid #00C;
cursor: pointer;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;">
</div>
<div class="kotakkecil1"onclick="tampilkan(1)">1</div>
<div class="kotakkecil2">2</div>
<div class="kotakkecil3">3</div>
<div class="kotakkecil4">+</div>
<br style="clear:both;"/>
<div class="kotakkecil5">4</div>
<div class="kotakkecil6">5</div>
<div class="kotakkecil7">6</div>
<div class="kotakkecil8">-</div>
<br style="clear:both;"/>
<div class="kotakkecil9">7</div>
<div class="kotakkeci1">8</div>
<div class="kotakkeci2">9</div>
<div class="kotakkeci3">*</div>
<br style="clear:both;"/>
<div class="kotakkeci4">C</div>
<div class="kotakkeci5">0</div>
<div class="kotakkeci6">=</div>
<div class="kotakkeci7">/</div>
</body>
</html>
semoga bermanfaat ya,,!!!!
Tidak ada komentar:
Posting Komentar