认识是从实践中来,到实践中去,在实践中接受检验。
计算器是网页初学者经常做的了,我的这个例子用Vue来控制面板数据和计算操作,用table
和v-for
做界面,用CSS
控制布局和样式。
做计算器的过程中更加了解了如何正确地使用CSS,因此记录一下,希望能多一些这种经验,总结出自己的学习模式。
Vue中使用动态Class
<table id="calc_table">
<tr v-for="row in panel" class="calc_row">
<template v-for="btn in row" >
<td :class="[
{ calc_btn: true },
{ calc_btn_equal: btn==='=' },
{ calc_btn_number: btn!=='=' },
]" @click="input(btn)"> {{ btn }} </td>
</template>
</tr>
</table>
使用:class
可以给元素指定一个ClassObject
或ClassObject
的数组(以下统称ClassObject
),通过这个ClassObject
可以“算”出该元素有哪些class
。
为什么要有动态class呢?因为静态class实在太不灵活了。数字按钮要加一个class,=按钮要加另一个,log、sin这些按钮又要加另一个。不仅写起来冗长,而且不能用v-for
这种统一的方式来实现了。
换句话说,ClassObject
是元素的状态和它的class之间的关系
的一个抽象,形式地说,ClassObject
是从元素状态到class的一个映射。
class = ClassObject(state), class ⊂ CSS.allClasses, state ⊂ Vue.data
而Vue完成的工作就是维护所有的状态(也就是data
),当状态变化时重新计算class并同步到相应元素上。
参考:https://cn.vuejs.org/v2/guide/class-and-style.html
通过Chrome的检查功能学习别人家的CSS
“我前天亲眼见你偷了谷家的代码,吊着打。”
“程序员的事,能算偷吗?”
直接Google计算器出来的在线计算器样式就蛮好看的,按钮有渐变效果,这是我不会的。比起一章一章的啃文档,看一个感兴趣的例子源码学起来更快。于是乎右键 -> 检查。

在右边可以直接看到对应的CSS样式,filter中可以选择状态进一步筛选。

参考:Get Started With Viewing And Changing CSS
CSS变量
“偷”了别人家的代码,界面是好看了,比较不幸的是代码变丑了:
.calc_btn {
width: 50px;
height: 50px;
text-align: center;
}
.calc_btn_number {
background-image: -moz-linear-gradient(top,#f5f5f5,#f1f1f1);
background-image: -ms-linear-gradient(top,#f5f5f5,#f1f1f1);
background-image: -o-linear-gradient(top,#f5f5f5,#f1f1f1);
background-image: -webkit-gradient(linear,left top,left bottom,from(#f5f5f5),to(#f1f1f1));
background-image: -webkit-linear-gradient(top,#f5f5f5,#f1f1f1);
background-color: #f5f5f5;
background-image: linear-gradient(top,#f5f5f5,#f1f1f1);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#f5f5f5,EndColorStr=#f1f1f1);
border: 1px solid #dedede;
color: #444;
}
.calc_btn_equal {
background-image: -moz-linear-gradient(top,#4d90fe,#4787ed);
background-image: -ms-linear-gradient(top,#4d90fe,#4787ed);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#4d90fe,EndColorStr=#4787ed);
background-image: -o-linear-gradient(top,#4d90fe,#4787ed);
background-image: -webkit-gradient(linear,left top,left bottom,from(#4d90fe),to(#4787ed));
background-image: -webkit-linear-gradient(top,#4d90fe,#4787ed);
background-color: #4d90fe;
background-image: linear-gradient(top,#4d90fe,#4787ed);
border: 1px solid #3079ed;
color: #fefefe;
}
.calc_btn_number:hover {
-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
background-image: -moz-linear-gradient(top,#f8f8f8,#f1f1f1);
background-image: -ms-linear-gradient(top,#f8f8f8,#f1f1f1);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#f8f8f8,EndColorStr=#f1f1f1);
background-image: -o-linear-gradient(top,#f8f8f8,#f1f1f1);
background-image: -webkit-gradient(linear,left top,left bottom,from(#f8f8f8),to(#f1f1f1));
background-image: -webkit-linear-gradient(top,#f8f8f8,#f1f1f1);
background-color: #f8f8f8;
background-image: linear-gradient(top,#f8f8f8,#f1f1f1);
border: 1px solid #c6c6c6;
color: #222;
}
.calc_btn_equal:hover {
-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
background-image: -moz-linear-gradient(top,#4d90fe,#357ae8);
background-image: -ms-linear-gradient(top,#4d90fe,#357ae8);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#4d90fe,EndColorStr=#357ae8);
background-image: -o-linear-gradient(top,#4d90fe,#357ae8);
background-image: -webkit-gradient(linear,left top,left bottom,from(#4d90fe),to(#357ae8));
background-image: -webkit-linear-gradient(top,#4d90fe,#357ae8);
background-color: #4d90fe;
background-image: linear-gradient(top,#4d90fe,#357ae8);
border: 1px solid #2f5bb7;
color: #fefefe;
}
由于兼容性的原因,设置了很多个background-image,而且除了两个渐变颜色不同,每个元素的内容几乎是一样的。我们的原则是“不要有重复代码”,这还能忍吗?
不能忍好!
CSS变量了解一下!
知道有这个东西后,看看文档,改写代码并不困难。关键是要有去掉重复代码的想法。
.calc_btn {
width: 50px;
height: 50px;
text-align: center;
-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
background-image: -moz-linear-gradient(top,var(--start-color),var(--end-color));
background-image: -ms-linear-gradient(top,var(--start-color),var(--end-color));
background-image: -o-linear-gradient(top,var(--start-color),var(--end-color));
background-image: -webkit-gradient(linear,left top,left bottom,from(var(--start-color)),to(var(--end-color)));
background-image: -webkit-linear-gradient(top,var(--start-color),var(--end-color));
background-image: linear-gradient(top,var(--start-color),var(--end-color));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=var(--start-color),EndColorStr=var(--end-color));
background-color: var(--start-color);
border: 1px solid var(--border-color);
color: var(--text-color);
}
.calc_btn_number {
--start-color: #f5f5f5;
--end-color: #f1f1f1;
--border-color: #dedede;
--text-color: #444;
}
.calc_btn_equal {
--start-color: #4d90fe;
--end-color: #4787ed;
--border-color: #3079ed;
--text-color: #fefefe;
}
.calc_btn_number:hover {
--start-color: #f8f8f8;
--end-color: #f1f1f1;
--border-color: #c6c6c6;
--text-color: #222;
}
.calc_btn_equal:hover {
--start-color: #4d90fe;
--end-color: #357ae8;
--border-color: #c6c6c6;
--text-color: #222;
}
网友评论