子比主题 – 合作用户列表图片样式
为子比主题首页增添一个合作伙伴列表的图片样式是许多子比站点运营者的共同需求。这样的样式不仅能够美化页面，还可以有效展示合作关系。下面是一些建议，帮助您创建一个优秀的合作用户列表样式，供有需要的朋友自行部署。代码部署
一共两个部分的代码，一个是HTML，一个是css样式，跟着我的步骤走不会有错
这是HTML代码，将下面的代码放到：后台–>>外观–>>自定义HTML，放到你想要展现的地方即可，图片我已经放到图床，自行替换一下合作的LOGO
<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="row first-row">
<div class="logo-box" style="background-image: url("https://img.alicdn.com/imgextra/i1/2210123621994/O1CN01oMqGNc1QbIlvWjCas_!!2210123621994.png");"></div>
<div class="logo-box" style="background-image: url("https://img.alicdn.com/imgextra/i1/2210123621994/O1CN01PHJLPJ1QbIlrKHnCC_!!2210123621994.png");"></div>
<div class="logo-box" style="background-image: url("https://img.alicdn.com/imgextra/i4/2210123621994/O1CN01c2RPRk1QbIltKsQk9_!!2210123621994.png");"></div>
<div class="logo-box" style="background-image: url("https://img.alicdn.com/imgextra/i4/2210123621994/O1CN014MhT9q1QbIlu5c0SO_!!2210123621994.png");"></div>
<div class="logo-box" style="background-image: url("https://img.alicdn.com/imgextra/i4/2210123621994/O1CN014nuX131QbIlrKHzgU_!!2210123621994.png");"></div>
<div class="logo-box" style="background-image: url("https://img.alicdn.com/imgextra/i3/2210123621994/O1CN01hk4EO91QbIlsFrjuk_!!2210123621994.png");"></div>
<div class="logo-box" style="background-image: url("https://img.alicdn.com/imgextra/i3/2210123621994/O1CN01wQ2dA31QbIlsFsoQS_!!2210123621994.png");"></div>
<div class="logo-box" style="background-image: url("https://img.alicdn.com/imgextra/i4/2210123621994/O1CN01kQdE8K1QbIlulv6qG_!!2210123621994.png");"></div>
</div>
<div class="row second-row">
<div class="logo-box" style="background-image: url("https://img.alicdn.com/imgextra/i4/2210123621994/O1CN01o87Q6n1QbIlvTGu8w_!!2210123621994.png");"></div>
<div class="logo-box" style="background-image: url("https://img.alicdn.com/imgextra/i3/2210123621994/O1CN011fgV5Q1QbIltKviVI_!!2210123621994.png");"></div>
<div class="logo-box" style="background-image: url("https://img.alicdn.com/imgextra/i2/2210123621994/O1CN01fNF2Qv1QbIltKuZpr_!!2210123621994.png");"></div>
<div class="logo-box" style="background-image: url("https://img.alicdn.com/imgextra/i3/2210123621994/O1CN01K1gURH1QbIls2A0vo_!!2210123621994.png");"></div>
<div class="logo-box" style="background-image: url("https://img.alicdn.com/imgextra/i4/2210123621994/O1CN01CkCYs11QbIluluAfi_!!2210123621994.png");"></div>
<div class="logo-box" style="background-image: url("https://img.alicdn.com/imgextra/i1/2210123621994/O1CN01vD4SHS1QbIluluZbb_!!2210123621994.png");"></div>
<div class="logo-box" style="background-image: url("https://tfbk.jzpix.cn/logo.png");"></div>
</div>
</div>
</div>
</div>
</div>
这是CSS代码，直接丢到：子比主题–>>自定义CSS样式即可
.home-page-container .company-logo-box .company-logo .company-bg {
width: 180px;
height: 258px;
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: var(--main-color)
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;
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
}
页:
[1]