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

xuhong 发布于2019-08-29 13:49 / 787人阅读

摘要：先来看看的样式吧这里值得一提的是我们的定义的是这样写的好处是它能适配不同类型的手机的界面宽度，毕竟现在市面上手机类型太多，我们不可能为每一款手机都设置一个宽度。其次，我们为什么要定义呢这样可以使我们的页面充满整个手机页面，不会滚动。

昨天用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的值就能完成整个页面了。

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

云服务器 GPU云服务器关于中文域名的销售技巧 css技巧手机密码锁的实现问题阿里云服务器密码技巧

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112725.html

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

摘要：先来看看的样式吧这里值得一提的是我们的定义的是这样写的好处是它能适配不同类型的手机的界面宽度，毕竟现在市面上手机类型太多，我们不可能为每一款手机都设置一个宽度。其次，我们为什么要定义呢这样可以使我们的页面充满整个手机页面，不会滚动。昨天用html5写了一个手机密码锁界面，中途碰到一些小问题，解决了后总结了一些小方法来和大家一起分享，如果有不成熟的地方希望大家指出来，大家有更好的方法我...

Yuanf 2019-08-21 17:40 评论0 收藏0
CSS及布局

摘要：经过半年的打磨，正式发布，主要是新增了一些常用组件，并使用命名，为接下来的微信小程序开发做好准备。这两种方式实现的瀑布流式布局均支持首屏和网页窗口大小改变时的列数自适应。主要是对于标准里的布局方式草案中的布局方式进行一些总结。一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看...

jaysun 2019-08-29 14:04 评论0 收藏0
CSS 黑魔法小技巧，让你少写不必要的JS，代码更优雅

摘要：利用用和来做表单即时校验需求让表单检验变得简单优雅，不需要写冗长的代码来校验设置样式丰富了表单元素，提供了类似等表单元素属性。不知细叶谁裁出，二月春风似剪刀。首先，你需要先了解一下渐变的使用技巧。之前不久，由于自己平时涉猎还算广泛，总结了一篇博客：这些JavaScript编程黑科技，装逼指南，高逼格代码，让你惊叹不已，没想到受到了大家的欢迎，有人希望能博主还能整理个 CSS 的一些黑...

Berwin 2019-08-01 17:42 评论0 收藏0
CSS 黑魔法小技巧，让你少写不必要的JS，代码更优雅

摘要：利用用和来做表单即时校验需求让表单检验变得简单优雅，不需要写冗长的代码来校验设置样式丰富了表单元素，提供了类似等表单元素属性。不知细叶谁裁出，二月春风似剪刀。首先，你需要先了解一下渐变的使用技巧。之前不久，由于自己平时涉猎还算广泛，总结了一篇博客：这些JavaScript编程黑科技，装逼指南，高逼格代码，让你惊叹不已，没想到受到了大家的欢迎，有人希望能博主还能整理个 CSS 的一些黑...

MASAILA 2019-08-21 16:46 评论0 收藏0