htmltest~计算器界面的实现
通过div+css和部分布局的作用，实现了，如下效果的计算器展示页面
![C%]R$IGDK4J(%3LJXD3]SY.png
，废话不多说，最主要的还是分享代码：
html：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="../css/counter.css">
</head>
<body>.<div class="counter-body"><div class="counter-title"><div>计算器</div><div>-</div><div> 口 </div><div>X</div></div><div class="counter-content"><div class="counter-content-title"><div class="content-title"><div>编辑(E)</div><div>查看(V)</div><div>帮助(H)</div></div></div><div class="counter-content-input"><input placeholder="0." type="text"></div><div class="counter-content-btn-row"><div class="counter-content-btn-col1"><div> </div><div>Backspace</div><div>CE</div><div>C</div></div><div class="counter-content-btn-col"><div>MC</div><div>7</div><div>8</div><div>9</div><div>/</div><div>sqrt</div></div><div class="counter-content-btn-col"><div>MR</div><div>4</div><div>5</div><div>6</div><div>*</div><div>%</div></div><div class="counter-content-btn-col"><div>MS</div><div>1</div><div>2</div><div>3</div><div>-</div><div>1/x</div></div><div class="counter-content-btn-col"><div>M+</div><div>0</div><div>+/-</div><div>.</div><div>+</div><div>=</div></div></div></div></div>
</body>
</html>css样式表：
body{margin: 0 auto;
}
.counter-body{position: absolute;top: 200px;left: 200px;border: 2px solid #3335e5;width: 245px;height: 210px;border-radius: 5px;background: rgba(217, 217, 217, 0.49);
}
.counter-title{line-height: 26px;width: 100%;background: #3335e5;color:#fff;
}
.counter-title div{display: inline-block;
}
.counter-title div:first-child{margin-right: 70px;
}
.counter-title div:nth-child(4){background: red;
}
.counter-title div:nth-child(2){font-size: 18px;
}
.counter-title div:nth-child(2),.counter-title div:nth-child(4){padding-left: 9px;padding-right: 9px;
}
.counter-title div:nth-child(2),.counter-title div:nth-child(3),.counter-title div:nth-child(4){border-radius: 2px;height: 22px;border: 1px solid #FFFFFF;
}
.counter-title div{padding: 0 6px 2px 6px;
}
.content-title {display: table;
}
.content-title div{padding-left: 10px;text-align: center;line-height: 22px;display: table-cell;font-size: 12px;
}
.counter-content-input{padding-left: 10px;
}
.counter-content-input input{height: 15px;text-align: right;width: 220px;
}
.counter-content-btn-row{vertical-align: middle;margin-top: -15px;padding: 25px 10px;
}
.counter-content-btn-col1 div:first-child{background: rgba(247, 247, 247, 0.87);text-shadow: 5px 5px 3px #bfbfbf ;color: #fff;width: 16px;line-height: 15px;
}
.counter-content-btn-col1 div:nth-child(2){background: rgba(247, 247, 247, 0.87);width: 65px;padding: 1px 1px;
}
.counter-content-btn-col1 div{color: red;background: rgba(247, 247, 247, 0.87);padding: 1px 1px;height: 15px;border-radius: 2px;text-align: center;display: inline-block;font-size: 10px;margin: 0 1.5px;border: 1px solid #858585;width: 46px;
}
.counter-content-btn-row div:nth-child(2),.counter-content-btn-row div:nth-child(3),.counter-content-btn-row div:nth-child(4){color: blue;
}
.counter-content-btn-row div:nth-child(4n+1){color: red;
}
.counter-content-btn-col div:first-child{background: rgba(247, 247, 247, 0.87);margin-right: 4px;
}
.counter-content-btn-col div{background: rgba(247, 247, 247, 0.87);display: inline-block;border-radius: 2px;text-align: center;display: inline-block;font-size: 10px;margin: 0 2px;border: 1px solid #858585;width: 24.38px;height: 15px;
}
.counter-content-btn-col1,.counter-content-btn-col{color: red;line-height: 15px;margin: 1.5px 0 ;
}
.counter-content-btn-col div:last-child{width: 25px;
}
复制代码其中，
在这个部分实现的时候出现一个小问题就是有个前边儿的无字小方框，本来是一个空格就可以搞定，但是由于空格撑不起来，所以在div相应的部分加入了空格 
这个应该是或是这次实现过程中出现的一个小问题吧， 另外说一点，在这次实现的过程中用到了很多伪类选择器 也相当于是对伪类选择器的一次练手吧
加油吧~~~ fighting~@^-^@~
htmltest~计算器界面的实现相关推荐
- 计算器排html页面,htmltest~计算器界面的实现
通过div+css和部分布局的作用,实现了,如下效果的计算器展示页面 ![C%]R$IGDK4J(%3LJXD3]SY.png ,废话不多说,最主要的还是分享代码: html: Title . 计算器 ...
- QT的基本使用（一）：计算器界面的简易设计及其简单功能实现
刚开始学习QT,发现QT真的是一个功能很强大的开发软件,所以用QT做了一个简单的计算器来熟悉一下QT. 1.首先,先建立一个QT项目的工程文件:如下 项目保存位置和项目文件名字自己选择,最好是每个项目 ...
- 12、Java Swing计算器界面的实现
在本节之前已经详细介绍了 Swing 中容器.布局管理器以及常用的基本组件.本案例将综合运用这些知识实现一个计算器的布局.在本实例中使用两种布局管理器来进行界面设计. 计算器界面可以分成两部分,即显示 ...
- 计算器带菜单java_java GUI 模仿计算器界面的代码有点小问题。（如图，如何让下拉菜单下面的两行压扁一点？）...
代码:importjava.awt.*;publicclassCalculator{publicstaticvoidmain(String[]args){Framef=newFrame("计 ...
- Java黑皮书课后题第5章：**5.35（加法）编写程序，计算下面的和：1/(1+根2) + 1/(根2+根3) + 1/(根3+根4)+……1/(根624+根625)
@[TOC](5.35(加法)编写程序,计算下面的和:1/(1+根2) + 1/(根2+根3) + 1/(根3+根4)+--1/(根624+根625)) 题目 题目概述 5.35(加法)编写程序,计算 ...
- python计算点到面的距离
python计算点到面的距离 已知M个点,记P∈R^(M*3),目的是求M个点到平面Z= aX + bY + c的距离解法1: 使用平面的法向量来求解 平面Z= aX + bY + c的法向量为[a, ...
- VC++之MFC从零开始实现windows系统任务管理器(一、windows任务管理器界面的制作)
VC++之MFC从零开始实现windows系统任务管理器(一.windows任务管理器界面的制作) 通过本例程从零开始使用VC++与MFC实现一个基于windows的任务管理器. 最终效果图 软件工具 ...
- 怎么用GaBi软件计算沥青路面的环境影响
GaBi是一种功能强大的生命周期评价软件,可以用于评估产品.过程或服务对环境的影响.要使用GaBi软件计算沥青路面的环境影响,请按照以下步骤操作: 确定研究对象和功能单位:在进行生命周期评价前,必须确 ...
- 计算机知识指的是什么意思,计算机上面的m+和m-是什么意思
计算器是可以进行相关数字运算的机器,计算器也是有非常的种类的,按照计算器的功能可以进行简单的运算,也可以进行复杂的运算.功能比较复杂的,价格也就会相对贵一点.简单一点的计算器也就能进行一般的加减乘除的 ...
最新文章
- Sublime text3 快捷方式(windows平台)
- 让VirtualBox的虚拟机器在电脑开机时自动启动
- android 屏幕旋转180度
- Paxos的工程实践
- 如何修改以前登录过的共享文件夹的用户名和密码以及查看或删除浏览器里保存的密码...
- 理科都要学大学计算机吗,女生不适合学理科专业？报考这些理科专业，一毕业就会遭到疯抢！...
- Duilib编辑框Edit输入完自动跳到下一个编辑框
- WebStorm安装Vim以及快捷键设置
- Bert遇到文本分类：如何用好Bert这把刀
- 例2.8 叠筐 - 九度教程第15题（排版题）
- Web前端第一季(HTML):十四:课时 38 : 309-文本域完成大段文本的输入+课时 39 : 310-表单的属性+课时 40 : 311-文件上传
- 纤亿通教你如何选择合适的 Cat6 网线
- 【智慧医疗】破解医疗数据孤岛，实现信息共享
- 非功能测试之本地化和国际化测试
- SIM900A短信操作
- bin 转hex方法
- 国产ADAS“再”突围
- QoS配置说明（CBWFQ/LLQ/PQ/CQ/WFQ）
- 双硬盘安装win10和linux双系统,双硬盘最初尝试完美安装Windows10 + ubuntu16双系统
- windows搭建Qt源码编译、调试环境