主界面wxml文件：
page{
height:100%;
}
.content{
min-height:100%;
display:flex;
flex-direction:column;
align-items:center;
box-sizing:border-box;
position:relative;
}
.main-bg{
height:100%;
width:100%;
position:absolute;
top:0;
left:0;
z-index:-1;
}
.screen-container{
padding-top:30rpx;
padding-left:5rpx;
padding-right:5rpx;
}
.screen{
">#fff;
border-radius:3px;
text-align:right;
width:720rpx;
height:100rpx;
line-height:100rpx;
padding-left:10rpx;
padding-right:10rpx;
margin-bottom:30rpx;
 
}
.btnGroup{
display:flex;
flex-direction:row;
}
.item{
width:160rpx;
min-height:10rpx;
margin:10rpx;
text-shadow:0 1px 1px rgba(0,0,0,.3);
border-radius:5px;
text-align:center;
line-height:150rpx;
display:inline-block;
}
.green{
color:#d9eef7;
border:solid 0px #da7c0c;
background:#99cc66;
}
.blue{
color:#d9eef7;
border:solid 0px #0076a3;
background:#0095cd;
}
 
主界面wxss文件：
page{
height:100%;
}
.content{
min-height:100%;
display:flex;
flex-direction:column;
align-items:center;
box-sizing:border-box;
position:relative;
}
.main-bg{
height:100%;
width:100%;
position:absolute;
top:0;
left:0;
z-index:-1;
}
.screen-container{
padding-top:30rpx;
padding-left:5rpx;
padding-right:5rpx;
}
.screen{
">#fff;
border-radius:3px;
text-align:right;
width:720rpx;
height:100rpx;
line-height:100rpx;
padding-left:10rpx;
padding-right:10rpx;
margin-bottom:30rpx;
 
}
.btnGroup{
display:flex;
flex-direction:row;
}
.item{
width:160rpx;
min-height:10rpx;
margin:10rpx;
text-shadow:0 1px 1px rgba(0,0,0,.3);
border-radius:5px;
text-align:center;
line-height:150rpx;
display:inline-block;
}
.green{
color:#d9eef7;
border:solid 0px #da7c0c;
background:#99cc66;
}
.blue{
color:#d9eef7;
border:solid 0px #0076a3;
background:#0095cd;
}

（原项目作者：忽如寄 （简书）

原文链接：https://www.jianshu.com/p/47c1a65009a7）

四则运算计算器的微信小程序_1 界面的更多相关文章

  1. 四则运算计算器的微信小程序_2 运算

    js文件: function isOperator(value) {   var operatorString = '+-*/()×÷';   return operatorString.indexO ...

  2. 微信小程序的界面下拉刷新

    小程序的下拉刷新的值设置:需要设置app.json的window中 "navigationBarTextStyle":true  

  3. 微信小程序--分享界面自定义图片

    一般小程序页面都会大于等于1页,每个页面右上角都会有分享功能,建议把以下方法封装到app.js文件,在页面直接调用该方法,避免重复代码,提高性能.(代码用到ES6语法,若不支持,请自行还原js) // ...

  4. 微信小程序之界面交互反馈

    交互反馈就是在用户出发某事件之后,给用户一个反馈信息,这要是一个很友好的习惯. 在小程序中是通过一下几种方式实现的: 1.wx.showToast()方法 showToast: function (p ...

  5. 微信小程序 API 界面（1）

    界面 有关屏幕的api 交互: wx.showToast() 显示消息提示框 参数:object object的属性: title:类型 字符串 提示的内容(文本最多7个汉字) icon:类型 字符串 ...

  6. 微信小程序 API 界面 （2）

    由于每个 API 参数:对象的属性都有 success,fail,complete,所以在这个提前介绍,就不再每个API 上写了 success:类型 函数 接口调用成功的回调函数 fail:类型 函 ...

  7. 微信小程序踩坑集合

    1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...

  8. 微信小程序学习指南

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  9. 从零开始学做微信小程序，看这些就够了！

    随着正式开放公测,微信小程序再次万众瞩目,越来越多的企业和个人涌入到小程序开发的大军中.小程序究竟是什么?适合做小程序的产品有哪些?做小程序需要提前准备什么?如何零基础学做小程序?此文,将列出OSC上 ...

随机推荐

  1. javaScript第二篇

    事件处理函数 javaScript响应用户操作等都是通过事件处理来触发;其基本形式为 event = "javaScript statement(s);" 事件 = "事 ...

  2. webstorm 使用指南

    1. webstrom打开多个项目 默认情况下一次只能打开一个项目,如果需要打开多个就按照下面的方法: Preferences -> Directories -> Add Content ...

  3. BFS解决九宫重排问题

    问题 1426: [蓝桥杯][历届试题]九宫重排 时间限制: 1Sec 内存限制: 128MB 提交: 215 解决: 47 题目描述 如下面第一个图的九宫格中,放着  1~8  的数字卡片,还有一个 ...

  4. 用bootstrap写一个登陆页

    <div class="container"> <p class="text-center marginTop35">后台管理系统< ...

  5. webuploader的一些体验

    WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.支持大文件分片并发上传. 具体api文档参考:http://fex.b ...

  6. HTTP服务器（2）

    import socket import re import multiprocessing def service_client(new_socket): """为这个 ...

  7. Eureka 服务注册列表显示IP问题研究

    在研究Spring Cloud的过程中,本地搭建好Eureka注册中心之后,发现Eureka服务页面显示的服务是机器名:端口的格式,并不是IP+端口的形式. 如下图: 具体搭建过程我就不再贴代码了,参 ...

  8. Nginx事件管理之epoll模块

    1. epoll 原理 假设有 100 万用户同时与一个进程保持着 TCP 连接,而每一时刻只有几十个或几百个 TCP 连接时活跃的(接收到 TCP 包),也就是说,在每一时刻,进程只需要处理这 10 ...

  9. MAMP 环境下安装Redis扩展

    1. 下载对应版本的 php 源码,(当前使用版本是 php5.6.30 )版本号最后一位有点区别不影响链接:http://php.net/get/php-5.6.31.tar.bz2/from/a/ ...

  10. AttributeError:module 'keras.engine.topology' has no attribute 'load_weights_from_hdf5_group_by_name

    在jupyter notebooks上运行tensorflow-keras的Mask R-CNN时遇到如下错误: 参考博客中写了两种解决方案: 解决方案一:报错是由于keras版本不对造成的.load ...