[小程序]小程序框架的简单页面布局
2023-02-18 15:47:08 时间
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%; }
相关文章
- 译文:开发人员面临的 10个最常见的JavaScript 问题
- 2022高频前端面试题合集之JavaScript篇(上)
- 2022高频前端面试题合集之JavaScript篇(中)
- 2022年面向前端开发人员的9个最佳UI组件库/框架
- 面试题: UDP 与 TCP 区别?
- GitLab 管理界面设置中文
- 面试题:Spring 事务的实现方式和实现原理?
- 面试题:说下原生 JDBC 操作数据库流程?
- 面试题: ArrayList 与 Vector 区别?
- 面试题:重载和重写的区别?
- 面试题:接口和抽象类的区别是什么?
- 面试题:为什么说 Mybatis 是半自动ORM 映射工具?它与全自动的区别在哪里?
- 面试题:Spring 有什么优点
- 分享一个只需要几行代码,完成页面小机器人
- 分享一行代码实现天气预报,前端页面天气预报
- 面试题: SpringMVC的执行流程?
- Thymeleaf关闭页面缓存配置
- CentOS7-命令-进入网卡配置页面(nmtui)
- meterpreter 监控桌面命令(screenshare)
- Windows10-如何将此电脑和控制面板以及网络和用户的文件等,显示到桌面上快捷方式