小程序一个大盒子里面的盒子内容居中对其显示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的, 其中有些文本的朝向是错误的, 如果手工旋转很是费事, ...
- 微信小程序到底把什么定义为风险内容?
目录 起因 经过和结果 附录: 起因 之前做一个群相册的小程序,因为涉及到图片和评论等内容的发布分享.因此,微信后台要求有一定的内容安全检测能力. 但是,我用别家的内容检测用的好好的,在国庆前被微信警 ...
随机推荐
- 2019MABU3月班——SAP导入总账科目小笔记
1. 在目录中找到“集中” 2.总账科目这里输入代码,公司代码为3000 3. 点“创建” 4. 然后可以填下面这些了 5. 转到“创建/银行/利息” 6. 选字段状态组 7. 保存 8.大功告成.
- KVO的使用三:基于runtime实现KVO
苹果的KVO原理通过isa-swizzling技术实现,本质实现逻辑是在runtime时添加一个子类,重写set方法进行操作,现在我们也基于runtime来实现一个KVO. 首先新建一个Person类 ...
- 阿里云windows 2008 服务器处理挖矿程序 Miner
阿里云盾最近报发现wanacry蠕虫病毒和挖矿进程异常 仔细检查进程后,发现两个奇怪的进程 Eternalblue-2.2.0.exe,winlogins.exe 特别是伪装成 winlogins.e ...
- 安装LNMP笔记
安装好centos7,主机ssl连不上 网卡设置为桥接模式或NAT模式 防火墙的原因 首先telnet本机22口 先更新yum源 yum update -y 安装网络常用工具:telnet trace ...
- tomcat启动项目时一直在跑,项目没起来
1. 在整合maven项目时我遇到一个问题,tomcat启动项目总是报超时,后来我把timeout调到180秒,还是启动超时.看了不是timeout时间短的问题. 2.弄了一天也没解决,后来请大神给看 ...
- The History of spring
Spring的出现 Spring最早出现对早期J2EE规范复杂性的回应 .虽然有些人一直认为Java EE和Spring处于竞争中,但Spring实际上是对Java EE的补充.Spring编程模型 ...
- 安装与配置apache WEB服务器(Linux环境)
Linux环境下安装一个软件的方式多数为两种: 1.通过命令从远程源下载自动默认安装 2.编译安装 第一种较为简单,直接通过 yum 或者 apt-get 直接安装即可,但是对我来说,编译安装可能更加 ...
- docker安装nginx实例
1.拉取nginx镜像: docker pull nginx 2.查看本地镜像文件: docker images 3.创建挂载目录: mkdir -p /docker_data/nginx/{con ...
- python中模块的__all__详细使用
python模块中的__all__,用于模块导入时限制,如:from module import * 此时被导入模块若定义了__all__属性,则只有__all__内指定的属性.方法.类可被导入:若没 ...
- linux中centros6.7安装php5.6,httpd-2.2.19(web产品化)遇到的问题总结
前段时间在公司实习,web系统产品化的过程踩了很多坑,在这边总结一下,由于对linux不是很懂,全是自己一步步一个一个问题解决的 1,查看系统中是否安装apache,php,mysql环境 Apach ...