请选择 进入手机版 | 继续访问电脑版

数字之家

 找回密码
 立即注册

扫一扫,访问微社区

QQ登录

只需一步,快速开始

搜索
热搜: 活动 交友 discuz
查看: 679|回复: 0

微信小程序开发(三)首页制作下

[复制链接]

514

主题

519

帖子

2424

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2424
admin实名认证 发表于 2019-5-11 17:41:42 | 显示全部楼层 |阅读模式
在上篇文章中,我们已经基本实现了页面的内容以及导航栏的制作,效果图如下:
32116.jpg
是不是看起来非常的Low呢,没关系,今天我就带着大家把首页效果图变得漂亮起来。
大家在welcome目录下面是不是创建了welcome.wxml,welcome.wxss,welcome.js这三个文件,到现在为止我们只用了welcome.wxml文件,welcome.wxml主要功能就是实现我们想要显示的内容。光显示还不够,毕竟太丑了,那我们是不是得给它打扮打扮,在微信小程序开发中的专业术语叫做增加样式,增加样式就不能再welcome.wxml里面写啦,我们得转移阵地,去welcome.wxss里面去填写我们的样式。

首先我先把成品图给大家看一下:
3301.jpg
大家可以看到,首先它的背景颜色是粉色,导航栏的背景颜色我们已经搞定了,那么我们现在就把界面的背景颜色给改成粉色,大家自行打开welcome.wxss文件,在该文件里面输入下图的代码:
3302.jpg
这个page是全局页面的意思,大家在welcome.wxml文件里面写的代码其实都是写在标签里面的,只不过page标签没有显示出来。page后面有一个花括号,在花括号里面大家可以写它的样式,这里的“background-color”属性代表的意思是背景颜色,我们给它一个粉色,也就是pink,大家可以根据自己的爱好自行调整,写完之后保存一下,我们进行编译看一下效果:
3303.jpg
大家可以惊奇的发现,界面果然变成粉红色的了,是不是非常神奇呢?背景颜色我们搞定了,接下来是不是得让界面上的三个小东西垂直居中啦,大家打开welcome.wxml文件,大家来看一下之前写的代码:
3304.jpg
我之前说过view标签就像是一个笼子,大家可以看到无论是image标签、text标签都放被到了最外层的view标签里面,那我们只需要给最外层的view标签来个样式就行了,可是问题又来了,这个代码里面好像不止一对吧,是不是有三对啊,长的都一样,我怎么能让编译器知道我挑的是第一个啊,大家不要着急,下面我就给大家介绍一个属性叫做class属性,为了方便大家理解这个属性,我再给大家举个小例子:class属性英文翻译过来叫做班级,所有学生都不可能在同一个班级对吧。那么这里我们就把view标签当作学生,我们来给最外层的view标签加一个class属性,它的值就叫container吧,如图:
3305.jpg
有了这个属性,我们就可以去wxss里面去写代码啦,代码如下:
3306.jpg
凡是class的属性在wxss文件里面书写样式的时候前面要写一个“.”,如上图中“container”前面就有个“.”,大家记住就行,里面的”display“属性,英文翻译是展现的意思,它的值是flex,就是弹性模型。“flex-direction”这个属性的意思是项目的排列方向,值是colum,也就是按列布局。这个地方有点不太好理解,大家就知道这两句话能够让它垂直布局就行了。效果图如下:
3307.jpg
是不是和成品图差不多了呢,下面我们再给welcome.wxml文件添加几个class属性,如图所示:
3308.jpg
然后我把样式截图给大家展示一下:
3309.jpg
我就不给大家一个一个讲解了,因为我感觉我讲的太细了,得给大家一点思考的空间,我把样式里面的不太好理解的属性给大家说一下:


margin-top属性,很好理解就是距离上面元素的距离,margin-top:100rpx;就是距离上边的元素为100rpx个单位,rpx是一个单位,没啥好说的,大家如果感兴趣可以自行度娘。当然margin属性还有margin-left、margin-right、margin-bottom属性,大家望文知意,举一反三,这三个属性肯定也已经理解啦。


border属性:这个就是设计边框,也就是成品图中的矩形框。border:1px solid #405f80 。1px指边框的宽度为1px,solid意思是直线,后面那个就不用说了,是一个颜色。


line-height:行高,它的功能就是line-height的值和包裹它的view标签的height值相等时,文字垂直居中。


最后给大家看一下效果吧:




maomivip@mail.com
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表