HTML编写计算器样式

HTML编写计算器样式

代码如下
方法1：使用table方法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><table style= "width: 230px;height: 320px;text-align: center; font-size: 20px;color: white;"><tr><td colspan="4" style="background-color: rgb(129, 127, 127);text-align: right;border-top-left-radius: 15px;  border-top-right-radius: 15px;">0</td></tr><tr style="background-color: rgb(129, 127, 127);"><td width="25%">AC</td><td width="25%">+/-</td><td width="25%">%</td><td width="25%" style="background-color: sandybrown;">÷</td></tr><tr style="background-color: rgb(129, 127, 127);"><td>7</td><td>8</td><td>9</td><td style="background-color: sandybrown;">*</td></tr><tr style="background-color: rgb(129, 127, 127);"><td>4</td><td>5</td><td>6</td><td style="background-color: sandybrown;">-</td></tr><tr style="background-color: rgb(129, 127, 127);"><td>1</td><td>2</td><td>3</td><td style="background-color: sandybrown;">+</td></tr><tr style="background-color: rgb(129, 127, 127);"><td colspan="2" style="border-bottom-left-radius: 15px;">0</td><td>.</td><td style="background-color: sandybrown;border-bottom-right-radius: 15px;">=</td></tr>
</table>
</body>
</html>

实现效果

方法二：使用div方法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>
.out{width: 360px;
height: 420px;
/* border: burlywood solid 1px; */
margin: auto;
margin-top: 100px;}.frame{width: 360px;
height: 120px;
/* border: burlywood solid 1px; */
margin: auto;
background-color: rgb(90, 100, 99);
font-size: 30px;
color: honeydew;
text-align: right;
border-top-left-radius: 15px;
border-top-right-radius: 15px;}.red{width: 10px;height: 10px;border-radius: 50%;margin-left: 10px;margin-top: 10px;background-color: red;float: left;
}
.red:hover{background-color: rgb(43, 29, 29);}
.bule{width: 10px;height: 10px;border-radius: 50%;margin-left: 10px;margin-top: 10px;background-color: rgb(28, 28, 219);float: left;
}
.bule:hover{background-color: rgb(17, 156, 149);}
.green{width: 10px;height: 10px;border-radius: 50%;margin-left: 10px;margin-top: 10px;background-color: green;float: left;
}
.green:hover{background-color: rgb(187, 98, 38);}.down{width: 360px;
height: 300px;
/* border: burlywood solid 1px; */
margin: auto;
background-color: rgb(93, 105, 103);
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;}.box{width: 88px;
height: 58px;
border: rgb(222, 233, 225) solid 1px;
float: left;
text-align: center;
font-size: 25px;
color: honeydew;}.yell{background-color: chocolate;}.gray{background-color: gray;}
</style>
<body><div class="out"><div class="frame"><div ><div class="red"></div><div class="bule"></div><div class="green"></div>计算器</div></div><div class="down gray"><div class="box">AC</div><div class="box">C</div><div class="box">+/-</div><div class="box yell">%</div><div class="box">7</div><div class="box">8</div><div class="box">9</div><div class="box yell">+</div><div class="box">4</div><div class="box">5</div><div class="box">6</div><div class="box yell">-</div><div class="box">1</div><div class="box">2</div><div class="box">3</div><div class="box yell">*</div><div class="box" style="width: 49%;" >0</div><div class="box">.</div><div class="box yell" style="border-bottom-right-radius: 15px;">=</div></div></div>
</body>
</html>

实现结果：小圆点可以实现变色

HTML编写计算器样式相关推荐

[教程]JS从糊涂到明白：一步一步编写计算器2 – 简化代码
[文章原始发表:This Is WWW : http://www.plrsoft.cn/blog/?p=69 转载请注明出处] 我在上一篇文章"一步一步编写计算器 – 构建和兼容&qu ...
java实现复制粘贴的计算器_软帝学院教你用java编写计算器（三）
教你用java编写计算器(三) import java.awt.Color; import java.awt.Dimension; import java.awt.event.ActionListen ...
Java用awt编写计算器（只有加减乘除）
Java用awt编写计算器(只有加减乘除) 结果演示: import java.awt.BorderLayout; import java.awt.Button; import java.awt.Co ...
纯javascript代码编写计算器程序
今天来分享一下用纯javascript代码编写的一个计算器程序,很多行业都能用到这个程序,例如做装修预算.贷款利率等等. 首先来看一下完成后的效果: 具体代码如下:(关注我的博客,及时获取最新WEB前 ...
python编程计算器_python编写计算器功能
本文实现用python编写一个带界面的计算器小程序,当然这个计算器功能很简单,只能进行一些简单的数学运算,很适合初学者,希望能给大家带来一些启发实验前提因为是带图形界面的,所以用的版本是在wind ...
shell脚本编写计算器
版权声明:本文为博主原创文章,转载请注明CSDN博客源地址!共同学习,一起进步~ https://blog.csdn.net/qq_29473881/article/details/84138513 ...
java语言编写计算器_第二次作业利用java语言编写计算器进行四则运算
随着第一次作业的完成,助教牛老师又布置了第二次作业:用java语言编写一个程序然后进行四则运算用户用键盘输入一个字符来结束程序显示统计结果.一开始看到这个题目我也着实吓了一跳因为不知道如何下手而且 ...
Java语言编写计算器
本文讲述Java图形用户界面的编写,重点讲述一个简单计算器的实现. 文中程序的运行环境为Windows10 ,编译环境为MyEclipse 8.5. 一个简单的计算器主要实现一下功能和要求: 一:输入 ...
python编程计算器_Python3-用Python编写计算器的3种方法
用python实现简单的计算器功能,有很多思路,这里介绍三种方法,并分析各自的优缺点.下图是一个真是的计算器,由StellrWeb摄于Unsplash: 众所周知,根据Tao of Python的规定 ...

HTML编写计算器样式

HTML编写计算器样式相关推荐

最新文章

热门文章