微信小程序框架的页面布局代码
更新时间：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;
总结
以上所述是小编给大家介绍的微信小程序框架的页面布局代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
相关文章
在jsp中，我们可以用el表达式直接获取basePath，但是在单独js文件中不能用el表达式，下面与大家分享下js文件中如何获取basePath，感兴趣的朋友可以参考下2013-07-07
本篇文章主要介绍了详解JavaScript调用栈、尾递归和手动优化，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
这篇文章主要介绍了JS前端面试基本排序算法原理与实现方法,结合实例形式详细分析了JS常见的基本排序算法相关原理、实现方法、时间复杂度及操作注意事项,需要的朋友可以参考下2020-02-02
这篇文章主要介绍了微信小程序中时间戳和日期的相互转换问题，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2018-07-07
在本篇文章里小编给大家整理了关于js与jquery获取input输入框中的值实例讲解，需要的朋友们可以学习参考下。2020-02-02
JavaScript中变量声明有var和没var的区别示例介绍
在函数内部，有var和没var声明的变量是不一样的。有var声明的是局部变量，没var的，声明的全局变量，所以可以借此向外暴露接口东东2014-09-09
用eval方法，把传进来的这个方法名所代表的方法当作一个对象来赋值给method1的func属性,需要的朋友可以参考下2014-04-04
这篇文章主要为大家详细介绍了如何使用原生JavaScript实现放大镜效果（可自由大小适配），文中的示例代码讲解详细，感兴趣的小伙伴可以了解一下2023-03-03
这篇文章主要介绍了使用base64对图片的二进制进行编码并用ajax进行显示的相关资料,需要的朋友可以参考下2017-01-01
这篇文章主要介绍了JavaScript设计模型Iterator实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-01-01
最新评论