专栏首页陶士涵的菜地[小程序]小程序框架的简单页面布局

[小程序]小程序框架的简单页面布局

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%;
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • [HTML] websocket的模拟日志监控界面

    模拟命令行的界面效果,使用swoole作为websocket的服务,重新做了下html的界面效果

    陶士涵
  • [javascript] npx 命令简单使用

    npx避免全局安装模块,并且用完这个模块就会删除掉 只要 npx 后面的模块无法在本地发现,就会下载同名模块。比如,本地没有安装http-server模块,下面...

    陶士涵
  • [PHP] 数据结构-线性表的顺序存储结构PHP实现

    1.PHP中的数组实际上是有序映射,可以当成数组,列表,散列表,字典,集合,栈,队列,不是固定的长度 2.数组定义中多个单元都使用了同一个键名,则只使用了最后一...

    陶士涵
  • uni-app首页样式分享

    薛定喵君
  • uni-app点击按钮,生成列表元素

    在jQuery里面,动态生成div元素需要进行html的拼接,拼接完成再将拼接的内容放到指定的div里面去,在vue中一般编写代码时都不需要操作DOM元素,那么...

    王小婷
  • QQ聊天插件,鼠标划入划出显示隐藏效果。

    其中遇到了 mouse 事件的问题,可以参照:JQuery几个mouse事件的区别和用法

    德顺
  • jQuery基础--CSS操作、class操作、attr操作、prop操作

    eadela
  • 小程序九宫格

    达达前端
  • 如何使用小程序视图容器组件

    在上一篇文章中,我们介绍了小程序入门开发的基础步骤,并通过几个Hello Word例子,让大家体验了下小程序的组件及API使用,接下来的教程中,我们将教大家详细...

    宮園薰
  • 微信小程序校历组件

    首先得根据年月将本月的日历打印出来,使用util.formatDate("yyyy-MM-01", date)获取本月的1号的Data对象,然后计算他是本周的周...

    WindrunnerMax

扫码关注云+社区

领取腾讯云代金券