|
大家在welcome目录下面是不是创建了welcome.wxml,welcome.wxss,welcome.js这三个文件,到现在为止我们只用了welcome.wxml文件,welcome.wxml主要功能就是实现我们想要显示的内容。光显示还不够,毕竟太丑了,那我们是不是得给它打扮打扮,在微信小程序开发中的专业术语叫做增加样式,增加样式就不能再welcome.wxml里面写啦,我们得转移阵地,去welcome.wxss里面去填写我们的样式。 大家可以看到,首先它的背景颜色是粉色,导航栏的背景颜色我们已经搞定了,那么我们现在就把界面的背景颜色给改成粉色,大家自行打开welcome.wxss文件,在该文件里面输入下图的代码: 这个page是全局页面的意思,大家在welcome.wxml文件里面写的代码其实都是写在标签里面的,只不过page标签没有显示出来。page后面有一个花括号,在花括号里面大家可以写它的样式,这里的“background-color”属性代表的意思是背景颜色,我们给它一个粉色,也就是pink,大家可以根据自己的爱好自行调整,写完之后保存一下,我们进行编译看一下效果: 大家可以惊奇的发现,界面果然变成粉红色的了,是不是非常神奇呢?背景颜色我们搞定了,接下来是不是得让界面上的三个小东西垂直居中啦,大家打开welcome.wxml文件,大家来看一下之前小程序 答题小程序 小程序二维码写的代码: 我之前说过view标签就像是一个笼子,大家可以看到无论是image标签、text标签都放被到了最外层的view标签里面,那我们只需要给最外层的view标签来个样式就行了,可是问题又来了,这个代码里面好像不止一对吧,是不是有三对啊,长的都一样,我怎么能让编译器知道我挑的是第一个啊,大家不要着急,下面我就给大家介绍一个属性叫做class属性,为了方便大家理解这个属性,我再给大家举个小例子:class属性英文翻译过来叫做班级,所有学生都不可能在同一个班级对吧。那么这里我们就把view标签当作学生,我们来给最外层的view标签加一个class属性,它的值就叫container吧,如图: 凡是class的属性在wxss文件里面书写样式的时候前面要写一个“.”,如上图中“container”前面就有个“.”,大家记住就行,里面的”display“属性,英文翻译是展现的意思,它的值是flex,就是弹性模型。“flex-direction”这个属性的意思是项目的排列方向,值是colum,也就是按列布局。这个地方有点不太好理解,大家就知道这两句话能够让它垂直布局就行了。效果图如下: 是不是和成品图差不多了呢,下面我们再给welcome.wxml文件添加几个class属性,如图所示: 我就不给大家一个一个讲解了,因为我感觉我讲的太细了,得给大家一点思考的空间,我把样式里面的不太好理解的属性给大家说一下: 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值相等时,文字垂直居中。 大功告成,大家是不是也学会了呢?如果有什么疑问,欢迎在下方评论留言,下一章我们开始制作我们的博客展示页面,下次见~~~ 
|
社会生活
