小程序搭建的时候如果只使用组件的默认样式，搭建出来的程序样式比较呆板，好听一点的词就是比较素。在没有设计师参与的情况下，我们怎么能美化一下样式呢？学习的方法是借鉴官方的模板，我们将官方的模板拆分出知识点，细节学会了日后自己搭建小程序的时候也就有了思路。
我们今天要拆解的模板就是官方模板的网站模板
在这里插入图片描述模板启用后我们就进入到应用中仔细研究一下
在这里插入图片描述学习最好的方法就是实操，通过实操来观察各种属性究竟是干什么用的，我们新建一个应用用来练习样式的制作
在这里插入图片描述背景色
CSS中有背景色的概念，一般会给页面设置整体的背景色，那微搭中是否可以设置背景色呢？我们找一下低码编辑中设置的样式
在这里插入图片描述可以看到是给body标签设置了一个背景色，我们在我们的学习应用中模仿的做一下。为了突出显示效果，我把背景色设置成红色
代码语言：txt复制body{
background: red;
}样式的话是在页面的style文件里定义
在这里插入图片描述保存之后可以看到了页面的背景色变成了红色
在这里插入图片描述给一个背景色的目的是使页面看起来有一定的风格，微信的整体风格是灰色调，所以在模板中的背景色是设置成了灰色。
学习官方模板不懂的地方最有效率的是查阅MDN，比如我不知道这个属性给啥值，那么我就去查一下
在这里插入图片描述学习过程中不停的查阅资料是必不可少的动作。官网模板的属性设置貌似是有一点问题的，背景色的值设置支持几种模式
在这里插入图片描述MDN最大的好处是你可以直接切换值设置的模式，可以看到不同的模式的变化。我们可以直接给颜色值，比如red就代表是红色，也可以给16进制的颜色值，比如#F8F8F8，颜色值一般我们是从调色板获取，设计师也会直接给出值。rgba模式即可设置颜色也可以设置透明度，有的颜色是亮的有的是暗的，可以通过设置透明度来控制。当然实践中我们一般使用16进制的颜色值比较多。
总结
本节我们粗略的学习了一下样式中背景色的设置知识，当然了设置值是个技术活，而为什么设置成这个值又涉及到艺术的问题，所以有时候技术和艺术是分不开的。有一定的美术基础最好不过了。
