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


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 相关文章推荐
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
Apr 19 Javascript
基于jQuery选择器的整理集合
Apr 26 Javascript
js根据日期判断星座的示例代码
Jan 23 Javascript
js数组中如何随机取出一个值
Jun 13 Javascript
JavaScript设计模式之外观模式介绍
Dec 28 Javascript
jQuery结合HTML5制作的爱心树表白动画
Feb 01 Javascript
Bootstrap精简教程
Nov 27 Javascript
EasyUI折叠表格层次显示detailview详解及实例
Dec 28 Javascript
JS实现多张图片预览同步上传功能
Jun 23 Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
Sep 04 Javascript
js通过循环多张图片实现动画效果
Dec 19 Javascript
原生JS运动实现轮播图
Jan 02 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提示Warning:mysql_fetch_array() expects的解决方法
2014/12/16 PHP
给WordPress的编辑后台添加提示框的代码实例分享
2015/12/25 PHP
RR vs IO BO3 第一场2.13
2021/03/10 DOTA
Javascript 中文字符串处理额外注意事项
2009/11/15 Javascript
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
2013/09/22 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
2016/07/27 Javascript
Vuejs第十一篇组件之slot内容分发实例详解
2016/09/09 Javascript
一个极为简单的requirejs实现方法
2016/10/20 Javascript
利用jsonp与代理服务器方案解决跨域问题
2017/09/14 Javascript
基于vue-ssr的静态网站生成器VuePress 初体验
2018/04/17 Javascript
Vue 开发音乐播放器之歌手页右侧快速入口功能
2018/08/08 Javascript
基于vue v-for 多层循环嵌套获取行数的方法
2018/09/26 Javascript
echarts多条折线图动态分层的实现方法
2019/05/24 Javascript
JS使用正则表达式判断输入框失去焦点事件
2019/10/16 Javascript
JavaScript实现京东快递单号查询
2020/11/30 Javascript
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
2020/12/25 Vue.js
微信小程序之高德地图多点路线规划过程示例详解
2021/01/18 Javascript
[04:30]显微镜下的DOTA2第五期——拉比克
2013/09/26 DOTA
python基础教程之五种数据类型详解
2017/01/12 Python
python实现K近邻回归,采用等权重和不等权重的方法
2019/01/23 Python
Python ORM编程基础示例
2020/02/02 Python
html5 canvas-2.用canvas制作一个猜字母的小游戏
2013/01/07 HTML / CSS
锐步美国官方网站:Reebok美国
2018/01/10 全球购物
德国圣伯纳德草药屋:Kräuterhaus Sanct Bernhard(有中文站)
2018/08/05 全球购物
博士毕业生自我鉴定范文
2014/04/13 职场文书
十佳家长事迹材料
2014/08/26 职场文书
领导班子“四风问题”“整改方案
2014/10/02 职场文书
教师三严三实心得体会
2014/10/11 职场文书
单位接收函格式
2015/01/30 职场文书
安全员岗位职责范本
2015/04/11 职场文书
2015年班干部工作总结
2015/04/29 职场文书
承兑汇票延期证明
2015/06/23 职场文书
关于战胜挫折的名言警句大全!
2019/07/05 职场文书
Vue接口封装的完整步骤记录
2021/05/14 Vue.js
mysql如何配置白名单访问
2021/06/30 MySQL
Pandas 数据编码的十种方法
2022/04/20 Python