一、前言
前端没有太难的地方,只是需要不断熟练而已,所以从本文开始,将试着带大家使用纯js、html、css这三个基石,来实现前端一系列看起来很美观的东西。
通过亲手将这些东西实现出来,可以让你更快理解到前端开发的精髓。
而本文要实现的是用的最多的一个控件:按钮。
二、代码实现
对于正常开发而言,一般都是使用的多文件,但本教材为了方便大家好看,都直接将其写在了一个html文件中。
用的编辑器为vscode
,前面文章中也已经说过了,这里不再赘述。
首先创建一个button.html
的文件,然后用vscode打开它,输入!
,就会弹出提示,按Enter
后,就会出现下面这样的默认代码:
按钮本身html是有一个现成的按钮标签的,但我这里先不用,直接使用啥都没有的div
标签:
首先写好style
标签,并在div
标签上写好类,之后就可以通过类选择器选中它,给它应用样式,这里暂时只写了宽高的样式。
下面的script
标签,则用于后面写控制代码的,这里先不用管。
1.按钮样式
首先第一步是让我们按钮变的好看起来,最直接的方式就是改变它的背景色和字体颜色:
背景色是background-color
,字体颜色是color
,通过十六进制颜色数值进行设置,然后刷新一下网页,就可以看到这个按钮是不是好看起来了?
你可能会问我这些好看的颜色怎么来的,如果你没有特别好的配色天赋,那么最好的方式就是直接看其它人是怎么用的,然后直接将其颜色复制过来即可。
比如我用的屏幕截图工具snipaste
就带有取色工具,看到好看的网页、软件,就直接取色将其保存下来即可,后面想用的时候就用,很方便。
说会正题,下一步我们还可以让它变成圆角,更好看!
这个border-radius
属性就是用来设置四个角圆的半径的,这里为5px
,注意px
意思是像素。
如果你想让这个标签完全变成一个圆,那就可以让标签的宽高相等,比如都为20px
,然后让border-radius
为10px
,也就是四个角的圆半径刚好为正方形的一半,这样就成为一个圆了。
除此之外,可能我们还想要让它在我们鼠标放在上面时,自动改变颜色,那么只需要选中它的伪选择器hover
即可:
此时当鼠标悬浮在它上方时,就会自动更改为伪选择器中的样式,这里重新设置了它的背景色与字体色。
除此之外,还有鼠标的样式,一般我们可能更喜欢使用手指样式的鼠标点击按钮:
加上一个cursor
即可,pointer
就是一根手伸出的样式,由于我截图截不到,就不演示了,可以自己敲下代码试一试。
还有我们会发现,我们的文字并不居中,一点都不好看,那么可以添加下面两个样式:
其中text-align
设置对其方式的,center
为水平居中,line-height
是用来设置行高的,只要让文本的行高等于标签的高度,也就是25px
,那就可以实现垂直居中。
还有就是我们鼠标可以选中按钮上的文本,有些时候可能感觉不舒服:
这也是可以取消掉的:
user-select: none;
最后还有它的边框,可以明显看到它外面似乎有什么东西一样,不能紧贴浏览器窗口,这时候直接添加这段代码即可:
这段代码的作用是取消所有标签的外边距、内边距、已经盒子大小收缩问题的,现在不懂也没关系,反正记住每次都写上就可以了。
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
此时你就看到按钮已经可以紧贴浏览器了。
最后还可以再给它设置一个边框,可能更好看一点: