对小程序研究感兴趣的可加(交流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. Genymotion-Android模拟器提示"Unable to connect to the Genymotion server. Please check your Internet connection."解决方法

    昨天刚装的Genymotion,昨晚还用得好好的. 今晚开机,重新打开Genymotion,却提示:"Unable to connect to the Genymotion server. ...

  2. Xshell连接Linux慢问题解决办法

    由于各种原因,经常更换网络环境,然后发现,每次更换网络环境后,xshell连接虚拟机的rhel或者CentOS都几乎是龟速.... 今天专门查了一下解决方案: 原来是ssh的服务端在连接时会自动检测d ...

  3. 【ubuntu】-桌面假死的解决办法

    第一,通过ctrl+art+F1(1-6),启动本地终端 切换到了字符界面tty1 第二,查询进程,ps -e |grep tty7 得到tty7的pid号 第三,杀死tty7的进程 , kill 9 ...

  4. LeetCode Weekly Contest 117

    已经正式在实习了,好久都没有刷题了(应该有半年了吧),感觉还是不能把思维锻炼落下,所以决定每周末刷一次LeetCode. 这是第一周(菜的真实,只做了两题,还有半小时不想看了,冷~). 第一题: 96 ...

  5. SAP主数据文件版本号命名规范

    前提说明 最近在实施公司的SAP系统,需要对供应商,成品半成品原辅料,工艺路线,BOM等各种主数据进行收集,由于牵扯到多个部门进行合作整理数据,为了更方便进行文件版本的管理,特意学习下文件版本号命名规 ...

  6. Oracle中connect by用法示例

    在工作中常常会遇到一些数据表包含父子关系的数据,比如行业.地区等等,如果需要将其节点按父子关系一步一步列出来,就需要使用connect by了. 如有由自身行业代码basecode和父行业代码pare ...

  7. MySQL数据库的sql语句的导出与导入

    1.MySQL数据库的导出 (1)选择对应的数据库 (2)点击右键选择Dump SQL File (3)会出现保存框,选择保存的位置,名称不建议重新起名 (4)点击保存出现 (5)点击Close就可以 ...

  8. Python模块 3

    time模块 在计算中时间共有三种方式: 1.时间戳: 通常来说,时间戳表示的是从1970年1月1日00:00:00开始按秒计算的偏移量.我们运行“type(time.time())”,返回的是flo ...

  9. centOS 及 ubuntu 下载地址记录

    CentOS下载地址:   http://isoredirect.centos.org/centos/7/isos/x86_64/CentOS-7-x86_64-DVD-1611.iso  : ubu ...

  10. Thinkphp5背景图片的引入~ 以及图片的引入

    将图片信息从数据库查询 再渲染于前台页面