小小计算器~

时间：2018-04-10 18:46:51 阅读：231 评论：0 收藏：0 [点我收藏+]

因为算账不好就自己写了一个哈哈~
如图：
技术分享图片

**```
HTML代码部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算器</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<div class="cal-box">
<div class="num-board" id="numBoard">0</div>
<table>
<tr>

7 8 9 + 4 5 6 - 1 2 3 x c 0 / =

不知道这回发出去，会不会还是乱码~ css部分： div.cal-box{ width: 232px; height: 272px; background-color: #333; margin: 100px auto; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; overflow: hidden; } div.cal-box div.num-board{ width: 100%; height: 80px; border: 1px solid #fff; padding: 0 10px; line-height: 80px; box-sizing: border-box; font-size: 30px; color: #fff; text-align: right; } div.cal-box table{ width: 100%; height: 192px; background-color: #e0dfe0; border-collapse: collapse; /*合拼重复的边框*/ table-layout: fixed; /* 平分列宽由表格宽度和列宽度设定*/ } div.cal-box table tr td{ color: #000; font-size: 20px; text-align: center; border-right: 1px solid #999; border-bottom: 1px solid #999; cursor: pointer; } div.cal-box table tr td.symbol{ background-color: #e99748; color: #fff; } /*给td一个类，清除右边的边框*/ div.cal-box table tr td.last-td{ border-right: none; } /*给tr一个类，清除最下面的边框*/ div.cal-box table tr.last-row td{ border-bottom: none; }

小小计算器~

标签：html css js 前端

原文地址：http://blog.51cto.com/13687572/2096614

踩

(0)

评论一句话评论（0）