CSS做的计算器
来源：互联网 发布：微信mac端登陆不了 编辑：程序博客网 时间：2024/05/14 12:59
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>站长中心-CSS的计算器</title>
<style type="text/css">
ul.add, .box2, .box3 {
padding:0;
list-style:none;
width:200px;
height:200px;
overflow:hidden;
border:1px solid #000;
float:left;
margin:10px;
position:relative;
display:inline;
}
.box3{margin-right:0}
ul.add li {
width:200px;
height:200px;
position:relative;
float:left;
}
ul.add li a, ul.add3 li {
text-decoration:none;
display:block;
width:200px;
height:200px;
text-align:center;
line-height:200px;
font-size:84px;
position:relative;
z-index:1;
color:red;
background:#fcf;
}
ul.add li a:active, ul.add li a:focus {
background:#fcc
}
ul.add li i a, ul.add li b a {
position:absolute;
right:3px;
border-left:10px dashed transparent;
outline:0;
z-index:99;
width:auto;
height:auto;
text-align:right;
line-height:normal;
font-size:84px;
background:transparent!important;
}
ul.add li i a {
top:5px;
border-bottom:10px solid red;
border-right:10px dashed transparent;
font-style:normal;
}
ul.add li b a {
bottom:5px;
border-right:10px dashed transparent;
border-top:10px solid red;
}
ul.add li a:hover {
border-top-color:blue!important
}
ul.add2, ul.add3 {
border:none;
margin:0!important;
}
.sum {
width:790px;
margin:auto;
background:#fff;
overflow:hidden;
border:5px solid #000;
}
p.plus, p.equals {
float:left;
margin:10px;
width:40px;
height:200px;
text-align:center;
line-height:200px;
font-size:84px;
color:red;
}
body {
background:#333;
color:#fff;
}
h1, h2, p.intro {
text-align:center;
font-size:16px;
margin:0 auto .8em;
width:750px;
}
h1 {
font-size:24px;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
ul.add, .box2, .box3 {
margin:10px 10px 0;
}
.sum {padding:0 0 10px;}
ul.add li i a {top:-20px;}
ul.add li b a {bottom:-45px}
* html .sum{width:800px}
</style>
<![endif]-->
</head>
<body>
<h1>CSS Calculator</h1>
<p class="intro">
开始从左至右，使用向上和向下箭头，显示一个数字，从0 - 9。
一旦你选择了你的电话号码，然后按一下数字本身和广场将变为橙色
移动到中间的框中，并再次使用箭头选择数量添加和一次点击的数量本身选择
的结果将显示在右侧的框
序列只能由左到右，你必须依次单击每个方块
。</p>
<p class="intro">The sequence only works from left to right and you must click each box in turn<br />
（在Opera或IE6不工作）.</p>
<div class="sum">
<ul class="add">
<li id="a1"><a href="#b1">0</a> <b><a href="#a2"></a></b></li>
<li id="a2"><a href="#c1">1</a> <i><a href="#a1"></a></i><b><a href="#a3"></a></b></li>
<li id="a3"><a href="#d1">2</a> <i><a href="#a2"></a></i><b><a href="#a4"></a></b></li>
<li id="a4"><a href="#e1">3</a> <i><a href="#a3"></a></i><b><a href="#a5"></a></b></li>
<li id="a5"><a href="#f1">4</a> <i><a href="#a4"></a></i><b><a href="#a6"></a></b></li>
<li id="a6"><a href="#g1">5</a> <i><a href="#a5"></a></i><b><a href="#a7"></a></b></li>
<li id="a7"><a href="#h1">6</a> <i><a href="#a6"></a></i><b><a href="#a8"></a></b></li>
<li id="a8"><a href="#i1">7</a> <i><a href="#a7"></a></i><b><a href="#a9"></a></b></li>
<li id="a9"><a href="#j1">8</a> <i><a href="#a8"></a></i><b><a href="#a10"></a></b></li>
<li id="a10"><a href="#k1">9</a><i><a href="#a9"></a></i></li>
</ul>
<p class="plus">+</p>
<div class="box2">
<ul class="add add2">
<li id="b0"> </li>
<li id="b1"><a href="#z1">0</a> <b><a href="#b2"></a></b></li>
<li id="b2"><a href="#z2">1</a> <i><a href="#b1"></a></i><b><a href="#b3"></a></b></li>
<li id="b3"><a href="#z3">2</a> <i><a href="#b2"></a></i><b><a href="#b4"></a></b></li>
<li id="b4"><a href="#z4">3</a> <i><a href="#b3"></a></i><b><a href="#b5"></a></b></li>
<li id="b5"><a href="#z5">4</a> <i><a href="#b4"></a></i><b><a href="#b6"></a></b></li>
<li id="b6"><a href="#z6">5</a> <i><a href="#b5"></a></i><b><a href="#b7"></a></b></li>
<li id="b7"><a href="#z7">6</a> <i><a href="#b6"></a></i><b><a href="#b8"></a></b></li>
<li id="b8"><a href="#z8">7</a> <i><a href="#b7"></a></i><b><a href="#b9"></a></b></li>
<li id="b9"><a href="#z9">8</a> <i><a href="#b8"></a></i><b><a href="#b10"></a></b></li>
<li id="b10"><a href="#z10">9</a> <i><a href="#b9"></a></i></li>
</ul>
<ul class="add add2">
<li id="c0"> </li>
<li id="c1"><a href="#z2">0</a> <b><a href="#c2"></a></b></li>
<li id="c2"><a href="#z3">1</a> <i><a href="#c1"></a></i><b><a href="#c3"></a></b></li>
<li id="c3"><a href="#z4">2</a> <i><a href="#c2"></a></i><b><a href="#c4"></a></b></li>
<li id="c4"><a href="#z5">3</a> <i><a href="#c3"></a></i><b><a href="#c5"></a></b></li>
<li id="c5"><a href="#z6">4</a> <i><a href="#c4"></a></i><b><a href="#c6"></a></b></li>
<li id="c6"><a href="#z7">5</a> <i><a href="#c5"></a></i><b><a href="#c7"></a></b></li>
<li id="c7"><a href="#z8">6</a> <i><a href="#c6"></a></i><b><a href="#c8"></a></b></li>
<li id="c8"><a href="#z9">7</a> <i><a href="#c7"></a></i><b><a href="#c9"></a></b></li>
<li id="c9"><a href="#z10">8</a> <i><a href="#c8"></a></i><b><a href="#c10"></a></b></li>
<li id="c10"><a href="#z11">9</a> <i><a href="#c9"></a></i></li>
</ul>
<ul class="add add2">
<li id="d0"> </li>
<li id="d1"><a href="#z3">0</a> <b><a href="#d2"></a></b></li>
<li id="d2"><a href="#z4">1</a> <i><a href="#d1"></a></i><b><a href="#d3"></a></b></li>
<li id="d3"><a href="#z5">2</a> <i><a href="#d2"></a></i><b><a href="#d4"></a></b></li>
<li id="d4"><a href="#z6">3</a> <i><a href="#d3"></a></i><b><a href="#d5"></a></b></li>
<li id="d5"><a href="#z7">4</a> <i><a href="#d4"></a></i><b><a href="#d6"></a></b></li>
<li id="d6"><a href="#z8">5</a> <i><a href="#d5"></a></i><b><a href="#d7"></a></b></li>
<li id="d7"><a href="#z9">6</a> <i><a href="#d6"></a></i><b><a href="#d8"></a></b></li>
<li id="d8"><a href="#z10">7</a> <i><a href="#d7"></a></i><b><a href="#d9"></a></b></li>
<li id="d9"><a href="#z11">8</a> <i><a href="#d8"></a></i><b><a href="#d10"></a></b></li>
<li id="d10"><a href="#z12">9</a> <i><a href="#d9"></a></i></li>
</ul>
<ul class="add add2">
<li id="e0"> </li>
<li id="e1"><a href="#z4">0</a> <b><a href="#e2"></a></b></li>
<li id="e2"><a href="#z5">1</a> <i><a href="#e1"></a></i><b><a href="#e3"></a></b></li>
<li id="e3"><a href="#z6">2</a> <i><a href="#e2"></a></i><b><a href="#e4"></a></b></li>
<li id="e4"><a href="#z7">3</a> <i><a href="#e3"></a></i><b><a href="#e5"></a></b></li>
<li id="e5"><a href="#z8">4</a> <i><a href="#e4"></a></i><b><a href="#e6"></a></b></li>
<li id="e6"><a href="#z9">5</a> <i><a href="#e5"></a></i><b><a href="#e7"></a></b></li>
<li id="e7"><a href="#z10">6</a> <i><a href="#e6"></a></i><b><a href="#e8"></a></b></li>
<li id="e8"><a href="#z11">7</a> <i><a href="#e7"></a></i><b><a href="#e9"></a></b></li>
<li id="e9"><a href="#z12">8</a> <i><a href="#e8"></a></i><b><a href="#e10"></a></b></li>
<li id="e10"><a href="#z13">9</a> <i><a href="#e9"></a></i></li>
</ul>
<ul class="add add2">
<li id="f0"> </li>
<li id="f1"><a href="#z5">0</a> <b><a href="#f2"></a></b></li>
<li id="f2"><a href="#z6">1</a> <i><a href="#f1"></a></i><b><a href="#f3"></a></b></li>
<li id="f3"><a href="#z7">2</a> <i><a href="#f2"></a></i><b><a href="#f4"></a></b></li>
<li id="f4"><a href="#z8">3</a> <i><a href="#f3"></a></i><b><a href="#f5"></a></b></li>
<li id="f5"><a href="#z9">4</a> <i><a href="#f4"></a></i><b><a href="#f6"></a></b></li>
<li id="f6"><a href="#z10">5</a> <i><a href="#f5"></a></i><b><a href="#f7"></a></b></li>
<li id="f7"><a href="#z11">6</a> <i><a href="#f6"></a></i><b><a href="#f8"></a></b></li>
<li id="f8"><a href="#z12">7</a> <i><a href="#f7"></a></i><b><a href="#f9"></a></b></li>
<li id="f9"><a href="#z13">8</a> <i><a href="#f8"></a></i><b><a href="#f10"></a></b></li>
<li id="f10"><a href="#z14">9</a> <i><a href="#f9"></a></i></li>
</ul>
<ul class="add add2">
<li id="g0"> </li>
<li id="g1"><a href="#z6">0</a> <b><a href="#g2"></a></b></li>
<li id="g2"><a href="#z7">1</a> <i><a href="#g1"></a></i><b><a href="#g3"></a></b></li>
<li id="g3"><a href="#z8">2</a> <i><a href="#g2"></a></i><b><a href="#g4"></a></b></li>
<li id="g4"><a href="#z9">3</a> <i><a href="#g3"></a></i><b><a href="#g5"></a></b></li>
<li id="g5"><a href="#z10">4</a> <i><a href="#g4"></a></i><b><a href="#g6"></a></b></li>
<li id="g6"><a href="#z11">5</a> <i><a href="#g5"></a></i><b><a href="#g7"></a></b></li>
<li id="g7"><a href="#z12">6</a> <i><a href="#g6"></a></i><b><a href="#g8"></a></b></li>
<li id="g8"><a href="#z13">7</a> <i><a href="#g7"></a></i><b><a href="#g9"></a></b></li>
<li id="g9"><a href="#z14">8</a> <i><a href="#g8"></a></i><b><a href="#g10"></a></b></li>
<li id="g10"><a href="#z15">9</a> <i><a href="#g9"></a></i></li>
</ul>
<ul class="add add2">
<li id="h0"> </li>
<li id="h1"><a href="#z7">0</a> <b><a href="#h2"></a></b></li>
<li id="h2"><a href="#z8">1</a> <i><a href="#h1"></a></i><b><a href="#h3"></a></b></li>
<li id="h3"><a href="#z9">2</a> <i><a href="#h2"></a></i><b><a href="#h4"></a></b></li>
<li id="h4"><a href="#z10">3</a> <i><a href="#h3"></a></i><b><a href="#h5"></a></b></li>
<li id="h5"><a href="#z11">4</a> <i><a href="#h4"></a></i><b><a href="#h6"></a></b></li>
<li id="h6"><a href="#z12">5</a> <i><a href="#h5"></a></i><b><a href="#h7"></a></b></li>
<li id="h7"><a href="#z13">6</a> <i><a href="#h6"></a></i><b><a href="#h8"></a></b></li>
<li id="h8"><a href="#z14">7</a> <i><a href="#h7"></a></i><b><a href="#h9"></a></b></li>
<li id="h9"><a href="#z15">8</a> <i><a href="#h8"></a></i><b><a href="#h10"></a></b></li>
<li id="h10"><a href="#z16">9</a> <i><a href="#h9"></a></i></li>
</ul>
<ul class="add add2">
<li id="i0"> </li>
<li id="i1"><a href="#z8">0</a> <b><a href="#i2"></a></b></li>
<li id="i2"><a href="#z9">1</a> <i><a href="#i1"></a></i><b><a href="#i3"></a></b></li>
<li id="i3"><a href="#z10">2</a> <i><a href="#i2"></a></i><b><a href="#i4"></a></b></li>
<li id="i4"><a href="#z11">3</a> <i><a href="#i3"></a></i><b><a href="#i5"></a></b></li>
<li id="i5"><a href="#z12">4</a> <i><a href="#i4"></a></i><b><a href="#i6"></a></b></li>
<li id="i6"><a href="#z13">5</a> <i><a href="#i5"></a></i><b><a href="#i7"></a></b></li>
<li id="i7"><a href="#z14">6</a> <i><a href="#i6"></a></i><b><a href="#i8"></a></b></li>
<li id="i8"><a href="#z15">7</a> <i><a href="#i7"></a></i><b><a href="#i9"></a></b></li>
<li id="i9"><a href="#z16">8</a> <i><a href="#i8"></a></i><b><a href="#i10"></a></b></li>
<li id="i10"><a href="#z17">9</a> <i><a href="#i9"></a></i></li>
</ul>
<ul class="add add2">
<li id="j0"> </li>
<li id="j1"><a href="#z9">0</a> <b><a href="#j2"></a></b></li>
<li id="j2"><a href="#z10">1</a> <i><a href="#j1"></a></i><b><a href="#j3"></a></b></li>
<li id="j3"><a href="#z11">2</a> <i><a href="#j2"></a></i><b><a href="#j4"></a></b></li>
<li id="j4"><a href="#z12">3</a> <i><a href="#j3"></a></i><b><a href="#j5"></a></b></li>
<li id="j5"><a href="#z13">4</a> <i><a href="#j4"></a></i><b><a href="#j6"></a></b></li>
<li id="j6"><a href="#z14">5</a> <i><a href="#j5"></a></i><b><a href="#j7"></a></b></li>
<li id="j7"><a href="#z15">6</a> <i><a href="#j6"></a></i><b><a href="#j8"></a></b></li>
<li id="j8"><a href="#z16">7</a> <i><a href="#j7"></a></i><b><a href="#j9"></a></b></li>
<li id="j9"><a href="#z17">8</a> <i><a href="#j8"></a></i><b><a href="#j10"></a></b></li>
<li id="j10"><a href="#z18">9</a> <i><a href="#j9"></a></i></li>
</ul>
<ul class="add add2">
<li id="k0"> </li>
<li id="k1"><a href="#z10">0</a> <b><a href="#k2"></a></b></li>
<li id="k2"><a href="#z11">1</a> <i><a href="#k1"></a></i><b><a href="#k3"></a></b></li>
<li id="k3"><a href="#z12">2</a> <i><a href="#k2"></a></i><b><a href="#k4"></a></b></li>
<li id="k4"><a href="#z13">3</a> <i><a href="#k3"></a></i><b><a href="#k5"></a></b></li>
<li id="k5"><a href="#z14">4</a> <i><a href="#k4"></a></i><b><a href="#k6"></a></b></li>
<li id="k6"><a href="#z15">5</a> <i><a href="#k5"></a></i><b><a href="#k7"></a></b></li>
<li id="k7"><a href="#z16">6</a> <i><a href="#k6"></a></i><b><a href="#k8"></a></b></li>
<li id="k8"><a href="#z17">7</a> <i><a href="#k7"></a></i><b><a href="#k9"></a></b></li>
<li id="k9"><a href="#z18">8</a> <i><a href="#k8"></a></i><b><a href="#k10"></a></b></li>
<li id="k10"><a href="#z19">9</a> <i><a href="#k9"></a></i></li>
</ul>
</div>
<p class="equals">=</p>
<div class="box3">
<ul class="add add2 add3">
<li id="z0"> </li>
<li id="z1">0 </li>
<li id="z2">1 </li>
<li id="z3">2 </li>
<li id="z4">3 </li>
<li id="z5">4 </li>
<li id="z6">5 </li>
<li id="z7">6 </li>
<li id="z8">7 </li>
<li id="z9">8 </li>
<li id="z10">9</li>
<li id="z11">10</li>
<li id="z12">11</li>
<li id="z13">12</li>
<li id="z14">13</li>
<li id="z15">14</li>
<li id="z16">15</li>
<li id="z17">16</li>
<li id="z18">17</li>
<li id="z19">18</li>
</ul>
</div>
</div>
</body>
</html>
站长行业门户(www.software8.co)文章，希望大家可以留言建议
- CSS做的计算器
- 自己做的计算器。。。
- js做的计算器
- HTML和CSS结合做的一个计算器的简单页面
- J2ME做的简单计算器
- 自己做的初级计算器
- MFC做的一个计算器
- qt做的代码计算器
- Netbeans做的计算器界面
- netbeans做简易的计算器
- Qt5.5做的计算器
- 做一个简单的计算器
- Java做的简易计算器
- 一节前端课：html+css+js做个计算器
- 初学JAVA`` 做的简单功能计算器
- 利用java做一个简单的计算器
- 利用java做一个简单的计算器
- 利用java做一个简单的计算器
- 三命通会 连载四
- [Erlang 0077] Erlang 杂记 V
- js小应用
- InstallShield内部库函数 文件和文件夹函数
- hdu 1671 Phone List
- CSS做的计算器
- 放假杂记
- ArcGIS for Android 加载自己发布的地图却不显示
- 三命通会 连载五
- linux下socket三种方式简单例子
- 树桩数组
- [Erlang 0078] Erlang HiPE 二三事
- 193 - Graph Coloring
- 类加载器
