微信小程序css3(微信小程序布局讲解)

d,e,开头的css属性在小程序里比较少,就放在一起了,先看图:那先说c开头的属性:1.caption-side:这个是表格的标题所处的位置属性。取值:bottom,top。小程序里没有table的标签支持,不清楚怎么设置。小程序里设置表格其实很简单,只需要用列表渲染就可以。如下图:标题一标题二标题三标题四标题五内容内容内容内容内容样式:.table{border:1pxsolidg…

大家好,又见面了,我是你们的朋友全栈君。

d,e,开头的css属性在小程序里比较少,就放在一起了,先看图:

220537124_1_20210421042315191

220537124_2_20210421042315441

那先说c开头的属性:

1.caption-side:这个是表格的标题所处的位置属性。取值:bottom ,top。

小程序里没有table的标签支持,不清楚怎么设置。小程序里设置表格其实很简单,只需要用列表渲染就可以。如下图:

220537124_3_20210421042315675

标题一

标题二

标题三

标题四

标题五

内容

内容

内容

内容

内容

样式:

.table {

border: 1px solid greenyellow;

border-right: 0rpx;

border-bottom: 0rpx;

width: 98%

}

.tr {

width: 100%;

display: flex;

justify-content: space-between;

}

.th ,.td {

padding: 10px;

border-bottom: 1px solid greenyellow;

border-right: 1px solid greenyellow;

text-align: center;

width:100%

}

.th {

font-weight: 400rpx;

background-color: greenyellow

}

2.clear:指定位置不允许有浮动元素:取值:left,right,both,none。

3.clip:裁剪。见position。

4.clip-path,取代clip。

5.color:颜色,见这里.

(这里插一句,本来这一篇都快写完了,谁知道一不小心点错了,没保存,又得重新来搞,崩溃啊!怎么就不带自动保存的。差评!)

6.color-interpolation-filters:指定哪个彩色空间补白的使用影响。具体有啥用没搞明白。

取值:auto:在指定的彩色空间不发生.linearRGB:颜色运算在线性化的RGB彩色空间应该发生。sRGB:颜色运算在sRGB彩色空间应该发生。

7.column-count: 指定某个元素应分为的列数。假如要分成3列:column-count:3.

8.column-fill:指定如何填充列。取值:默认值:balance,列长短平衡。浏览器应尽量减少改变列的长度。auto:列顺序填充,他们将有不同的。

9.column-gap:指定的列之间的距离。column-gap:40rpx,那两列之间的距离为40rpx。

10.column-rule:指定列之间的规则:宽度,样式和颜色。column-rule:column-rule-color  column-rule-style  column-rule-width

11.column-rule-color:这是颜色。没啥可说的。

12.column-rule-style :列之间的间隔线的样式,取值有dashed,double,dotted,hidden,groove,inset,outset,none,ridge,solid。

13.column-width:间隔线的宽度。

14.column-span:独占一行,取值为:1|all。当取值为all 的时候独占一行,如果是1的时候跟别的列在一行。

15.column-width: 列的宽度。

16.columns: 指定列的宽度和数量。columns:column-width column-count,可以快速的创建多宽几列。说多了没用 看图:

220537124_4_20210421042316129

17.content:该属性与 :before 及 :after 伪元素配合使用,来插入生成内容。这个属性好玩一点,试了几个不同的组件发现表现不一样。先来看图。wxml代码就这个

头像

按钮

我是输入框

220537124_5_20210421042316941

220537124_6_20210421042317738

很明显可以看出来,在text,button组件中如果是before,那图片将在前面,而input组件中则是代替placeholder的地方。最好玩的就是:after了,在text组件中表现为在字后面,而button中则感觉是在字的上一层,而input中则直接消失不见了。所以很明显这个属性需要好好熟悉以后才能更好的使用。

18.counter-increment: 递增一个或多个计数器值。

19. counter-reset: 创建或重置一个或多个计数器。这3个(17,18,19)一般一起用可以自动生成以下格式。就是自动生成1.1,1.2,2.1,2.2等等。

220537124_7_20210421042318519

20.cursor: 定义了鼠标指针放在一个元素边界范围内时所用的光标形状。按照css里面规定鼠标的格式,不过在小程序里没发现有什么用。

21.direction:指定文本方向/书写方向。取值:默认值:ltr:文本方向从左到右。rtl:文本方向从右到左。说真的没看出来到底怎么实现的,跟我想象中的不一样啊。

220537124_8_20210421042319550

22.empty-cells:是否显示表格中的空单元格(仅用于”分离边框”模式)。取值:hidden  show

23.enable-background:废弃。

到此c,d,e开头的属性都过了一遍。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/128166.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 字符串匹配算法详解视频_字符串匹配时间复杂度

    字符串匹配算法详解视频_字符串匹配时间复杂度希望看到文章的你们,能够在今年的研究生考试中超常发挥。愿你们都能考上自己心仪的学校,为你们的备考生涯划上一个完美的句号。做为你们的师兄有几句话想对你们说,希望这些话能对你们有一些帮助。马…

    2022年8月21日
    4
  • 固态硬盘故障表现及数据恢复方案表_ssd硬盘数据恢复得了吗

    固态硬盘故障表现及数据恢复方案表_ssd硬盘数据恢复得了吗固态硬盘出现硬件损坏时,通常是NAND控制芯片损坏造成的,主控芯片是固态硬盘的存取控制芯片,是固态硬盘的灵魂所在。相比于闪存颗粒有限的擦写寿命,在闪存颗粒依然坚挺的时候,主控芯片却损坏的概率反而要高得多,据统计,95%以上的固态硬盘故障,都是由于主控芯片发生故障引起的。主控芯片发生故障的表现有以下几种:(1)容量异常,容量识别成8Mb,16M,1G,2G等?(2)容量正常,但通过16进制编辑工具查看硬盘底层信息,只能显示几个在不断重复的扇区(3)可识别硬盘的型号,…

    2022年9月20日
    2
  • oracle查询用户密码命令,Oracle数据库用户密码问题[通俗易懂]

    oracle查询用户密码命令,Oracle数据库用户密码问题[通俗易懂]场景一:在重置一些系统sys和system用户密码(已过期)时(还是使用原密码,根据user$中的password修改重置),在user$查看sys和system用户信息时发现这两个用户的PASSWORD为空,如下:SQL>selectname,passwordfromuser$wherenamein(‘SYS’,’SYSTEM’);NAME…

    2022年7月28日
    14
  • 你知道Python是什么意思吗?

    你知道Python是什么意思吗?python中文就是蟒蛇的意思。在计算机中,它是一种编程语言。Python(英语发音:/ˈpaɪθən/),是一种面向对象、解释型计算机程序设计语言,由GuidovanRossum于1989年

    2022年7月3日
    25
  • Linux 安装 Nginx 并搭建 Tomcat 集群

    Linux 安装 Nginx 并搭建 Tomcat 集群

    2021年8月31日
    66
  • [已实现]暴力破解路由器管理密码

    搬新家以后,第一时间连上网络,登录路由器后台。博主租的房子是某平台的,网络是由平台提供的。和上次租房不同的地方在于,这次路由器后台管理密码居然和给的wifi连接密码不一样了,肯定是有人改过密码了!admin等弱口令都试过了,全都不管用!对一个it技术人员来说,被人掌握网络生杀大权肯定是无法容忍的!第一次测试的时候尝试用telnet登录路由器,发现密码已经被更改,无法登录,预料是跟web控制台密码一起改变的。…

    2022年4月9日
    145

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号