微信小程序框架的页面布局代码


Posted in Javascript onAugust 17, 2019

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;

微信小程序框架的页面布局代码

总结

以上所述是小编给大家介绍的微信小程序框架的页面布局代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
javascript 限制输入脚本大全
Nov 03 Javascript
js 手机号码合法性验证代码集合
Sep 29 Javascript
jquery右下角弹出提示框示例代码
Oct 08 Javascript
javascript 按键事件(兼容各浏览器)
Dec 20 Javascript
微信JS接口汇总及使用详解
Jan 09 Javascript
jQuery根据元素值删除数组元素的方法
Jun 24 Javascript
Angular.js 实现数字转换汉字实例代码
Jul 14 Javascript
详解如何在Angular中快速定位DOM元素
May 17 Javascript
vue展示dicom文件医疗系统的实现代码
Aug 27 Javascript
详解基于Vue/React项目的移动端适配方案
Aug 23 Javascript
vue实现select下拉显示隐藏功能
Sep 30 Javascript
100行代码实现vue表单校验功能(小白自编)
Nov 19 Javascript
vue实现滑动到底部加载更多效果
Oct 27 #Javascript
vue实现页面滚动到底部刷新
Aug 16 #Javascript
vue-mugen-scroll组件实现pc端滚动刷新
Aug 16 #Javascript
JavaScript的查询机制LHS和RHS解析
Aug 16 #Javascript
jquery树形插件zTree高级使用详解
Aug 16 #jQuery
微信小程序云开发如何实现数据库自动备份实现
Aug 16 #Javascript
jQuery zTree树插件的使用教程
Aug 16 #jQuery
You might like
php生成短网址/短链接原理和用法实例分析
2020/05/29 PHP
一个JS翻页效果
2007/07/23 Javascript
jQuery EasyUI中对表格进行编辑的实现代码
2010/06/10 Javascript
javascript 学习笔记(onchange等)
2010/11/14 Javascript
js Html结构转字符串形式显示代码
2011/11/15 Javascript
JavaScript之编码规范 推荐
2012/05/23 Javascript
jquery、js操作checkbox全选反选
2014/03/12 Javascript
用box固定长宽实现图片自动轮播js代码
2014/06/09 Javascript
浅谈Javascript如何实现匀速运动
2014/12/19 Javascript
浅谈JS的基础类型与引用类型
2016/09/13 Javascript
微信小程序 数据访问实例详解
2016/10/08 Javascript
探索Vue.js component内容实现
2016/11/03 Javascript
详解http访问解析流程原理
2017/10/18 Javascript
vue项目中使用scss的方法步骤
2019/05/16 Javascript
[01:07:53]RNG vs VG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
[01:28]国服启动器接入蒸汽平台操作流程视频
2021/03/11 DOTA
python 简单搭建阻塞式单进程,多进程,多线程服务的实例
2017/11/01 Python
用python编写第一个IDA插件的实例
2018/05/29 Python
python自制包并用pip免提交到pypi仅安装到本机【推荐】
2019/06/03 Python
python3 实现爬取TOP500的音乐信息并存储到mongoDB数据库中
2019/08/24 Python
python破解bilibili滑动验证码登录功能
2019/09/11 Python
python实现统计代码行数的小工具
2019/09/19 Python
python+adb命令实现自动刷视频脚本案例
2020/04/23 Python
python如何代码集体右移
2020/07/20 Python
socket.io 和canvas 实现的共享画板功能
2019/05/22 HTML / CSS
关于webview适配H5上传照片或者视频文件的方法
2020/11/04 HTML / CSS
智利最大的网上商店:Linio智利
2016/11/24 全球购物
美体小铺英国官网:The Body Shop英国
2017/01/24 全球购物
美国在线眼镜店:GlassesShop
2018/11/15 全球购物
2013年高中生自我评价
2013/10/23 职场文书
美德好少年事迹材料
2014/01/19 职场文书
百年校庆节目主持词
2014/03/27 职场文书
村道德模范事迹材料
2014/08/28 职场文书
庆祝教师节活动总结
2015/03/23 职场文书
python使用matplotlib绘制图片时x轴的刻度处理
2021/08/30 Python
CPU不支持Windows11系统怎么办
2021/11/21 数码科技