WordPress系统7B2主题增加一个好看的合作用户列表图片，相信大家都知道企业网站会有一个合作伙伴的模块，于是我也有了这个想法。于是就做了这个界面，后续还会不断地优化。
Html代码
<div class="home-page-container">
<div class="wrapper">
<div class="company-logo-box">
<div class="sub-title">与众多会员用户共同见证改变</div>
<div class="small-des">渡漳网感谢每一位企业合作伙伴的支持与信任</div>
<div class="company-logo">
<div class="company-bg left"></div>
<div class="company-bg right"></div>
<div class="row first-row">
<div class="logo-box" style="background-image: url("https://www.chuangkit.com/distweb/img/mayi.a777bb41.png");"></div>
<div class="logo-box" style="background-image: url("https://www.chuangkit.com/distweb/img/beike.8cbf1f8a.png");"></div>
<div class="logo-box" style="background-image: url("https://www.chuangkit.com/distweb/img/meituan.4bd56b27.png");"></div>
<div class="logo-box" style="background-image: url("https://www.chuangkit.com/distweb/img/huawei.622a3656.png");"></div>
<div class="logo-box" style="background-image: url("https://www.chuangkit.com/distweb/img/alibaba.6d64aa17.png");"></div>
<div class="logo-box" style="background-image: url("https://www.chuangkit.com/distweb/img/jd.fb8f72de.png");"></div>
<div class="logo-box" style="background-image: url("https://www.chuangkit.com/distweb/img/xiecheng.639796e4.png");"></div>
<div class="logo-box" style="background-image: url("https://www.chuangkit.com/distweb/img/walmart.c360e6c9.png");"></div>
</div>
<div class="row second-row">
<div class="logo-box" style="background-image: url("https://www.chuangkit.com/distweb/img/jianshe.74b81964.png");"></div>
<div class="logo-box" style="background-image: url("https://www.chuangkit.com/distweb/img/jiaotong.4437efc4.png");"></div>
<div class="logo-box" style="background-image: url("https://www.chuangkit.com/distweb/img/pingan.0985cfc0.png");"></div>
<div class="logo-box" style="background-image: url("https://www.chuangkit.com/distweb/img/aiqiyi.30f85b6d.png");"></div>
<div class="logo-box" style="background-image: url("https://www.chuangkit.com/distweb/img/guangfa.e1d4e24f.png");"></div>
<div class="logo-box" style="background-image: url("https://www.chuangkit.com/distweb/img/jianshe.74b81964.png");"></div>
<div class="logo-box" style="background-image: url("https://www.chuangkit.com/distweb/img/pingan.0985cfc0.png");"></div>
</div>
</div>
</div>
</div>
</div>CSS代码
/** 合作伙伴-www.dzcrv.com **/
.home-page-container .company-logo-box .company-logo .company-bg {
width: 180px;
height: 258px;
background-image: url(https://www.chuangkit.com/distweb/img/company-bg.a3a77d0d.png);
background-size: cover;
background-position: -100px 0;
position: absolute;
}
.home-page-container .company-logo-box .company-logo .second-row {
width: 100%;
height: 83px;
}
.home-page-container .small-des {
font-size: 16px !important;
}
.home-page-container .small-des {
font-size: 15px;
font-weight: 400;
color: #505a71;
margin-top: 32px;
margin-bottom: 32px;
}
.home-page-container .sub-title {
font-size: 2.3vw;
font-weight: 400;
}
.home-page-container .company-logo-box .sub-title {
margin-top: 110px;
}
.home-page-container .sub-title {
font-size: 48px !important;
}
.home-page-container .company-logo-box {
width: 100%;
height: 470px;
background-color: #fff;
display: flex;
flex-direction: column;
align-items: center
}
.home-page-container .company-logo-box .sub-title {
margin-top: 40px;
}
.home-page-container .company-logo-box .company-logo {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
width: 100%;
}
.home-page-container .company-logo-box .company-logo .logo-box {
width: 12.5%;
height: 83px;
margin: 5px 10px;
background-color: #fff;
background-size: contain;
background-position: 50%;
background-repeat: no-repeat;
border-radius: 32px;
border: 1px solid rgba(0,0,0,.03);
box-shadow: 0 5px 10px 0 rgba(112,130,193,.1);
}
.home-page-container .company-logo-box .company-logo .row {
display: flex;
justify-content: space-between
}
.home-page-container .company-logo-box .company-logo .first-row {
width:100%;
height: 83px;
margin-bottom: 32px
}
.home-page-container .company-logo-box .company-logo .left {
top: 0;
left: 0
}
.home-page-container .company-logo-box .company-logo .right {
top: 0;
right: 0;
-webkit-transform: rotate(180deg);
transform: rotate(180deg)
}
.home-page-container .data-box {
width: 100%;
height: 561px;
background-color: #f5f7fd;
position: relative
}
.home-page-container .data-box .rotate-container-res .block-3 {
position: absolute;
top: -130%;
left: -10%
}
.home-page-container .data-box .rotate-container-res .block-1 {
position: absolute;
top: 30%;
left: 70%
}
.home-page-container .data-box .content-box {
width: 100%;
height: 100%;
padding: 130px 136px;
position: absolute;
top: 0;
left: 0;
display: flex;
justify-content: space-around
}
.home-page-container .data-box .content-box .left {
display: flex;
flex-direction: column;
justify-content: space-between
}
.home-page-container .data-box .content-box .left .small-des {
margin-bottom: 80px
}
.home-page-container .data-box .content-box .right {
width: 53%;
display: flex;
justify-content: space-between;
align-items: flex-end
}
.home-page-container .data-box .content-box .right .num-container:not(:first-child) {
margin-left: 40px
}
.home-page-container .data-box .content-box .right .num-container .number {
color: var(--1,#1b2337);
font-family: PingFang SC;
font-size: 3.5vw;
font-weight: 400
}
.home-page-container .data-box .content-box .right .num-container .unit {
color: var(--1,#1b2337);
font-family: PingFang SC;
font-size: 16px;
font-weight: 400
}
.home-page-container .data-box .content-box .right .num-container .number-title {
color: var(--2,#505a71);
font-family: PingFang SC;
font-size: 14px;
font-weight: 400;
margin-top: 24px
}
