昨天用html5写了一个手机密码锁界面，中间遇到了一些小问题，解决了一些小方法分享给大家，如果有不成熟的地方希望大家可以指出来，有更好的方法也乐于听取大家的意见~好了，话不多说，先附上页面截图，大家分析分析~这是一个很简单的手机密码锁界面主要由3部分组成。我先在html里面建了一个大盒子锁，覆盖整个界面。我定义头部为lock_hd，中间部分为lock_bd，底部为lock_ft。一个框架已经建立。友情提示，最好使用BEM的命名方式~好了，接下来就是我们的重点内容了。我们来看看锁的css样式。这里值得一提的是，我们的宽度定义为10rem。这样写的好处是可以适配不同类型手机的界面宽度。毕竟市面上的手机种类太多了。我们不可能为每部手机都设置一个宽度。二、为什么要定义overflow-x:hidden？这使得我们的页面无需滚动即可填满整个电话页面。接下来，看中间部分。你可以看到我在盒子的中间部分定义了另一个盒子。这个新框是我们数字键所在的位置。这样更有利于我们后面对号码的定位。中间部分的数字样式比较简单，附上一张图，先过一遍吧。接下来就是本文的重头戏了~重点内容lo??ck_circle--last就是最后一个数字0，我们要和其他数字区分开来，而下面这句话是因为我把1到9的所有类名都定义为lock_circle__item，因为上面我让每个数字的margin-right都是1rem，但是如果这样的话，far边的3、6、9会是这样的：这些数字的排列困扰了我很久一时间，甚至诞生了为每个数字单独定义一个框的想法，但这显然是不正确的。后来跟同学学了，只需要在下面加上这句就可以了~`.lock_circle__item:nth-child(3n){margin-right:0;}`我们让margin-right为0，则排列为neat~至于lock_ft，只需要定义两个框在左边浮动，设置margin的值就可以完成整个页面了。感谢您阅读我的文章。不知道这篇文章能不能帮到你，但我会继续努力，争取尽快写出大家喜欢的文章^_^
