微信小程序框架的页面布局代码
更新时间：2019年08月17日 08:34:33 作者：陶士涵的菜地
这篇文章主要介绍了微信小程序框架的页面布局代码，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
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;
总结
以上所述是小编给大家介绍的微信小程序框架的页面布局代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
相关文章
同C# 、Java一样我们可以手工调用垃圾回收程序，但是由于其消耗大量资源，而且我们手工调用的不会比浏览器判断的准确，所以不推荐手工调用垃圾回收2013-10-10
原生js 封装get ,post, delete 请求的实例
下面小编就为大家带来一篇原生js 封装get ,post, delete 请求的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
文章主要总结了 JS 中循环遍历数组的十二种常用方式,包括 for 循环（普通和优化版）、forEach、map、filter、for…of、for…in、find、findIndex、some、every、reduce 等,并对它们的特点、语法、优缺点、适用场景及返回值等进行了详细说明,需要的朋友可以参考下2025-01-01
这篇文章为大家详细主要介绍了js实现带箭头的进度流程，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-03-03
阻塞渲染就是在页⾯中我们通常会引⽤外部⽂件，⽽浏览器在解析HTML页⾯是从上到下依次解析、渲染，如果<head>中引⽤了⼀个a.js⽂件，⽽这个⽂件很⼤或者有问题，需要2秒加载，那么浏览器会停⽌渲染页⾯，2秒后加载完成才会继续渲染，这个就是阻塞2022-06-06
在JavaScript中，一切都是对像，函数是第一型2010-10-10
JavaScript中document.querySelector函数用法介绍
这篇文章主要给大家介绍了关于JavaScript中document.querySelector函数用法的相关资料,document.querySelector是JavaScript中的一个内置方法,用于通过CSS选择器选择文档中的第一个匹配元素,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了原生js实现的贪吃蛇网页版游戏完整实例,可实现自主选择游戏难度进行贪吃蛇游戏的功能,涉及javascript键盘事件及页面元素的操作技巧,需要的朋友可以参考下2015-05-05
这篇文章主要为大家详细介绍了bootstrap网页框架的使用方法，感兴趣的小伙伴们可以参考一下2016-05-05
这篇文章主要介绍了学习Javascript闭包（Closure）知识的相关资料,需要的朋友可以参考下2016-08-08
最新评论