微信小程序框架的頁面布局代碼
更新時(shí)間：2019年08月17日 08:34:33 作者：陶士涵的菜地
這篇文章主要介紹了微信小程序框架的頁面布局代碼，代碼簡單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
1.首先下載小程序開發(fā)工具
2.小程序中的wxml就相當(dāng)于html , wxss就相當(dāng)于css
3.布局和html布局幾乎一樣
4.寬度使用百分比
5.input框里的文字上下居中是用padding撐出來的
6.最下面的文字靠右，view相當(dāng)于一個(gè)塊元素，設(shè)定寬度后，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;
總結(jié)
以上所述是小編給大家介紹的微信小程序框架的頁面布局代碼，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時(shí)回復(fù)大家的！
相關(guān)文章
在jsp中，我們可以用el表達(dá)式直接獲取basePath，但是在單獨(dú)js文件中不能用el表達(dá)式，下面與大家分享下js文件中如何獲取basePath，感興趣的朋友可以參考下2013-07-07
詳解JavaScript調(diào)用棧、尾遞歸和手動優(yōu)化
本篇文章主要介紹了詳解JavaScript調(diào)用棧、尾遞歸和手動優(yōu)化，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
JS前端面試必備——基本排序算法原理與實(shí)現(xiàn)方法詳解【插入/選擇/歸并/冒泡/快速排序】
這篇文章主要介紹了JS前端面試基本排序算法原理與實(shí)現(xiàn)方法,結(jié)合實(shí)例形式詳細(xì)分析了JS常見的基本排序算法相關(guān)原理、實(shí)現(xiàn)方法、時(shí)間復(fù)雜度及操作注意事項(xiàng),需要的朋友可以參考下2020-02-02
微信小程序中時(shí)間戳和日期的相互轉(zhuǎn)換問題
這篇文章主要介紹了微信小程序中時(shí)間戳和日期的相互轉(zhuǎn)換問題，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-07-07
js與jquery獲取input輸入框中的值實(shí)例講解
在本篇文章里小編給大家整理了關(guān)于js與jquery獲取input輸入框中的值實(shí)例講解，需要的朋友們可以學(xué)習(xí)參考下。2020-02-02
JavaScript中變量聲明有var和沒var的區(qū)別示例介紹
在函數(shù)內(nèi)部，有var和沒var聲明的變量是不一樣的。有var聲明的是局部變量，沒var的，聲明的全局變量，所以可以借此向外暴露接口東東2014-09-09
用eval方法，把傳進(jìn)來的這個(gè)方法名所代表的方法當(dāng)作一個(gè)對象來賦值給method1的func屬性,需要的朋友可以參考下2014-04-04
使用原生JavaScript實(shí)現(xiàn)放大鏡效果
這篇文章主要為大家詳細(xì)介紹了如何使用原生JavaScript實(shí)現(xiàn)放大鏡效果（可自由大小適配），文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下2023-03-03
使用base64對圖片的二進(jìn)制進(jìn)行編碼并用ajax進(jìn)行顯示
這篇文章主要介紹了使用base64對圖片的二進(jìn)制進(jìn)行編碼并用ajax進(jìn)行顯示的相關(guān)資料,需要的朋友可以參考下2017-01-01
JavaScript設(shè)計(jì)模型Iterator實(shí)例解析
這篇文章主要介紹了JavaScript設(shè)計(jì)模型Iterator實(shí)例解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-01-01