国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

Yuanf / 1068人閱讀

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

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

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

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

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

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

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

接下來本文最重要的部分來啦~

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

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

當(dāng)初這些數(shù)字的排列問題困擾了我好久，甚至生出了把每個(gè)數(shù)字都定義一個(gè)多帶帶的盒子的想法，但這顯然是不正確的。后來請(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)取早日寫出讓大家點(diǎn)贊的文章^_^

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

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

相關(guān)文章

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

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

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

  • CSS及布局

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

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

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

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

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

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

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

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

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

0條評(píng)論

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