微信小程序框架的頁面布局代碼
更新時(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右對(duì)齊
簡單的測試界面如圖
index.wxml代碼
<!--index.wxml--> <view class="container"> <text class="indexTitle">添加郵箱賬號(hào)</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é)
以上所述是小編給大家介紹的微信小程序框架的頁面布局代碼，希望對(duì)大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！
相關(guān)文章
同C# 、Java一樣我們可以手工調(diào)用垃圾回收程序，但是由于其消耗大量資源，而且我們手工調(diào)用的不會(huì)比瀏覽器判斷的準(zhǔn)確，所以不推薦手工調(diào)用垃圾回收2013-10-10
原生js 封裝get ,post, delete 請(qǐng)求的實(shí)例
下面小編就為大家?guī)硪黄鷍s 封裝get ,post, delete 請(qǐng)求的實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
JS中循環(huán)遍歷數(shù)組的幾種常用方式總結(jié)
文章主要總結(jié)了?JS?中循環(huán)遍歷數(shù)組的十二種常用方式,包括?for?循環(huán)（普通和優(yōu)化版）、forEach、map、filter、for…of、for…in、find、findIndex、some、every、reduce?等,并對(duì)它們的特點(diǎn)、語法、優(yōu)缺點(diǎn)、適用場景及返回值等進(jìn)行了詳細(xì)說明,需要的朋友可以參考下2025-01-01
這篇文章為大家詳細(xì)主要介紹了js實(shí)現(xiàn)帶箭頭的進(jìn)度流程，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
阻塞渲染就是在頁?中我們通常會(huì)引?外部?件，?瀏覽器在解析HTML頁?是從上到下依次解析、渲染，如果<head>中引?了?個(gè)a.js?件，?這個(gè)?件很?或者有問題，需要2秒加載，那么瀏覽器會(huì)停?渲染頁?，2秒后加載完成才會(huì)繼續(xù)渲染，這個(gè)就是阻塞2022-06-06
JavaScript 原型鏈學(xué)習(xí)總結(jié)
在JavaScript中，一切都是對(duì)像，函數(shù)是第一型2010-10-10
JavaScript中document.querySelector函數(shù)用法介紹
這篇文章主要給大家介紹了關(guān)于JavaScript中document.querySelector函數(shù)用法的相關(guān)資料,document.querySelector是JavaScript中的一個(gè)內(nèi)置方法,用于通過CSS選擇器選擇文檔中的第一個(gè)匹配元素,需要的朋友可以參考下2023-08-08
原生js實(shí)現(xiàn)的貪吃蛇網(wǎng)頁版游戲完整實(shí)例
這篇文章主要介紹了原生js實(shí)現(xiàn)的貪吃蛇網(wǎng)頁版游戲完整實(shí)例,可實(shí)現(xiàn)自主選擇游戲難度進(jìn)行貪吃蛇游戲的功能,涉及javascript鍵盤事件及頁面元素的操作技巧,需要的朋友可以參考下2015-05-05
這篇文章主要為大家詳細(xì)介紹了bootstrap網(wǎng)頁框架的使用方法，感興趣的小伙伴們可以參考一下2016-05-05
學(xué)習(xí)Javascript閉包（Closure）知識(shí)
這篇文章主要介紹了學(xué)習(xí)Javascript閉包（Closure）知識(shí)的相關(guān)資料,需要的朋友可以參考下2016-08-08