HTML代码-提供一个好看的合作用户列表图片

HTML代码

<div class="home-page-container">
    <div class="wrapper">
        <div class="company-logo-box">
        <div class="sub-title">与170000家企业用户共同见证改变</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代码

<style>

.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
}
</style>

如果你不会整合，就用下面这个代码，直接HTML代码中调用。。。图片地址自己改！！