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


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 相关文章推荐
jQuery 表格插件整理
Apr 27 Javascript
在JQuery dialog里的服务器控件 事件失效问题
Dec 08 Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
Aug 20 Javascript
JavaScript通过字符串调用函数的实现方法
Mar 18 Javascript
JavaScript控制网页层收起和展开效果的方法
Apr 15 Javascript
jQuery模仿京东/天猫商品左侧分类导航菜单效果
Jun 29 Javascript
Mongoose经常返回e11000 error的原因分析
Mar 29 Javascript
自定义vue全局组件use使用、vuex的使用详解
Jun 14 Javascript
JS实现全屏预览F11功能的示例代码
Jul 23 Javascript
javascript定时器的简单应用示例【控制方块移动】
Jun 17 Javascript
angular inputNumber指令输入框只能输入数字的实现
Dec 03 Javascript
vue之封装多个组件调用同一接口的案例
Aug 11 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
利用static实现表格的颜色隔行显示的代码
2007/09/02 PHP
PHP字符串处理的10个简单方法
2010/06/30 PHP
php中随机显示图片的函数代码
2011/06/23 PHP
Yii把CGridView文本框换成下拉框的方法
2014/12/03 PHP
PHP远程连接oracle数据库操作实现方法图文详解
2019/04/11 PHP
php5对象复制、clone、浅复制与深复制实例详解
2019/08/14 PHP
学习ExtJS Column布局
2009/10/08 Javascript
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
2010/08/27 Javascript
用js来解决ajax读取页面乱码
2010/11/28 Javascript
JavaScript制作windows经典扫雷小游戏
2015/03/31 Javascript
jQuery代码实现发展历程时间轴特效
2015/07/30 Javascript
简述jQuery ajax的执行顺序
2016/01/05 Javascript
vue中element-ui表格缩略图悬浮放大功能的实例代码
2018/06/26 Javascript
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
2020/09/12 Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
2020/09/25 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
2021/02/05 Javascript
Python单体模式的几种常见实现方法详解
2017/07/28 Python
Java实现的执行python脚本工具类示例【使用jython.jar】
2018/03/29 Python
tensorflow实现训练变量checkpoint的保存与读取
2020/02/10 Python
python函数调用,循环,列表复制实例
2020/05/03 Python
Harman Audio官方商店:购买JBL、Harman Kardon、Infinity和AKG
2019/12/05 全球购物
艺术应用与设计个人的自我评价
2013/11/23 职场文书
大学生自我鉴定范文
2013/12/28 职场文书
积极分子思想汇报
2014/01/04 职场文书
写给老婆的检讨书
2014/02/21 职场文书
药学职务聘任书
2014/03/29 职场文书
买房委托公证书
2014/04/08 职场文书
经典禁毒标语
2014/06/16 职场文书
结对共建协议书
2014/08/20 职场文书
干部对照检查材料范文
2014/08/26 职场文书
幼儿园大班毕业评语
2014/12/31 职场文书
个人先进事迹总结
2015/02/26 职场文书
公司开业致辞
2015/07/29 职场文书
中学音乐课教学反思
2016/02/18 职场文书
初中思品教学反思
2016/02/20 职场文书
小学语文教学反思范文
2016/03/03 职场文书