關于寫手機密碼鎖頁面的css技巧

xuhong 發布于2019-08-29 13:49 / 788人閱讀

摘要：先來看看的樣式吧這里值得一提的是我們的定義的是這樣寫的好處是它能適配不同類型的手機的界面寬度，畢竟現在市面上手機類型太多，我們不可能為每一款手機都設置一個寬度。其次，我們為什么要定義呢這樣可以使我們的頁面充滿整個手機頁面，不會滾動。

昨天用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技巧手機密碼鎖的實現問題阿里云服務器密碼技巧

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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