效果预览：

使用方法：

1、子比主题目录下header.php 底部添加下方核心函数代码

2、zibll/functions.php添加以下代码，如有添加过此代码请跳过此步骤

3、zibll/footer.php加入以下代码

CSS代码：

Zibll主题设置 >> 全局&功能 >> 自定义代码 >> 自定义CSS样式

.hanjiang-info-item{display:grid;grid-gap:15px;grid-template-columns: repeat(6,1fr);grid-template-rows:repeat(2,1fr);width:100%;height:280px;margin-bottom:15px;}
.hanjiang-llzs-item, .hanjiang-sjcs-item, .hanjiang-yhzs-item, .hanjiang-yxsj-item{width:100%;height:100%;border-radius:8px;text-align:center;box-shadow:0 2px 4px 0 rgba(0,0%,0%,5%);background-color:var(--main-bg-color);overflow:hidden;padding:5px;box-sizing:border-box;}
.hanjiang-i-num{font-size:20px;font-weight:600}
.hanjiang-yxsj-item{display:flex;align-items:center;justify-content:center;flex-direction:column}
.hanjiang-yhzs-item{display:flex;align-items:center;justify-content:center;flex-direction:column}
.hanjiang-llzs-item{display:flex;align-items:center;justify-content:center;flex-direction:column}
.hanjiang-wz-item{display:grid;grid-gap:20px;grid-template-columns:repeat(2,1fr);grid-column: 3/6;grid-row:1/2;overflow:unset!important;box-shadow:none!important;padding:0!important;}
.hanjiang-wz-sty{width:100%;height:100%;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-direction:column;background-color:var(--main-bg-color);box-shadow:0 2px 4px 0 rgba(0,0%,0%,5%)}
.hanjiang-sjcs-item{grid-row: 1/3;grid-column: 1/3;}
.hanjiang-sjcj-m{position:relative;font-size:20px;font-weight:700;text-align:center;width:100%;height:100%;padding:10px;box-sizing:border-box;}
.hanjiang-sjcj-content{text-align:center;margin-top:10px}
.hanjiang-meo-item{width:282px;height:120px;margin:0 auto}
.hanjiang-meo-item>img{width:100%;height:100%;background-size:cover;background-repeat:no-repeat;background-position:center center;cursor:pointer}
svg.icon.fa-2x {margin-top: 15px;}
@media screen and (max-width:959px){.hanjiang-info-item{grid-gap:10px;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);height:500px;}
.hanjiang-sjcs-item{grid-row:3/5;grid-column:1/4}
.hanjiang-i-num{font-size:20px}
.hanjiang-sjcj-m{font-size:16px}}
.enlighter-default .enlighter{max-height:400px;overflow-y:auto !important;}.posts-item .item-heading>a {font-weight: bold;color: unset;}@media (max-width:640px) {.meta-right .meta-view{display: unset !important;}}
.hanjiang-sjcs-item2 {grid-row: 1/3;}
.hanjiang-sjcs-item2 {width: 100%;height: 100%;border-radius: 8px;text-align: center;box-shadow: 0 2px 4px 0 rgba(0,0%,0%,5%);background-color: var(--main-bg-color);box-sizing: border-box;grid-row: 1/3;grid-column: 6/6;}
@media screen and (max-width:959px){.hanjiang-wz-item{grid-column: 1/4}.hanjiang-sjcs-item2 {display:none}}
.hanjiang-ip-item, .hanjiang-sjcs-item, .hanjiang-yhzs-item, .hanjiang-yxsj-item{width:100%;height:100%;border-radius:8px;text-align:center;box-shadow:0 2px 4px 0 rgba(0,0%,0%,5%);background-color:var(--main-bg-color);overflow:hidden;padding:5px;box-sizing:border-box;}
.hanjiang-ip-item{display:flex;align-items:center;justify-content:center;flex-direction:column}

最后下载附件上传至网站