成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

關(guān)于寫(xiě)手機(jī)密碼鎖頁(yè)面的css技巧

Yuanf / 1093人閱讀

摘要：先來(lái)看看的樣式吧這里值得一提的是我們的定義的是這樣寫(xiě)的好處是它能適配不同類(lèi)型的手機(jī)的界面寬度，畢竟現(xiàn)在市面上手機(jī)類(lèi)型太多，我們不可能為每一款手機(jī)都設(shè)置一個(gè)寬度。其次，我們?yōu)槭裁匆x呢這樣可以使我們的頁(yè)面充滿(mǎn)整個(gè)手機(jī)頁(yè)面，不會(huì)滾動(dòng)。

昨天用html5寫(xiě)了一個(gè)手機(jī)密碼鎖界面，中途碰到一些小問(wèn)題，解決了后總結(jié)了一些小方法來(lái)和大家一起分享，如果有不成熟的地方希望大家指出來(lái)，大家有更好的方法我也很樂(lè)意傾聽(tīng)哦~好啦，不說(shuō)那么多啦，先附上一張頁(yè)面截圖，我們?cè)賮?lái)分析分析吧~

這是一個(gè)很簡(jiǎn)單的手機(jī)密碼鎖界面，主要由3部分組成，我在html里先建了一個(gè)大盒子lock囊括了整個(gè)界面，把頭部定義為lock_hd,中間的部分定義為lock_bd，底下的部分定義為lock_ft，這樣就先大概地建立了一個(gè)框架。友情提示一下，大家最好由BEM的命名方式哦~

好啦，接下來(lái)就是我們的重點(diǎn)內(nèi)容啦。
先來(lái)看看lock的css樣式吧

這里值得一提的是我們的width定義的是10rem,這樣寫(xiě)的好處是它能適配不同類(lèi)型的手機(jī)的界面寬度，畢竟現(xiàn)在市面上手機(jī)類(lèi)型太多，我們不可能為每一款手機(jī)都設(shè)置一個(gè)寬度。其次，我們?yōu)槭裁匆xoverflow-x: hidden呢？這樣可以使我們的頁(yè)面充滿(mǎn)整個(gè)手機(jī)頁(yè)面，不會(huì)滾動(dòng)。

接下來(lái)看看中間部分，可以看到，我在中間部分的盒子里又定義了一個(gè)盒子，這個(gè)新盒子就是我們的數(shù)字鍵所在的地方啦，這樣做會(huì)更利于我們后面關(guān)于給數(shù)字的定位。

中間部分的數(shù)字樣式還是挺簡(jiǎn)單的，附圖一張，咱們就算過(guò)了。

接下來(lái)本文最重要的部分來(lái)啦~

重點(diǎn)內(nèi)容

lock_circle--last是最后的數(shù)字0，我們要把它和其他數(shù)字區(qū)分開(kāi)來(lái)，而下面這句呢，是因?yàn)槲野?~9的類(lèi)名都定義為lock_circle__item，因?yàn)樵谏厦嫖易屆恳粋€(gè)數(shù)字的margin-right都為1rem,但是如果這樣的話(huà)最邊上的3，6，9就會(huì)像這樣：

當(dāng)初這些數(shù)字的排列問(wèn)題困擾了我好久，甚至生出了把每個(gè)數(shù)字都定義一個(gè)多帶帶的盒子的想法，但這顯然是不正確的。后來(lái)請(qǐng)教了同學(xué)才知道，我只要在下面加上這一句就好啦~
`
.lock_circle__item:nth-child(3n){

margin-right: 0;

}
`
我們讓排列為3的倍數(shù)的元素的margin-right為零，排列就能整齊啦~

至于lock_ft就只要定義兩個(gè)盒子都浮動(dòng)在左邊，設(shè)置一下margin的值就能完成整個(gè)頁(yè)面了。

感謝大家閱讀我的文章，不知道這篇文章能不能對(duì)各位產(chǎn)生點(diǎn)幫助，但是我會(huì)繼續(xù)努力噠，爭(zhēng)取早日寫(xiě)出讓大家點(diǎn)贊的文章^_^

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/89845.html

