00:03
哈喽,大家好,我是霍长亮,那么这节课呢,我们将对小程序的样式基础调用做一个简单的了解啊,算是初始好的,那么我们在前面的课程之中。对吧,咱们对于样式已经做了一个基础的了解,对吧,我们想要改样式,这里呢是全局的样式。对吧,这里是全局的样式,然后这里是对于单个页面的样式,那么我们在上一套课程,咱们讲H5就是第一套基础版的课程的时候,那么对于样式是CSS,而在我们微信小程序里面啊,它这里呢是WXSS,就是微信的缩写啊,微信SS。有什么区别呢,基本上。可以说是一回事啊,都是美容师,化妆师,就是调整布局呀,颜色呀,展示方式等等的。
01:03
但是呢,它也有了一些适当的调整,就是比如说在尺寸单位上,还要在导入上,那么它会有所改变,就是增加了一些功能啊,增加了一些展示方式。嗯,我们这节课呢,算是对他的一种基础的了解,其实呢,就像我一开始所说的,你在H5里面用的是div,然后呢,你在微信小程序里面用view啊替换一下,基本上就是这么个意思,然后别的我们实际操作一下。你比如说咱们找到这个页面对吧。啊,点击进入。详情页面,我们想要给它加上一些特效啊,加上一些啊,样式怎么样。首先呢,我们找到啊,这几个字所在的。模板啊,是在这里啊,是这个字。然后呢,我们想要在下面,比如说啊,再加上一个。
02:08
这里是样式展示,咱们编译一下,看一下效果。对吧,下面有了,这里是样式展示,那么想给他。进行一个。样式调整,我们之前说过div是什么,是块级容器啊,SPA呢是行级容器,咱们在小程序里面呢,可以把div换成。AI。Ew对吧。呃,粘贴到这里面,然后我们再来编一下。啊,因为我们现在还什么都没改,所以说他这里呢,看不出来明显的效果。我们来个class。
03:03
Plus等于啊,后面呢,就是对于这个样式给它来一个自定义啊,名字你随便写张三李四王五朝六都可以。比如说我们在这就叫做border。啊,因为咱们想给它调整一下类似啊框框啊,那么这个时候。咱们要在哪里增加这个包的?在这对吧,也相当于算是这是一个全局的CSS,这是一个。相当于我们一元里面的这是全局变量,是局部变量啊,那么我们想要对它进行更改一下。那么这里是应该写什么?是点还是井号?想一想。我们在上一段课程中讲过。那么。如果说是点后面。配的什么?
04:00
是,那如果说是井井号配的什么,配的是ID对不对,所以说我们在这里呢,因为你上面。这用的是class,所以说在这我们得用一个点。高,然后打括号拍。里边啊,你可以写一些,比如说边框。好,然后我们点击下保存定义。对吧,这个时候呢,就可以看到这里的边框,然后。我们可以看一下,在这个幻灯片里面,我们也保留了一个网址,这个网址呢,就是微信官方给的一个网址。
05:07
然后我们在这里看一下,它呢提供了相应的展示,包括说内敛呀,选择器呀等等等等,那么我们可以把这些。拿过来测试一下。对吧,咱们把它放过来。之后咱们再来编译一下。对吧,这个呢,就是上下的,上下左右的一个边距啊,那么后面还有很多啊,咱们将来用到的时候再详细讲,现在呢,就是简单的给大家带着走一下啊,就是对于这个CSS和小程序的一个关系,在小程序里面呢,这个管它叫做WXS,然后你想要调用的时候也非常简单,在这。把div换成viw,然后class一样的,Class里面写一个名啊,这名也随便起的,然后呢,把这个名字在这个全局的啊,在这个全局的WSS里面定义,或者在这个局部的WSWSS里面进行定义,然后就可以生效了。呃,有一个小的注意事项就是已记入了这些都是那个半角的啊,就是英文,英文。
06:20
字幕下啊,不能打一个中文,打一个中文就该报错了啊,我们试一下。其实你不仔细看的话,可能是看不出来,但实际上它是不一样的,对吧,你看这个是有颜色的,这个是什么颜色的啊,包括前面这个冒号也是一样啊。都是些小的细节,好的,那么这节课呢,就跟大家讲到这里,感谢您的关注,我是霍长亮。
我来说两句