计算器排html页面,htmltest~计算器界面的实现
通过div+css和部分布局的作用,实现了,如下效果的计算器展示页面
![C%]R$IGDK4J(%3LJXD3]SY.png
,废话不多说,最主要的还是分享代码:
html:
Title
.
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;
}
其中,
Paste_Image.png
在这个部分实现的时候出现一个小问题就是有个前边儿的无字小方框,本来是一个空格就可以搞定,但是由于空格撑不起来,所以在div相应的部分加入了空格 
这个应该是或是这次实现过程中出现的一个小问题吧,
另外说一点,在这次实现的过程中用到了很多伪类选择器
也相当于是对伪类选择器的一次练手吧
加油吧~~~
fighting@^-^@
计算器排html页面,htmltest~计算器界面的实现相关推荐
- htmltest~计算器界面的实现
通过div+css和部分布局的作用,实现了,如下效果的计算器展示页面 ![C%]R$IGDK4J(%3LJXD3]SY.png ,废话不多说,最主要的还是分享代码: html: <!DOCTYP ...
- 计算器带菜单java_java GUI 模仿计算器界面的代码有点小问题。(如图,如何让下拉菜单下面的两行压扁一点?)...
代码:importjava.awt.*;publicclassCalculator{publicstaticvoidmain(String[]args){Framef=newFrame("计 ...
- QT的基本使用(一):计算器界面的简易设计及其简单功能实现
刚开始学习QT,发现QT真的是一个功能很强大的开发软件,所以用QT做了一个简单的计算器来熟悉一下QT. 1.首先,先建立一个QT项目的工程文件:如下 项目保存位置和项目文件名字自己选择,最好是每个项目 ...
- 12、Java Swing计算器界面的实现
在本节之前已经详细介绍了 Swing 中容器.布局管理器以及常用的基本组件.本案例将综合运用这些知识实现一个计算器的布局.在本实例中使用两种布局管理器来进行界面设计. 计算器界面可以分成两部分,即显示 ...
- 计算器排html页面,简易计算器html页面代码
简易计算器 content=no-cache> content=zh-cn> //document.οnkeyup=function Fun(){alert(event.keyCode); ...
- 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(加法)编写程序,计算 ...
- 跳转到新页面并清除当前页面的history记录
History 接口允许操作浏览器的曾经在标签页或者框架里访问的会话历史记录,通过history方法触发前进后退 通常使用的方式: window.location.href='index.html' ...
- python计算点到面的距离
python计算点到面的距离 已知M个点,记P∈R^(M*3),目的是求M个点到平面Z= aX + bY + c的距离解法1: 使用平面的法向量来求解 平面Z= aX + bY + c的法向量为[a, ...
- 个人所得税计算器 微信小程序开发 计算差值方法
个人所得税计算器 微信小程序开发 计算差值方法 1.自己做的demo,查看差值:扫一扫 扫一扫 2.效果: 3.官网API: https://developers.weixin.qq.com/m ...
最新文章
- android wsdl封装,在Android中调用C#写的WebService(附源代码)
- Python: translate()审查清理文本字符串
- 《大道至简》一书第三版,与编辑就本书写作风格的讨论
- clover 主题_Clover主题更换
- python大鱼吃小鱼_python 游戏编程 大鱼吃小鱼
- 华为、中兴圈地IPTV金矿 中小企业南柯一梦
- 全国计算机等级考试二级Python考试大纲预测和分析
- 使用Ecliplse时,对导入package的顺序进行设定
- php与plc,plc编程语言有哪几种
- SecureCRT的安装破解
- Win10修修补补日记:Win10周年更新再出BUG 淡定
- 程序设计的感悟——大道至简
- matlab中eval的用法
- 二代旅游网站CMS缓存列表
- MATLAB-随机森林实现数据回归分析预测
- rebase interactive
- 收集一些可以发外链的网站
- Matlab中ylim函数的使用
- ASP音乐网站的设计与实现
- Unity C# 游戏客户端面试复习
热门文章
- go tool trace goalng调优工具
- 牛刀小试Oracle之ORACLE 11GR2 RAC安装配置--检测GI软件是否正常(三)
- Exchange 2010 创建设备室邮箱
- 最幸福的事就是吃饺子
- leetcode201. 数字范围按位与
- qq群 voiceover_如何在iOS上使用VoiceOver为所有人构建应用程序
- tdd测试驱动开发课程介绍_测试驱动开发的实用介绍
- 西格尔零点猜想_我从埃里克·西格尔学到的东西
- 有符号位和无符号位。——int8疑问有感
- Python Web框架Tornado的异步处理代码演示样例