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

数字之家

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

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

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

[复制链接]
  • TA的每日心情
    开心
    2019-5-7 14:15
  • 签到天数: 9 天

    [LV.3]偶尔看看II

    396

    主题

    399

    帖子

    1860

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    1860
    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
    回复

    使用道具 举报

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

    本版积分规则

    QQ|Archiver|手机版|小黑屋|寿光赢创志诚信息技术有限公司 ( 鲁ICP备19000917号 )

    GMT+8, 2019-5-22 22:50 , Processed in 0.063991 second(s), 24 queries .

    Powered by Discuz! X3.4

    © 2001-2017 Comsenz Inc.

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