微搭低代码样式开发-背景色

Posted 2021-09-04 低代码布道师

小程序搭建的时候如果只使用组件的默认样式，搭建出来的程序样式比较呆板，好听一点的词就是比较素。在没有设计师参与的情况下，我们怎么能美化一下样式呢？学习的方法是借鉴官方的模板，我们将官方的模板拆分出知识点，细节学会了日后自己搭建小程序的时候也就有了思路。

我们今天要拆解的模板就是官方模板的网站模板

模板启用后我们就进入到应用中仔细研究一下

学习最好的方法就是实操，通过实操来观察各种属性究竟是干什么用的，我们新建一个应用用来练习样式的制作

背景色

CSS中有背景色的概念，一般会给页面设置整体的背景色，那微搭中是否可以设置背景色呢？我们找一下低码编辑中设置的样式

可以看到是给body标签设置了一个背景色，我们在我们的学习应用中模仿的做一下。为了突出显示效果，我把背景色设置成红色

body{
  background: red;
}

样式的话是在页面的style文件里定义

保存之后可以看到了页面的背景色变成了红色

给一个背景色的目的是使页面看起来有一定的风格，微信的整体风格是灰色调，所以在模板中的背景色是设置成了灰色。

学习官方模板不懂的地方最有效率的是查阅MDN，比如我不知道这个属性给啥值，那么我就去查一下

学习过程中不停的查阅资料是必不可少的动作。官网模板的属性设置貌似是有一点问题的，背景色的值设置支持几种模式

MDN最大的好处是你可以直接切换值设置的模式，可以看到不同的模式的变化。我们可以直接给颜色值，比如red就代表是红色，也可以给16进制的颜色值，比如#F8F8F8，颜色值一般我们是从调色板获取，设计师也会直接给出值。rgba模式即可设置颜色也可以设置透明度，有的颜色是亮的有的是暗的，可以通过设置透明度来控制。当然实践中我们一般使用16进制的颜色值比较多。

总结

本节我们粗略的学习了一下样式中背景色的设置知识，当然了设置值是个技术活，而为什么设置成这个值又涉及到艺术的问题，所以有时候技术和艺术是分不开的。有一定的美术基础最好不过了。