对小程序研究感兴趣的可加(交流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写法的更多相关文章

  1. 微信小程序,前端大梦想(六)

    微信小程序,前端大梦想(六) 微信小程序之联合百度API实现定位 定位功能对于我们都不陌生,在移动端的应用中更是不可或缺的功能,小程序中也提供了对应的API帮助我们完成定位的实现,但是目前小程序的定位 ...

  2. 微信小程序-开心大转盘(圆盘指针)代码分析

    大转盘是比较常见的抽奖活动 .以前做过h5的大转盘,最近小程序比较火,客户要求做小程序的大转盘.我们就来分析下代码.先上几个图:     界面效果还是很不错的. 做界面还是比较容易的,只要有前端基础没 ...

  3. 微信小程序开发详解——小程序,大颠覆!

    微信小程序开发 联系 苏念 188.1414.7927  微信小程序系统开发 微信新功能开发 小程序开发 小程序怎么开发 app小程序开发 简化小程序开发 微信小程序定制 小程序制作 开发微信小程序  ...

  4. C#windows桌面应用小程序制作——大文件数据分段解析存储

    现在的任务就是做一个大文件解析的桌面应用小程序,具体需求就是:将一个很大的文件里的数据按一定标志拆分然后分别保存到某个文件夹下面. 解析的文件内容为以下内容: windows 应用小程序界面 具体代码 ...

  5. 微信小程序,前端大梦想(一)

    小程序框架MINA简介       微信公众平台"小程序"具有不是APP胜似APP的效果,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用 ...

  6. 微信小程序,前端大梦想(二)

    微信小程序的视图与渲染  今天我们从四个方面来了解小程序:   •组件的基本使用  •数据绑定  •渲染标签  •模板的使用     一.组件的基本使用:  微信小程序为我们的开发提供了丰富的UI组件 ...

  7. 多个微信小程序一个服务端架构

    由于某些特定的业务场景,当多个小程序需要一个服务端后台提供数据时,大家可能想到是HTTP路由.是的,实际上我们使用微服务的GateWay网关也是一样的,如下图微服务架构: 网关GateWay的作用在于 ...

  8. Lisp小程序,大作用,不该放弃!

    从听说autolisp到现在已经20年了, 学了一点点, 可惜中间没能坚持下来, 放弃了!     今天在画图, 图纸是从revit转成dwg的, 其中有些文本的朝向是错误的, 如果手工旋转很是费事, ...

  9. 微信小程序到底把什么定义为风险内容?

    目录 起因 经过和结果 附录: 起因 之前做一个群相册的小程序,因为涉及到图片和评论等内容的发布分享.因此,微信后台要求有一定的内容安全检测能力. 但是,我用别家的内容检测用的好好的,在国庆前被微信警 ...

随机推荐

  1. mySQL简单操作(二)

    1.like子句 [where clause like '%com'] '%' '_' 2.正则 3.union操作符 用于连接多个select语句,[distinct]删除重复数据 select c ...

  2. Qt重绘之update,repaint详解

    Qt里面的重绘和Windows编程里面的重绘差不多.但是Qt的重绘更有特色,更加智能. 在讲之前,先说说paintEvent() paintEvent()是一个虚函数槽(slot),子类可以对父类的p ...

  3. C语言实例:类型转换

    数组转换成16进制数: #include <stdio.h> #include <stdlib.h> typedef unsigned char UINT8; typedef ...

  4. oracle SQL性能分析之10053事件

    优化器生成正确执行计划的前提条件是要有正确的统计信息,不准确的统计信息往往会导致错误的执行计划.当通过SQL和基数推断出的执行计划和实际执行计划不同时,就可以借助10053事件.10053事件是用来诊 ...

  5. AndroidStudio生成APK注意的几个问题

    生成APK遇到两个问题:一是生成的APK安装失败(没有勾选V1所致),二是生成APK后,百度与谷歌地图不显示(SHA1值改变所致). 通过Build>Generate Signed APK生成A ...

  6. 【Alpha】Scrum Meeting 8

    目录 前言 任务分配 燃尽图 会议照片 签入记录 困难 前言 第8次会议在4月12日21:00进行微信会议. 交流确认了任务进度,对下一阶段任务进行分配.时长15min. 任务分配 姓名 当前阶段任务 ...

  7. eclipse上的.properties文件中文编辑显示问题

    安装 装Properties Editor插件,方法: Help --> Install New Software -->输入:http://propedit.sourceforge.jp ...

  8. blogger添加代码高亮

    blogger(blogspot)自带的是没有代码高亮的,我们可以用下面的方法添加代码高亮. 首先我们打开blogger(blogspot)后台,然后点击主题背景-->修改html,然后在弹出的 ...

  9. 洛谷 P3381 【【模板】最小费用最大流】

    题目描述 如题,给出一个网络图,以及其源点和汇点,每条边已知其最大流量和单位流量费用,求出其网络最大流和在最大流情况下的最小费用. 输入 第一行包含四个正整数N.M.S.T,分别表示点的个数.有向边的 ...

  10. 排查OPENSTACK浮动IP被占用记录

    在openstack上新建机器时,发现用户无法登陆. 检查该机器的22端口,返回 Connection refused.   ping该IP,发现可以ping通.   释放该浮动ip,然后去ping该 ...