提供一个好看的合作用户列表图片

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(&quot;https://www.chuangkit.com/distweb/img/mayi.a777bb41.png&quot;);"></div>
                <div class="logo-box" style="background-image: url(&quot;https://www.chuangkit.com/distweb/img/beike.8cbf1f8a.png&quot;);"></div>
                <div class="logo-box" style="background-image: url(&quot;https://www.chuangkit.com/distweb/img/meituan.4bd56b27.png&quot;);"></div>
                <div class="logo-box" style="background-image: url(&quot;https://www.chuangkit.com/distweb/img/huawei.622a3656.png&quot;);"></div>
                <div class="logo-box" style="background-image: url(&quot;https://www.chuangkit.com/distweb/img/alibaba.6d64aa17.png&quot;);"></div>
                <div class="logo-box" style="background-image: url(&quot;https://www.chuangkit.com/distweb/img/jd.fb8f72de.png&quot;);"></div>
                <div class="logo-box" style="background-image: url(&quot;https://www.chuangkit.com/distweb/img/xiecheng.639796e4.png&quot;);"></div>
                <div class="logo-box" style="background-image: url(&quot;https://www.chuangkit.com/distweb/img/walmart.c360e6c9.png&quot;);"></div>
            </div>
            <div class="row second-row">
                <div class="logo-box" style="background-image: url(&quot;https://www.chuangkit.com/distweb/img/jianshe.74b81964.png&quot;);"></div>
                <div class="logo-box" style="background-image: url(&quot;https://www.chuangkit.com/distweb/img/jiaotong.4437efc4.png&quot;);"></div>
                <div class="logo-box" style="background-image: url(&quot;https://www.chuangkit.com/distweb/img/pingan.0985cfc0.png&quot;);"></div>
                <div class="logo-box" style="background-image: url(&quot;https://www.chuangkit.com/distweb/img/aiqiyi.30f85b6d.png&quot;);"></div>
                <div class="logo-box" style="background-image: url(&quot;https://www.chuangkit.com/distweb/img/guangfa.e1d4e24f.png&quot;);"></div>
                <div class="logo-box" style="background-image: url(&quot;https://www.chuangkit.com/distweb/img/jianshe.74b81964.png&quot;);"></div>
                <div class="logo-box" style="background-image: url(&quot;https://www.chuangkit.com/distweb/img/pingan.0985cfc0.png&quot;);"></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代码中调用。。。图片地址自己改！！

<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(&quot;https://www.chuangkit.com/distweb/img/mayi.a777bb41.png&quot;);"></div>
                <div class="logo-box" style="background-image: url(&quot;https://www.chuangkit.com/distweb/img/beike.8cbf1f8a.png&quot;);"></div>
                <div class="logo-box" style="background-image: url(&quot;https://www.chuangkit.com/distweb/img/meituan.4bd56b27.png&quot;);"></div>
                <div class="logo-box" style="background-image: url(&quot;https://www.chuangkit.com/distweb/img/huawei.622a3656.png&quot;);"></div>
                <div class="logo-box" style="background-image: url(&quot;https://www.chuangkit.com/distweb/img/alibaba.6d64aa17.png&quot;);"></div>
                <div class="logo-box" style="background-image: url(&quot;https://www.chuangkit.com/distweb/img/jd.fb8f72de.png&quot;);"></div>
                <div class="logo-box" style="background-image: url(&quot;https://www.chuangkit.com/distweb/img/xiecheng.639796e4.png&quot;);"></div>
                <div class="logo-box" style="background-image: url(&quot;https://www.chuangkit.com/distweb/img/walmart.c360e6c9.png&quot;);"></div>
            </div>
            <div class="row second-row">
                <div class="logo-box" style="background-image: url(&quot;https://www.chuangkit.com/distweb/img/jianshe.74b81964.png&quot;);"></div>
                <div class="logo-box" style="background-image: url(&quot;https://www.chuangkit.com/distweb/img/jiaotong.4437efc4.png&quot;);"></div>
                <div class="logo-box" style="background-image: url(&quot;https://www.chuangkit.com/distweb/img/pingan.0985cfc0.png&quot;);"></div>
                <div class="logo-box" style="background-image: url(&quot;https://www.chuangkit.com/distweb/img/aiqiyi.30f85b6d.png&quot;);"></div>
                <div class="logo-box" style="background-image: url(&quot;https://www.chuangkit.com/distweb/img/guangfa.e1d4e24f.png&quot;);"></div>
                <div class="logo-box" style="background-image: url(&quot;https://www.chuangkit.com/distweb/img/jianshe.74b81964.png&quot;);"></div>
                <div class="logo-box" style="background-image: url(&quot;https://www.chuangkit.com/distweb/img/pingan.0985cfc0.png&quot;);"></div>
            </div>
        </div>
    </div>
    </div>
</div>

<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>

{{userData.name}}已认证

提供一个好看的合作用户列表图片

如何把B2的POST文章列表的发布日期年前改为年月日

-webkit-appearance导致checkbox复选框消失

{{ item.title }}

子主题启用注意事项

7B2给文章列表增加角标【网格模式】

B2 Pro主题顶部样式、菜单设置、角标设置

子主题多图幻灯片及灯箱效果演示

极(子)主题1.8版本安装教程

关于我们 Jitheme

支持与服务

服务器推荐

关注交流

{{userData.name}}已认证

如何把B2的POST文章列表的发布日期*年前改为*年*月*日

-webkit-appearance导致checkbox复选框消失

{{ item.title }}

子主题启用注意事项

7B2给文章列表增加角标【网格模式】

B2 Pro主题顶部样式、菜单设置、角标设置

子主题多图幻灯片及灯箱效果演示

极(子)主题1.8版本安装教程

如何把B2的POST文章列表的发布日期年前改为年月日