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


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 相关文章推荐
php对mongodb的扩展(小试牛刀)
Nov 11 Javascript
jQuery中is()方法用法实例
Jan 06 Javascript
简要了解jQuery移动web开发的响应式布局设计
Dec 04 Javascript
基于vue实现swipe轮播组件实例代码
May 24 Javascript
基于angular2 的 http服务封装的实例代码
Jun 29 Javascript
JS二分查找算法详解
Nov 01 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
Dec 01 Javascript
JS基于对象的链表实现与使用方法示例
Jan 31 Javascript
js核心基础之闭包的应用实例分析
May 11 Javascript
countUp.js实现数字滚动效果
Oct 18 Javascript
小程序卡片切换效果组件wxCardSwiper的实现
Feb 13 Javascript
一篇文章看懂JavaScript中的回调
Jan 05 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
写一个用户在线显示的程序
2006/10/09 PHP
fetchAll()与mysql_fetch_array()的区别详解
2013/06/05 PHP
php的array数组和使用实例简明教程(容易理解)
2014/03/20 PHP
用window.location.href实现刷新另个框架页面
2007/03/07 Javascript
dojo 之基础篇(三)之向服务器发送数据
2007/03/24 Javascript
使用jQuery实现dropdownlist的联动效果(sharepoint 2007)
2011/03/30 Javascript
仿新浪微博返回顶部的jquery实现代码
2012/10/01 Javascript
JavaScript数组深拷贝和浅拷贝的两种方法
2014/04/16 Javascript
bootstrap改变按钮加载状态
2014/12/01 Javascript
详解JavaScript的Polymer框架中的通知交互
2015/07/29 Javascript
Node.js 条形码识别程序构建思路详解
2016/02/14 Javascript
JavaScript面向对象编写购物车功能
2016/08/19 Javascript
微信小程序侧边栏滑动特效(左右滑动)
2017/01/23 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
2017/04/12 Javascript
vue 国际化 vue-i18n 双语言 语言包
2018/06/07 Javascript
小程序从手动埋点到自动埋点的实现方法
2019/01/24 Javascript
如何在Angular8.0下使用ngx-translate进行国际化配置
2019/07/24 Javascript
Nuxt 项目性能优化调研分析
2020/11/07 Javascript
[02:11]2016国际邀请赛中国区预选赛最美TA采访现场玩家
2016/06/28 DOTA
Python实现二分查找算法实例
2015/05/26 Python
5款非常棒的Python工具
2018/01/05 Python
Python爬取商家联系电话以及各种数据的方法
2018/11/10 Python
pandas的连接函数concat()函数的具体使用方法
2019/07/09 Python
基于 Django 的手机管理系统实现过程详解
2019/08/16 Python
python3实现绘制二维点图
2019/12/04 Python
python scrapy重复执行实现代码详解
2019/12/28 Python
Python3爬虫里关于代理的设置总结
2020/07/30 Python
QT5 Designer 打不开的问题及解决方法
2020/08/20 Python
英国知名衬衫品牌美国网站:Charles Tyrwhitt美国
2016/08/28 全球购物
英国安全产品购物网站:The Safe Shop
2017/03/20 全球购物
高校生生产实习自我鉴定
2013/09/21 职场文书
创业计划书中包含的9个方面
2013/12/26 职场文书
对标管理实施方案
2014/03/12 职场文书
Python词云的正确实现方法实例
2021/05/08 Python
golang的文件创建及读写操作
2022/04/14 Golang
Python Matplotlib绘制动画的代码详解
2022/05/30 Python