用户登录

国庆活动:订阅年付会员送 6 个月,重订、续订送 12 个月。订阅 →

这里可以给幻灯片这块内容起个名字 .. 比如 hero .. 在这个 swiper 组件上面再添加一个 hero .. 然后去创建一个样式文件 .. 放在 styles 目录的下面,名字是 hero.wxss ..

打开小程序的主样式文件 .. 用 import 导入在 styles 下面的 hero.wxss 这个样式文件 .. 再回到这个样式文件 ..

下面可以给 .hero 添加一些样式 ..

先设置一下 .hero 下面的 image 的样式 .. 还有 hero 下面的 video 的样式 .. 把 height 设置成 38.2vh ..

再设置一下 .hero 下面的 .content ,padding-top 设置成 10% .. 首页幻灯片上的这些文字内容可以居中对齐 .. 在这个 .content 容器的上面,再添加一个 .centered ..

回来再设置一下 .hero .content.centered .. text-align 是 center,让文字居中对齐 ..

sub-header

接着再设置一下 hero 下面的 sub-header .. font-size 是 32rpx .. text-transform 是 uppercase,把文字改成大写的 .. letter-spacing ,添加 3 个像素的字间距 ..

margin-bottom,是 8 个像素 .. 再用一个 color ,文字的颜色可以使用 rgba 表示 .. 颜色是黑色 .. 不透明度是 0.85 ..

header

然后是 .hero 下面的 .header 的样式 .. font-size,字号可以是 72rpx,用一个相对的大小,这样文字的大小会随着设备的宽度的变化而变化 ..

font-weight 是 bold .. 再用 margin 添加点外边距 .. 0 12% 8px .. 上边是0,左右两边留出 12% 的距离 .. 下边是 8 个像素 ..

description

再设置一下 hero 的 description 的样式 .. 先设置一下内边距 .. 上下是 0,左右是 12% .. 再用一个 margin-bottom 添加点下边的外边距 ,值是 32px ..

首页幻灯片:样式《 微信小程序:案例 》

统计

11228
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点