美文网首页
从做一个计算器出发学习CSS

从做一个计算器出发学习CSS

作者: 矢口不知 | 来源:发表于2018-10-02 18:48 被阅读12次

认识是从实践中来,到实践中去,在实践中接受检验。

计算器是网页初学者经常做的了,我的这个例子用Vue来控制面板数据和计算操作,用tablev-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可以给元素指定一个ClassObjectClassObject的数组(以下统称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计算器出来的在线计算器样式就蛮好看的,按钮有渐变效果,这是我不会的。比起一章一章的啃文档,看一个感兴趣的例子源码学起来更快。于是乎右键 -> 检查。

chrome_inspect.png

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

chrome_inspect_css.png

参考: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;

}

参考:https://www.w3schools.com/css/css3_variables.asp

相关文章

  • 从做一个计算器出发学习CSS

    认识是从实践中来,到实践中去,在实践中接受检验。 计算器是网页初学者经常做的了,我的这个例子用Vue来控制面板数据...

  • 练习1. 网页计算器

    用HTML5、CSS3、Js做一个网页计算器,具体要求: 使用FLEX布局模式,运行环境为 Google Chro...

  • 网页设计与开发——HTML、CSS、JavaScript (王津

    网页设计与开发——html、css、javascript从网页制作实际出发,除了详细地介绍html页面制作、css...

  • 第六周学习笔记和总结

    这周做了三件事,用 js 写了一个简易计算器,加深对 js 的认识;学习了 css 的 flex 布局;我的网站域...

  • JavaWeb学习重点参考

    【前端部分】 >>首先,学习html和css后记得做一个小案例,快速熟悉标签使用。 >>学习JavaScript的...

  • 2018从学习出发

    新年伊始,当有些人还在迷茫;当有些人还在留恋假期;咱纵力人已开始为2018新的启航、新的梦想、新的目标开始展开新篇...

  • 设计模式——简单工厂模式

    计算器的例子 以面向过程的方式做一个简单实现 在本例子中,将通过一个简单的实现方式,做一个简单的加减乘除的计算器。...

  • JS学习——第十一天

    在上次学习的基础上,这次做一个综合应用,就是做一个简单的二进制计算器。 这个问题做了两天,共花费六个小时。 这篇不...

  • 简单计算器的做法

    首先我们要做好一个计算器的界面,主要用到html与css的知识设置一个简单的table表格,主要内容是计算器的数字...

  • 持续学习、从心出发

    年初总是雄心壮志的想要改变自己,然后给自己定了很多目标,自信满满地以为都可以完成,到年底来回过头检查,OMG!几...

网友评论

      本文标题:从做一个计算器出发学习CSS

      本文链接:https://www.haomeiwen.com/subject/nbjaoftx.html