1.首先下載小程序開發工具

2.小程序中的wxml就相當于html , wxss就相當于css

3.布局和html布局幾乎一樣

4.寬度使用百分比

5.input框里的文字上下居中是用padding撐出來的

6.最下面的文字靠右，view相當于一個塊元素，設定寬度后，text-align右對齊

簡單的測試界面如圖

index.wxml代碼

<!--index.wxml--> <view class="container"> <text class="indexTitle">添加郵箱賬號</text> <view class="indexInput"><input maxlength="10" placeholder="郵箱地址" /> </view> <view class="indexInput"><input maxlength="10" placeholder="密碼" /> </view> <view class="indexButton"> <button type="primary"> 登錄 </button> </view> <view class="indexNologin"> <a href=""> 無法登錄 </a> </view> </view>

index.wxss代碼

/**index.wxss**/ .indexTitle{color: #ccc;margin:15px 0;font-size: 20px; } .indexInput{margin-bottom: 15px;border: 1px solid #ccc;padding:11px 4px;width: 90%;border-radius: 4px; } .indexButton{padding:0 4px;width: 93%; } .indexNologin{color: #049c4d;font-size: 14px;margin-top: 10px;text-align: right;width: 93%; }

?

?

轉載于:https://www.cnblogs.com/taoshihan/p/11367118.html

總結

以上是生活随笔為你收集整理的[小程序]小程序框架的简单页面布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。