本系列上一篇教程教了大家如何编写最简单的微信小程序。
但是那只是一个光秃秃的页面，看上去并不好看，今天我们继续讲如何给这个页面添加样式，让它看起来更加美观，教大家如何写一个真正能用的页面。
所有示例的完整源代码都可以从代码库[1]下载。
1.整体风格
微信小程序允许在顶层放置一个app.wxss文件，该文件使用CSS语法来设置页面样式，该文件的设置对所有页面都有效。
注意，小程序虽然使用了CSS样式，但是样式文件的后缀必须写为.wxss。
打开上一个教程中的示例，并在项目顶层创建一个新的 app.wxss 文件，内容如下。
page {
background-color: pink;
}
text {
font-size: 24pt;
color: blue;
}
上述代码将整个页面的背景颜色设置为粉红色，然后将标签的字体大小设置为24点，字体颜色设置为蓝色。
开发者工具导入代码后，得到如下的渲染结果。
可以看到，页面背景颜色变成粉红色，文本字体变大，字体颜色变成蓝色。
在实际开发中，直接设置标签的样式会影响所有的文本，一般不会这样，而是通过属性来区分不同类型的文本，然后针对每种类型设置样式。
打开/home/home.wxml文件，将页面代码改为以下内容。
在上面的代码中，我们给标签添加了一个属性，其值为 。
然后，修改顶层的app.wxss文件，不再直接设置样式，而是成对设置样式。
page {
background-color: pink;
}
.title {
font-size: 24pt;
color: blue;
}
上述代码中，在（.）上方设置了样式，这样就可以将不同的样式以不同的方式呈现，修改之后页面的渲染结果不会改变。
本示例的完整代码可以在代码仓库[2]中找到。
2. 弹性布局
各个页面元素的位置关系我们称之为布局（）。小程序官方推荐使用Flex布局，不熟悉此布局的同学可以阅读我的《Flex布局教程》[3]。
下面演示了如何使用 Flex 布局将文本放置在页面的中心。
首先在/home目录下创建一个home.wxss文件，这个文件中设置的样式只对首页有效，这是因为每个页面通常布局都不一样，所以页面布局一般不会写在全局的app.wxss中。
然后，将以下内容写入home.wxss文件中。
page {
height: 100%;
width: 750rpx;
display: flex;
justify-content: center;
align-items: center;
}
开发者工具导入项目代码，页面渲染结果如下。
我来解释一下上面的WXSS代码，其实挺简单的。
（1）：100%；：页面高度是整个屏幕高度。
（2）： ；：页面宽度是整个屏幕宽度。
注意这里的单位是rpx，而不是px。rpx是小程序为了适配不同宽度的手机屏幕而发明的一个长度单位，不管什么手机屏幕，宽度都是一样的，它的好处就是转换方便，如果一个元素的宽度是页面的一半，那么就写成：;。
（3）：flex;：整个页面采用Flex布局。
（4）-: ;: 页面的一级子元素（本例中）水平居中。
（5）-: ;: 页面的一级子元素（本例中）垂直居中，水平居中和垂直居中的元素相当于位于页面的中心。
本示例的完整代码可以在代码库[4]中找到。
3.WeUI
自己写页面所有样式比较麻烦，也没必要这么做，腾讯封装了一个UI框架WeUI[5]可以使用。
在手机**问 weui.io[6] 就可以看到该UI框架的效果。
在本节中，我们将看到如何使用该框架的 WeUI-WXSS[7] 小程序版本为我们的页面添加官方样式。
首先，进入它的仓库[8]，在 dist/ 目录下找到文件 `weui.wxss`[9]，并将所有源代码[10]复制到你的 app.wxss 文件的头部。
然后，将page/home/home.wxml文件更改为以下内容。
开发者工具导入项目代码，页面渲染结果如下。
可以看到，添加WeUI框架之后，只要给按钮添加不同的样式，框架提供的样式就会自动出现，你可以根据需要为页面选择不同的按钮。
在此示例中，使用了以下元素。
“”
WeUI提供了大量的元素样式，完整列表可以在这里找到[11]。
本示例的完整代码可以在代码库[12]中查看。
4.添加图片
漂亮的页面不能只有文字，还要有图片，小程序的组件就是用来加载图片的。
打开home.wxml文件，将其改为如下代码。
开发者工具加载项目代码，页面渲染结果如下，可以显示图片。
组件有很多属性[13]，例如，可以通过属性指定样式。
默认情况下，图片会占满容器的整个宽度（本例中为宽度），上述代码通过属性指定了图片的高度和宽度（占满页面宽度的一半），渲染结果如下。
当然图片样式不一定要写在组件中，也可以写在WXSS样式文件中。
本示例的完整代码可以在代码库[14]中查看。
5. 图片轮播
小程序原生`[15]可以提供图片轮播效果。
上面页面的图片上方有三个提示点，表示一共有三张图片，可以切换显示。
它的代码非常简单，只需要改变home.wxml文件即可。
上述代码中，组件为轮播组件，其中放置了三个 `[16]，表示有三个轮播项目，每个项目就是一个组件。
组件的-dots属性设置是否显示轮播圆点，-dots属性设置是否自动播放轮播。它们的属性值都是布尔值，这里应该写成{{true}}。这个{{...}}语法表示把代码放在里面，下次再讲解。
本示例的完整代码可以在代码库[17]中查看。
页面样式就讲到这里，下一篇教程会讲解如何在微信小程序中添加脚本来与用户进行交互。
请注意，由于脚本代码量较大，本系列最后两篇教程将不再在微信公众号连载，可以前往我的个人网站阅读。
（超过）
参考
[1]
代码存储库：
[2]
代码存储库：
[3]
弹性布局教程：
[4]
代码存储库：
[5]
我们的UI：
[6]
weui.io：
[7]
WeUI-WXSS：
[8]
库：
[9]
weui.wxss：
[10]
源代码：
[11]
这里：
[12]
代码存储库：
[13]
许多属性：
[14]
代码存储库：
[15]
成分：
[16]
成分：
[17]
代码存储库：
