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


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 选择器、DOM操作、事件、动画
Nov 25 Javascript
Javascript中克隆一个数组的实现代码
Dec 06 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
Nov 17 Javascript
JavaScript字符串删除重复字符的方法
Dec 25 Javascript
深入理解ECMAScript的几个关键语句
Jun 01 Javascript
关于react-router/react-router-dom v4 history不能访问问题的解决
Jan 08 Javascript
使用JSON格式提交数据到服务端的实例代码
Apr 01 Javascript
vue实现一个炫酷的日历组件
Oct 08 Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
Apr 11 Javascript
vuex actions异步修改状态的实例详解
Nov 06 Javascript
Vue-axios-post数据后端接不到问题解决
Jan 09 Javascript
解决vue初始化项目一直停在downloading template的问题
Nov 09 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
Windows PHP5和Apache的安装与配置
2009/06/08 PHP
让PHP支持断点续传的源码
2010/05/16 PHP
Laravel使用Caching缓存数据减轻数据库查询压力的方法
2016/03/15 PHP
关于PHP转换超过2038年日期出错的问题解决
2017/06/28 PHP
屏蔽F1~F12的快捷键的js函数
2010/05/06 Javascript
Javascript中的变量使用说明
2010/05/18 Javascript
关于JavaScript对象的动态选择及遍历对象
2014/03/10 Javascript
jQuery实现瀑布流的取巧做法分享
2015/01/12 Javascript
js实现百度登录框鼠标拖拽效果
2017/03/07 Javascript
JS中cookie的使用及缺点讲解
2017/05/13 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
2017/12/12 Javascript
JavaScript中变量、指针和引用功能与操作示例
2018/08/04 Javascript
JSONP原理及应用实例详解
2018/09/13 Javascript
基于Node.js的大文件分片上传示例
2019/06/19 Javascript
使用apifm-wxapi快速开发小程序过程详解
2019/08/05 Javascript
Vue通过WebSocket建立长连接的实现代码
2019/11/05 Javascript
[03:55]2014DOTA2国际邀请赛 Fnatic经理采访赢DK在情理之中
2014/07/10 DOTA
Python中操作mysql的pymysql模块详解
2016/09/13 Python
shelve  用来持久化任意的Python对象实例代码
2016/10/12 Python
python判断一个对象是否可迭代的例子
2019/07/22 Python
Python Pandas数据中对时间的操作
2019/07/30 Python
Python 异常处理Ⅳ过程图解
2019/10/18 Python
通过Python扫描代码关键字并进行预警的实现方法
2020/05/24 Python
Python调用shell cmd方法代码示例解析
2020/06/18 Python
Python基于yaml文件配置logging日志过程解析
2020/06/23 Python
python 高阶函数简单介绍
2021/02/19 Python
iHerb台湾:维生素、保健品和健康产品
2018/01/31 全球购物
伦敦一家西班牙童装精品店:La Coqueta
2018/02/02 全球购物
城市轨道专业个人求职信范文
2013/09/23 职场文书
物理研修随笔感言
2014/02/14 职场文书
消防工作实施方案
2014/06/09 职场文书
理财计划书
2014/08/14 职场文书
2014普法依法治理工作总结
2014/12/18 职场文书
Html5通过数据流方式播放视频的实现
2021/04/27 HTML / CSS
MySQL 使用自定义变量进行查询优化
2021/05/14 MySQL
电脑只能进入安全模式无法正常启动的解决办法
2022/04/08 数码科技