小程序一个大盒子里面的盒子内容居中对其显示wxss写法
对小程序研究感兴趣的可加(交流QQ群:604788754)入群联系群主可得到小程序教学资源。
这个案例只是想展示效果,内容部分未进行for循环绑定处理:
WXML:
<view class="maxbox">
<!--星期-->
<view class="weekday">
<view class="weekday01">日</view>
<view class="weekday01">一</view>
<view class="weekday01">二</view>
<view class="weekday01">三</view>
<view class="weekday01">四</view>
<view class="weekday01">五</view>
<view class="weekday01">六</view>
</view>
<!---阳历阴历-->
<view class="days">
<view class="days01">
<text></text>
<text>初三</text>
</view> <view class="days01">
<text></text>
<text>初八</text>
</view> <view class="days01">
<text></text>
<text>初九</text>
</view> <view class="days01">
<text></text>
<text>初十</text>
</view> <view class="days01">
<text></text>
<text>十一</text>
</view> <view class="days01">
<text></text>
<text>十二</text>
</view> <view class="days01">
<text></text>
<text>十三</text>
</view> <view class="days01">
<text></text>
<text>初七</text>
</view>
</view> </view>
WXSS:
.maxbox{
width: %;
height: auto;
margin-left: %;
display: flex;
flex-direction: column;
border: 1px # solid;
}
/*星期*/
.weekday{
width: %;
height: 100rpx;
line-height: 100rpx;
background-color: #188eee;
display: flex;
flex-direction: row;
color: #fff;
}
.weekday01{
width: 14.2%;
height: %;
text-align: center;
}
/*阳历阴历*/
.days{
width: %;
height: auto;
/*display: flex;
flex-direction: row;*/
display: inline-block;
}
.days01{
width: 14.2%;
height: 100rpx;
display: flex;
flex-direction: column;
text-align: center;
font-size: 16px;
float: left;
line-height: 40rpx;
}
效果如下:

小程序一个大盒子里面的盒子内容居中对其显示wxss写法的更多相关文章
- 微信小程序,前端大梦想(六)
微信小程序,前端大梦想(六) 微信小程序之联合百度API实现定位 定位功能对于我们都不陌生,在移动端的应用中更是不可或缺的功能,小程序中也提供了对应的API帮助我们完成定位的实现,但是目前小程序的定位 ...
- 微信小程序-开心大转盘(圆盘指针)代码分析
大转盘是比较常见的抽奖活动 .以前做过h5的大转盘,最近小程序比较火,客户要求做小程序的大转盘.我们就来分析下代码.先上几个图: 界面效果还是很不错的. 做界面还是比较容易的,只要有前端基础没 ...
- 微信小程序开发详解——小程序,大颠覆!
微信小程序开发 联系 苏念 188.1414.7927 微信小程序系统开发 微信新功能开发 小程序开发 小程序怎么开发 app小程序开发 简化小程序开发 微信小程序定制 小程序制作 开发微信小程序 ...
- C#windows桌面应用小程序制作——大文件数据分段解析存储
现在的任务就是做一个大文件解析的桌面应用小程序,具体需求就是:将一个很大的文件里的数据按一定标志拆分然后分别保存到某个文件夹下面. 解析的文件内容为以下内容: windows 应用小程序界面 具体代码 ...
- 微信小程序,前端大梦想(一)
小程序框架MINA简介 微信公众平台"小程序"具有不是APP胜似APP的效果,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用 ...
- 微信小程序,前端大梦想(二)
微信小程序的视图与渲染 今天我们从四个方面来了解小程序: •组件的基本使用 •数据绑定 •渲染标签 •模板的使用 一.组件的基本使用: 微信小程序为我们的开发提供了丰富的UI组件 ...
- 多个微信小程序一个服务端架构
由于某些特定的业务场景,当多个小程序需要一个服务端后台提供数据时,大家可能想到是HTTP路由.是的,实际上我们使用微服务的GateWay网关也是一样的,如下图微服务架构: 网关GateWay的作用在于 ...
- Lisp小程序,大作用,不该放弃!
从听说autolisp到现在已经20年了, 学了一点点, 可惜中间没能坚持下来, 放弃了! 今天在画图, 图纸是从revit转成dwg的, 其中有些文本的朝向是错误的, 如果手工旋转很是费事, ...
- 微信小程序到底把什么定义为风险内容?
目录 起因 经过和结果 附录: 起因 之前做一个群相册的小程序,因为涉及到图片和评论等内容的发布分享.因此,微信后台要求有一定的内容安全检测能力. 但是,我用别家的内容检测用的好好的,在国庆前被微信警 ...
随机推荐
- Gatling实战(三)
无论是性能测试还是自动化测试,有一个很重要的点就是变量(参数化),因为真实环境是很少同时产生并发很高而且所有参数都一模一样的请求的,就算有这样的接口,开发肯定用缓存来挡了,这种一般不会是瓶颈,真正瓶颈 ...
- 常用sql语句总结(二)(更新数据,序列,创建数据表,约束,注释)
常用sql语句总结(二)(更新数据,序列,创建数据表,约束,注释) 一. 增 INSERT INTO 数据表(字段,字段,-) VALUES(值,值-); INSERT INTO emp(empno, ...
- 2018年-2019年第二学期第三周C#学习个人总结
在第三周,我们又开始了C#的进一步学习,学习的范围是从4.8static关键字到4.11对象初始化器.在4.8static关键字我学到了静态字段,静态属性,静态方法,静态类,静态构造方法单例模式,嵌套 ...
- MyBatis Generator 自定义生成注释
注释生成器 为了生成db里面的注释,必须自定义注释生成器 EmptyCommentGenerator: import org.mybatis.generator.api.CommentGenerato ...
- 數據監控与診斷--環形緩沖區(RING BUFFER)
1. 環形緩沖區 動態管理視圖: sys.dm_os_ring_buffers 查看ring_buffers: Select distinct ring_buffer_type from sys.d ...
- linux命令行安装teamviewer
teamviewer最新版本为14,但是Ubuntu14.04不支持,安装13版本即可. sudo dpkg -i teamviewer_13.2.26559_amd64.deb若报错,即缺少依赖,运 ...
- Qt线程—QThread的使用--run和movetoThread的用法
Qt使用线程主要有两种方法: 方法一:继承QThread,重写run()的方法 QThread是一个非常便利的跨平台的对平台原生线程的抽象.启动一个线程是很简单的.让我们看一个简短的代码:生成一个在线 ...
- App 打包
记录一下: 1. applicationIdSuffix 实现不同 ApplicationId 打包,buildTypes 中添加编译后会成功生成加对应后缀的ApplicationId.在 produ ...
- Flume+Sqoop+Azkaban笔记
大纲(辅助系统) 离线辅助系统 数据接入 Flume介绍 Flume组件 Flume实战案例 任务调度 调度器基础 市面上调度工具 Oozie的使用 Oozie的流程定义详解 数据导出 sqoop基础 ...
- visual studio常用技法相关
(1)查看dll里面包含了那些函数(dumpbin是visual studio内置工具)dumpbin -exports user32.lib (2)#include "stdlib.h&q ...