关于写手机密码锁页面的css技巧

昨天用html5写了一个手机密码锁界面&＃xff0c;中途碰到一些小问题&＃xff0c;解决了后总结了一些小方法来和大家一起分享&＃xff0c;如果有不成熟的地方希望大家指出来&＃xff0c;大家有更好的方法我也很乐意倾听哦~好啦&＃xff0c;不说那么多啦&＃xff0c;先附上一张页面截图&＃xff0c;我们再来分析分析吧~

这是一个很简单的手机密码锁界面&＃xff0c;主要由3部分组成&＃xff0c;我在html里先建了一个大盒子lock囊括了整个界面&＃xff0c;把头部定义为lock_hd,中间的部分定义为lock_bd&＃xff0c;底下的部分定义为lock_ft&＃xff0c;这样就先大概地建立了一个框架。友情提示一下&＃xff0c;大家最好由BEM的命名方式哦~

好啦&＃xff0c;接下来就是我们的重点内容啦。
先来看看lock的css样式吧

这里值得一提的是我们的width定义的是10rem,这样写的好处是它能适配不同类型的手机的界面宽度&＃xff0c;毕竟现在市面上手机类型太多&＃xff0c;我们不可能为每一款手机都设置一个宽度。其次&＃xff0c;我们为什么要定义overflow-x: hidden呢&＃xff1f;这样可以使我们的页面充满整个手机页面&＃xff0c;不会滚动。

接下来看看中间部分&＃xff0c;可以看到&＃xff0c;我在中间部分的盒子里又定义了一个盒子&＃xff0c;这个新盒子就是我们的数字键所在的地方啦&＃xff0c;这样做会更利于我们后面关于给数字的定位。

中间部分的数字样式还是挺简单的&＃xff0c;附图一张&＃xff0c;咱们就算过了。

接下来本文最重要的部分来啦~

重点内容

lock_circle--last是最后的数字0&＃xff0c;我们要把它和其他数字区分开来&＃xff0c;而下面这句呢&＃xff0c;是因为我把1~9的类名都定义为lock_circle__item&＃xff0c;因为在上面我让每一个数字的margin-right都为1rem,但是如果这样的话最边上的3&＃xff0c;6&＃xff0c;9就会像这样&＃xff1a;