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


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 相关文章推荐
XP折叠菜单&amp;仿QQ2006菜单
Dec 16 Javascript
用tip解决Ext列宽度不够的问题
Dec 13 Javascript
js 删除数组的几种方法小结
Feb 21 Javascript
javascript刷新父页面的各种方法汇总
Sep 03 Javascript
Javascript 构造函数详解
Oct 22 Javascript
js获取所有checkbox的值的简单实例
May 30 Javascript
用JS实现轮播图效果(二)
Jun 26 Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
Jun 30 Javascript
jQuery组件easyui基本布局实现代码
Aug 25 Javascript
Node.js中路径处理模块path详解
Nov 14 Javascript
react native实现往服务器上传网络图片的实例
Aug 07 Javascript
vue组件开发props验证的实现
Feb 12 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大批量数据操作时临时调整内存与执行时间的方法
2011/04/20 PHP
PHP基于swoole多进程操作示例
2019/08/12 PHP
php5.6.x到php7.0.x特性小结
2019/08/17 PHP
锋利的jQuery 第三章章节总结的例子
2010/03/23 Javascript
Uglifyjs(JS代码优化工具)入门 安装使用
2020/04/13 Javascript
使用cluster 将自己的Node服务器扩展为多线程服务器
2014/11/10 Javascript
javascript定义变量时带var与不带var的区别分析
2015/01/12 Javascript
理解javascript异步编程
2016/01/27 Javascript
利用Angular.js限制textarea输入的字数
2016/10/20 Javascript
Windows系统下安装Node.js的步骤图文详解
2016/11/15 Javascript
详解Vue方法与事件
2017/03/09 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
2017/03/30 Javascript
bootstrap table表格插件之服务器端分页实例代码
2018/09/12 Javascript
微信小程序自定义组件传值 页面和组件相互传数据操作示例
2019/05/05 Javascript
webpack 代码分离优化快速指北
2019/05/18 Javascript
python2.7的编码问题与解决方法
2016/10/04 Python
利用python操作SQLite数据库及文件操作详解
2017/09/22 Python
基于python(urlparse)模板的使用方法总结
2017/10/13 Python
Python操作MySQL模拟银行转账
2018/03/12 Python
Python pymongo模块用法示例
2018/03/31 Python
Python3+Appium安装使用教程
2019/07/05 Python
Python DataFrame一列拆成多列以及一行拆成多行
2019/08/06 Python
Pandas操作CSV文件的读写实现方法
2019/11/13 Python
django在开发中取消外键约束的实现
2020/05/20 Python
sklearn线性逻辑回归和非线性逻辑回归的实现
2020/06/09 Python
Python利用命名空间解析XML文档
2020/08/10 Python
无惧面试,带你搞懂python 装饰器
2020/08/17 Python
Django框架实现在线考试系统的示例代码
2020/11/30 Python
纯css3实现的鼠标悬停动画按钮
2014/12/23 HTML / CSS
美国山地自行车、露营、户外装备和服装购物网站:Aventuron
2018/05/05 全球购物
培训班主持词
2014/03/28 职场文书
闭幕式主持词
2014/04/02 职场文书
个人安全生产责任书
2014/07/28 职场文书
公积金接收函格式
2015/01/30 职场文书
立春观后感
2015/06/18 职场文书
使用Nginx搭载rtmp直播服务器的方法
2021/10/16 Servers