[小程序]小程序框架的简单页面布局
2023-02-18 15:41:34 时间
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; font-size: 14px; margin-top: 10px; text-align: right; width: 93%; }
相关文章
- 精密进近OCH的计算
- 精密进近OAS面的绘制与评估
- 基本ILS面的评估
- 飞行程序作业—目视盘旋保护区计算
- 非精密进近作业练习第二部分:非精密进近复飞航段的超障计算
- 飞行程序作业--非精密进近计算(第一部分)
- 飞行程序作业—顶空盲区的半径计算
- 飞行程序作业--转弯半径的计算
- 测(免)试(费)版附件十四面的玩法
- 附件十四面自动化评估软件上线发布
- PBN旁切转弯的精确化计算
- 【等距螺旋的七个实验】实验四:等距螺旋的数学计算
- 基于数学软件的阿基米德螺线切线计算与分析
- 一张图读懂PBN飞越转弯衔接DF航段计算
- 一张图读懂PBN飞越转弯衔接TF/CF航段计算
- 一张图读懂PBN旁切转弯计算
- 风螺旋切线计算的回顾
- 全面兼容手机端访问与toTop
- 红队技术-各端口横向移动方法
- 钓鱼技巧-Nginx反向代理伪造页面