關於寫手機密碼鎖頁面的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的值就能完成整個頁面了。

感謝你們閱讀個人文章，不知道這篇文章能不能對各位產生點幫助，可是我會繼續努力噠，爭取早日寫出讓你們點讚的文章^_^