小程序一个大盒子里面的盒子内容居中对其显示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的, 其中有些文本的朝向是错误的, 如果手工旋转很是费事, ...
- 微信小程序到底把什么定义为风险内容?
目录 起因 经过和结果 附录: 起因 之前做一个群相册的小程序,因为涉及到图片和评论等内容的发布分享.因此,微信后台要求有一定的内容安全检测能力. 但是,我用别家的内容检测用的好好的,在国庆前被微信警 ...
随机推荐
- zigbee 中ZDO的理解
---恢复内容开始--- ZigBee 物理层:主要进行无线数据的收发,同时定义了无线传输的信道以及频率. MAC层:使用CSMA-CA机制接入到无线信道,负责传输信标帧,保持同步和 ...
- 在java中实现数据导入excel表格中
1.首先前端代码如下: 一个导出按钮:<input id="export" class="btn btn-primary" type="butt ...
- js时间相关
let date = new Date(); date.getYear(); //获取当前年份(2位) date.getFullYear(); //获取完整的年份(4位) date.getMonth( ...
- lnmp mysql远程访问设置
一:iptables 设置开放3306访问 iptables -L -n --line-numbers 1,删除DROP 3306 iptables -D INPUT 5[序列号] 2,添加 ACCE ...
- MySQL5.7 JSON类型及其相关函数的学习
mysql> CREATE TABLE `json_table` ( `id` int(11) NOT NULL AUTO_INCREMENT, `info` json NOT NULL, PR ...
- bzoj4665 小w的喜糖(dp+容斥)
4665: 小w的喜糖 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 222 Solved: 130[Submit][Status][Discuss ...
- centos 时钟配置
centos 7 时钟配置: timedatectl 命令: [root@localhost ~]# timedatectl --help timedatectl [OPTIONS...] COMMA ...
- Oracle rac 监听状态异常远程连接问题解决(TNS-12541 TNS-12560 TNS-00511 Linux Error:111 ORA-12502)
问题1现象 数据导出脚本执行失败,报错如下 ORA-12537 到服务器上查看,报错: [oracle@test ~]$ lsnrctl status LSNRCTL - Production on ...
- OpenCV自带dnn的Example研究(1)— classification
这个博客系列,简单来说,今天我们就是要研究 https://docs.opencv.org/master/examples.html下的 6个文件,看看在最新的OpenCV中,它们是如何发挥作用的. ...
- cssselector元素定位
转自https://blog.csdn.net/qq_40024178/article/details/78945651 一.概述 cssSelector也是一种常用的选择器,CSS locator比 ...