grid實戰之微信錢包 騰訊服務介面

2021-09-14 04:55:01 字數 2021 閱讀 3803

css3網格布局是讓開發人員設計乙個網格並將內容放在這些網格內。而不是使用浮動製作乙個網格，實際上是你將乙個元素宣告為乙個網格容器，並把元素內容置於網格中。

有一些瀏覽器是不支援網格布局的，可以從caniuse這個**檢視各個瀏覽器是否支援這些css3中的新屬性,綠色表示支援，紅色表示不支援，另一種顏色表示部分支援，如圖（檢視各個瀏覽器是否支援grid布局）：

通過下面這張可以了解網格布局的基本概念

頁面布局：

信用卡還款


微粒貸借錢


手機充值


理財通 


生活繳費


q幣充值


城市服務
公共樣式css:

* 


html, body 


body 


.container


.page__hd 


.page__title 


.grids 


.grid
在grids中設定網格布局，display:grid;grid-template-columns屬性設定網格布局中每列的寬度，grid-template-rows屬性設定網格布局中每行的高度，由於在head中匯入了**的flexible，所以設定寬高時用了相對單位rem，grid-template-columns: repeat(3,3.33333333rem)相當於grid-template-columns: 3.33333333rem 3.33333333rem 3.33333333rem,grid-template-rows: repeat(3,3.33333333rem)同理；

/* author: 倪子紅


date: 17-11-28 */


.grids 


.grids:before 


.grids:after 


.grid 


.grid:before 


.grid:after
有的手機存在「1px問題」，可以通過transform和transform-origin屬性來解決這個問題

我的所有圖示是從iconfont這個**得到的，下面也放出圖示的樣式

@font-face 


.iconfont 


.icon-xinyongkahuankuan 


.icon-qq 


.icon-love 


.icon-shenghuojiaofei 


.icon-chengshifuwu 


.icon-licaitong 


.icon-dibugeicon_jieqian 


.icon-jieqian 


.icon-xinyongkahuankuan:before 


.icon-dibugeicon_jieqian:before 


.icon-love:before 


.icon-shenghuojiaofei:before 


.icon-chengshifuwu:before 


.icon-licaitong:before 


.icon-jieqian:before
效果圖：

如果有錯誤或者不理解的地方，希望可以指出和交流，謝謝！

微信小程式實戰入門

一 簡介 參考 二 工程 參考 quickstart basic file.html 工具設計介面可調整機型 顯示百分比 資料連線方式。三 發布 個人上線了乙個木材材積計算器 兩天做的，有web前後端經驗很容易入手，有增加 共計 記錄功能 審核很快，一天審核結束 後來發現已經之前有公司做了，尷尬，而...

微信公眾平台整合開發實戰教程 微信開發教程

課程講師 57code 課程分類 asp.net mvc 適合人群 中級 課時數量 29課時 用到技術 深入mvc開發模式 c 核心語言特性 c 核心語言特性 二 檢視引擎razor 1.1.1.背景分析 1.1.2.適用範圍 對asp.net mvc開發有興趣的同學 有志進入開發行業的所有同學 1...

微信小程式開發之微信支付（三）微信下單

在發起支付之前，後台會生成商戶訂單，呼叫統一下單api，得到預支付資訊。我是使用的是這個sdk com.github.binarywang.wxpay.bean.notify.wxpayordernotifyresult 統一下單返回結果類 com.github.binarywang.wxpay.b...