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代码中调用。。。图片地址自己改！！
声明：本文由老胡发布，本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。