相關(guān)文章

  • 關(guān)于寫(xiě)手機(jī)密碼鎖頁(yè)面的css技巧

    摘要：先來(lái)看看的樣式吧這里值得一提的是我們的定義的是這樣寫(xiě)的好處是它能適配不同類(lèi)型的手機(jī)的界面寬度，畢竟現(xiàn)在市面上手機(jī)類(lèi)型太多，我們不可能為每一款手機(jī)都設(shè)置一個(gè)寬度。其次，我們?yōu)槭裁匆x呢這樣可以使我們的頁(yè)面充滿(mǎn)整個(gè)手機(jī)頁(yè)面，不會(huì)滾動(dòng)。 昨天用html5寫(xiě)了一個(gè)手機(jī)密碼鎖界面，中途碰到一些小問(wèn)題，解決了后總結(jié)了一些小方法來(lái)和大家一起分享，如果有不成熟的地方希望大家指出來(lái)，大家有更好的方法我...

    xuhong 評(píng)論0 收藏0

  • CSS及布局

    摘要：經(jīng)過(guò)半年的打磨，正式發(fā)布，主要是新增了一些常用組件，并使用命名，為接下來(lái)的微信小程序開(kāi)發(fā)做好準(zhǔn)備。這兩種方式實(shí)現(xiàn)的瀑布流式布局均支持首屏和網(wǎng)頁(yè)窗口大小改變時(shí)的列數(shù)自適應(yīng)。主要是對(duì)于標(biāo)準(zhǔn)里的布局方式草案中的布局方式進(jìn)行一些總結(jié)。 一勞永逸的搞定 flex 布局 尋根溯源話(huà)布局 一切都始于這樣一個(gè)問(wèn)題：怎樣通過(guò) CSS 簡(jiǎn)單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時(shí)居中。記得剛開(kāi)始學(xué)習(xí) CSS 的時(shí)候，看...

    jaysun 評(píng)論0 收藏0

  • CSS 黑魔法小技巧，讓你少寫(xiě)不必要的JS，代碼更優(yōu)雅

    摘要：利用用和來(lái)做表單即時(shí)校驗(yàn)需求讓表單檢驗(yàn)變得簡(jiǎn)單優(yōu)雅，不需要寫(xiě)冗長(zhǎng)的代碼來(lái)校驗(yàn)設(shè)置樣式豐富了表單元素，提供了類(lèi)似等表單元素屬性。不知細(xì)葉誰(shuí)裁出，二月春風(fēng)似剪刀。首先，你需要先了解一下漸變的使用技巧。 之前不久，由于自己平時(shí)涉獵還算廣泛，總結(jié)了一篇博客：這些JavaScript編程黑科技，裝逼指南，高逼格代碼，讓你驚嘆不已，沒(méi)想到受到了大家的歡迎，有人希望能博主還能整理個(gè) CSS 的一些黑...

    Berwin 評(píng)論0 收藏0

  • CSS 黑魔法小技巧，讓你少寫(xiě)不必要的JS，代碼更優(yōu)雅

    摘要：利用用和來(lái)做表單即時(shí)校驗(yàn)需求讓表單檢驗(yàn)變得簡(jiǎn)單優(yōu)雅，不需要寫(xiě)冗長(zhǎng)的代碼來(lái)校驗(yàn)設(shè)置樣式豐富了表單元素，提供了類(lèi)似等表單元素屬性。不知細(xì)葉誰(shuí)裁出，二月春風(fēng)似剪刀。首先，你需要先了解一下漸變的使用技巧。 之前不久，由于自己平時(shí)涉獵還算廣泛，總結(jié)了一篇博客：這些JavaScript編程黑科技，裝逼指南，高逼格代碼，讓你驚嘆不已，沒(méi)想到受到了大家的歡迎，有人希望能博主還能整理個(gè) CSS 的一些黑...

    MASAILA 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<