CSS做的計算器
07-27
<!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>//http://www.software8.co/wzjs/cssdiv/209.html <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>
推薦閱讀：
推薦閱讀：
※合併單元格計算竟然如此簡單！
※年齡計算器 算算你是否已早衰
※海量計算機入門視頻教程
※編織尺寸計算（有用）
※像海參一樣愚蠢 ——人工智慧與智能計算縱橫談