描述：在开发小程序过程中，发现一些不错的案例，平时使用也比较多，稍微总结了下经验，以下内容可以直接复制使用，希望对大家有所帮助，废话不多说直接上干货！

一、小程序：模组-瓷片区

（一）样式图

---

 

（二）代码部分

2.1：wxml

<!-- --------------------------【序号003：瓷片区+弥散渐变】----------------------------------- -->
<view style="height: 50rpx;background-color: #FFA07A;"><text>序号003：瓷片区+弥散渐变</text></view>
<view class="tile-container"><view class="tile" style="background: linear-gradient(to right, #ffcccc, #ccffff);"></view><view class="tile" style="background: linear-gradient(to right, #ccffcc, #99ccff);"></view><view class="tile" style="background: linear-gradient(to right, #ffcc99, #ccffff);"></view><view class="tile" style="background: linear-gradient(to right, #FFD3B5, #FFB78C);"></view><view class="tile" style="background: linear-gradient(to right, #9AD7E9, #B5E2FF);"></view><view class="tile" style="background: linear-gradient(to right, #B4EDB9, #E0F9E0);"></view>
</view><!-- --------------------------【序号002：瓷片区+内容】----------------------------------- -->
<view style="height: 50rpx;background-color: #FFA07A;"><text>序号002：瓷片区+内容</text></view>
<view class="main-container2"><view class="left-area2"><view class="left-tile2" style="background-color: #FFD700;"><view class="left-content2-1"><text class="title2">这是顶部标题</text><text class="subtitle2">这是小标题</text></view></view></view><view class="right-area2"><view class="right-top-tile2" style="background-color: #98FB98;"><view class="left-content2-2"><text class="title2">这是顶部标题</text><text class="subtitle2">这是小标题</text></view></view><view class="right-bottom-tile2" style="background-color: #FFB6C1;"><view class="left-content2-3"><text class="title2">这是顶部标题</text><text class="subtitle2">这是小标题</text></view></view></view>
</view><!-- --------------------------【序号001：瓷片区】----------------------------------- -->
<view style="height: 50rpx;background-color: #FFA07A;"><text>序号001：瓷片区</text></view>
<view class="main-container1"><view class="left-area1"><view class="left-tile1" style="background-color: #FFD700;"></view></view><view class="right-area1"><view class="right-top-tile1" style="background-color: #98FB98;"></view><view class="right-bottom-tile1" style="background-color: #FFB6C1;"></view></view>
</view><!-- --------------------------【序号000：瓷片区】----------------------------------- -->
<view style="height: 50rpx;background-color: #FFA07A;"><text>序号000：瓷片区</text></view>
<view class="main-container"><view class="left-area"><view class="left-tile" style="background-color: #FFD700;"></view></view><view class="middle-area"><view class="middle-top-tile" style="background-color: #ADD8E6;"></view><view class="middle-bottom-tile" style="background-color: #FFA07A;"></view></view><view class="right-area"><view class="right-top-tile" style="background-color: #98FB98;"></view><view class="right-bottom-tile" style="background-color: #FFB6C1;"></view></view>
</view>

---

 

2.2：wxss代码

/* --------------------------【序号003：瓷片区+弥散渐变】----------------------------------- */
.tile-container {display: flex;flex-wrap: wrap;justify-content: space-between;align-content: space-between;width: 100%;height: 120px; /* 设置瓷片区的高度 */background-color: #D3D3D3;/* 设置浅灰色背景色 */margin-bottom: 10px;
}.tile {width: 30%; /* 设置每个瓷片的宽度 */height: 44%; /* 设置每个瓷片的高度 */margin-top: 2%;
}/* --------------------------【序号002：瓷片区+内容】----------------------------------- */
.main-container2 {display: flex;justify-content: space-between;align-items: stretch;padding-bottom: 10rpx;height: 300rpx;/* 设置整个布局的高度 */background-color: #D3D3D3;/* 设置浅灰色背景色 */margin-bottom: 10px;
}.left-area2 {width: 43%;
}.right-area2 {width: 55%;
}.left-tile2 {height: 100%;padding-bottom: 10rpx;margin-left: 20rpx;
}.right-top-tile2,
.right-bottom-tile2 {height: 50%;/* 设置瓷砖高度，左侧和中间右侧一样高 */
}.right-bottom-tile2 {margin-top: 10rpx;/* 设置瓷砖高度，左侧和中间右侧一样高 */
}.right-top-tile2,
.right-bottom-tile2 {margin-right: 20rpx;
}/* ---瓷片区里面的内容--- */
.left-content2-1,
.left-content2-2,
.left-content2-3 {display: flex;flex-direction: column;align-items: center;/* 水平居中 */height: 100%;
}.left-content2-1 {justify-content: center; /* 垂直居中 */
}
.left-content2-2 {justify-content: flex-start;/* 垂直居上 */
}
.left-content2-3 {justify-content: flex-end;/* 垂直居上 */
}.title2 {font-size: 35rpx;/* 或其他您喜欢的尺寸 */font-weight: bold;color: #000000;/* 黑色 */margin-bottom: 5rpx;/* 调整标题和副标题的间距 */
}.subtitle2 {font-size: 25rpx;/* 或其他您喜欢的尺寸 */color: #808080;/* 灰色 */
}.image2 {width: 100%;height: auto;margin-top: 10rpx;
}/* --------------------------【序号001：瓷片区+3个】----------------------------------- */
.main-container1 {display: flex;justify-content: space-between;align-items: stretch;padding-bottom: 10rpx;height: 300rpx;/* 设置整个布局的高度 */background-color: #D3D3D3;/* 设置浅灰色背景色 */margin-bottom: 10px;
}.left-area1 {width: 43%;
}.right-area1 {width: 55%;
}.left-tile1 {height: 100%;padding-bottom: 10rpx;margin-left: 20rpx;
}.right-top-tile1,
.right-bottom-tile1 {height: 50%;/* 设置瓷砖高度，左侧和中间右侧一样高 */
}.right-bottom-tile1 {margin-top: 10rpx;/* 设置瓷砖高度，左侧和中间右侧一样高 */
}.right-top-tile1,
.right-bottom-tile1 {margin-right: 20rpx;
}/* --------------------------【序号000：瓷片区+5个】----------------------------------- */
.main-container {display: flex;justify-content: space-between;align-items: stretch;padding-bottom: 10rpx;height: 300rpx;/* 设置整个布局的高度 */background-color: #D3D3D3;/* 设置浅灰色背景色 */margin-bottom: 10px;
}.left-area,
.middle-area,
.right-area {width: 32%;/* 设置左、中、右区域宽度 */
}.left-tile {height: 100%;/* 设置瓷砖高度，左侧和中间右侧一样高 */padding-bottom: 10rpx;margin-left: 10rpx;
}.middle-top-tile,
.middle-bottom-tile,
.right-top-tile,
.right-bottom-tile {height: 50%;/* 设置瓷砖高度，左侧和中间右侧一样高 */
}.middle-bottom-tile,
.right-bottom-tile {margin-top: 10rpx;/* 设置瓷砖高度，左侧和中间右侧一样高 */
}.right-top-tile,
.right-bottom-tile {margin-right: 10rpx;
}