062 ∞ 实现前端样式设置 |【优化篇】
http://xxx.fishc.org/forum/201805/02/171248f4zdsipf6d4qjnjl.png上一讲我们是实现了计算器的基本页面，本次来优化下～
现在的页面：
http://xxx.fishc.org/forum/201807/16/095429bhdkjggd6pwqodmd.png
优化空间还很大，例如按钮的颜色、按下去的颜色。
先来为数字部分（0-9）按钮设置背景色为鱼C主色-元气绿，在calc.wxss中创建类：
.fishcColor{
background-color: #2ebb96;
color: #fff;
border:solid 1px #eee;
}
在数字0-9的button的现有类中依次添加：
编译：
当数字键被按下去，我们还可以额外设置一个颜色：
.buttonNumHover{
background-color: #2e70bb;
opacity:0.7;
}
按钮按下去，变深，为0-9数字键，添加hover-class：
编译：
其他键的颜色也是我们上面的玩法，鱼油自行实现～
我们设置为orange，创建类：
.otherColor{
background-color: #f78d1d;
color: #fff;
border: solid 1px #eee;
}
按下去的效果，创建类：
.buttonOtherHover{
background-color: red;
opacity:0.7;
}
添加对应的class后，编译：
除了记录历史操作的按钮没效果外，其他的按键都搞定了。
课后作业
1、鱼C-元气绿，色号为？
2、回贴上传“截图”，分享鱼油的大作～
答案：
**** Hidden Message *****
如果有收获，别忘了评分{:10_281:} ：
http://xxx.fishc.org/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢小程序，请订阅 专辑（传送门）（不喜欢更要订阅{:10_297:} ）
http://xxx.fishc.org/forum/201803/21/151715umqz1qoywp11wjbq.gif
页:
[1]