下载掌阅APP，畅读海量书库
立即打开
完成田字形的布局效果，如图2-9所示。
图2-9 田字形的布局效果
1）页面中划分了4个相同大小的区域，各区域有边框、背景色等样式。
2）4个区域居中于页面，并围成一个田字形。
1 打开index.wxml，添加＜view class="box"＞、＜view class="subbox"＞、＜view class="view1"＞、＜view class="view2"＞、＜view class="view3"＞、＜view class="view4"＞等组件。
2 打开index.wxss，添加.box、.subbox、.view1、.view2、.view3、.view4等样式，实现视图效果，如图2-9所示。
1）使用颜色名称，例如，红色设为red。
2）使用十六进制值，例如，红色设为#ff0000。
3）使用rgb（）函数，例如，红色设为rgb（255，0，0）。
4）使用rgba（）函数，例如，红色且半透明设为rgba（255，0，0，0.5）。
5）使用linear-gradient（）函数，例如，从顶向下的红色、黄色、白色渐变设为linear-gradient（top，red，yellow，white）。
r：红色值，可用正整数或百分数。
g：绿色值，可用正整数或百分数。
b：蓝色值，可用正整数或百分数。
r：红色值，可用正整数或百分数。
g：绿色值，可用正整数或百分数。
b：蓝色值，可用正整数或百分数。
a：Alpha透明度，取值为0～1。
#EE00EE表示颜色时，相当于rgb（255，0，255）。#EE00EE有时可以缩写成#E0E。