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

昨天用html5写了一个手机密码锁界面，中途碰到一些小问题，解决了后总结了一些小方法来和你们一块儿分享，若是有不成熟的地方但愿你们指出来，你们有更好的方法我也很乐意倾听哦~好啦，不说那么多啦，先附上一张页面截图，咱们再来分析分析吧~

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

好啦，接下来就是咱们的重点内容啦。
先来看看lock的css样式吧

这里值得一提的是咱们的width定义的是10rem,这样写的好处是它能适配不一样类型的手机的界面宽度，毕竟如今市面上手机类型太多，咱们不可能为每一款手机都设置一个宽度。其次，咱们为何要定义overflow-x: hidden呢？这样可使咱们的页面充满整个手机页面，不会滚动。

---

接下来看看中间部分，能够看到，我在中间部分的盒子里又定义了一个盒子，这个新盒子就是咱们的数字键所在的地方啦，这样作会更利于咱们后面关于给数字的定位。

中间部分的数字样式仍是挺简单的，附图一张，我们就算过了。

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

---

• 重点内容

lock_circle--last是最后的数字0，咱们要把它和其余数字区分开来，而下面这句呢，是由于我把1~9的类名都定义为lock_circle__item，由于在上面我让每个数字的margin-right都为1rem,可是若是这样的话最边上的3，6，9就会像这样：

当初这些数字的排列问题困扰了我很久，甚至生出了把每一个数字都定义一个单独的盒子的想法，但这显然是不正确的。后来请教了同窗才知道，我只要在下面加上这一句就好啦~
`
.lock_circle__item:nth-child(3n){

margin-right: 0;

}
`
咱们让排列为3的倍数的元素的margin-right为零，排列就能整齐啦~

至于lock_ft就只要定义两个盒子都浮动在左边，设置一下margin的值就能完成整个页面了。

感谢你们阅读个人文章，不知道这篇文章能不能对各位产生点帮助，可是我会继续努力哒，争取早日写出让你们点赞的文章^_^