062 ∞ 实现前端样式设置 |【优化篇】

不二如是

                               
登录/注册后可看大图

上一讲我们是实现了计算器的基本页面，本次来优化下～

现在的页面：

                               
登录/注册后可看大图

优化空间还很大，例如按钮的颜色、按下去的颜色。

先来为数字部分（0-9）按钮设置背景色为鱼C主色-元气绿，在calc.wxss中创建类：

1. .fishcColor{
   
2.   background-color: #2ebb96;
   
3.   color: #fff;
   
4.   border:solid 1px #eee;
   
5. }

复制代码

在数字0-9的button的现有类中依次添加：

编译：

当数字键被按下去，我们还可以额外设置一个颜色：

1. .buttonNumHover{
   
2.   background-color: #2e70bb;
   
3.   opacity:0.7;
   
4. }

复制代码

按钮按下去，变深，为0-9数字键，添加hover-class：

编译：

其他键的颜色也是我们上面的玩法，鱼油自行实现～

我们设置为orange，创建类：

1. .otherColor{
   
2.   background-color: #f78d1d;
   
3.   color: #fff;
   
4.   border: solid 1px #eee;
   
5. }

复制代码

按下去的效果，创建类：

1. .buttonOtherHover{
   
2.   background-color: red;
   
3.   opacity:0.7;
   
4. }

复制代码

添加对应的class后，编译：

除了记录历史操作的按钮没效果外，其他的按键都搞定了。

---

课后作业


1、鱼C-元气绿，色号为？

2、回贴上传“截图”，分享鱼油的大作～



答案：

游客，如果您要查看本帖隐藏内容请回复

---

如果有收获，别忘了评分 ：

                               
登录/注册后可看大图

这位鱼油，如果喜欢小程序，请订阅 专辑（传送门）（不喜欢更要订阅 ）

                               
登录/注册后可看大图