合作用户列表图片样式（修复版）

03611
智能摘要
如何让首页瞬间提升专业感与信任度？一个精心设计的合作伙伴列表或许就是答案。本文手把手教你为子比主题首页搭建高颜值企业合作展示区，包含完整代码与样式部署方案。通过实际案例，揭秘如何用16家品牌logo矩阵，搭配“与17万企业共同见证改变”等文案，强化用户信任，提升页面转化力，适合所有希望优化首页视觉效果的运营者参考与复用。
— 此摘要由停车技术员AI分析文章内容生成

为子比主题首页增添一个合作伙伴列表的图片样式是许多站点运营者的共同需求。这样的样式不仅能够美化页面，还可以有效展示合作关系。下面是一些建议，帮助您创建一个优秀的合作用户列表样式，供有需要的朋友自行部署。

图片[1]-合作用户列表图片样式（修复版）-停车技术员

部署代码

  • HTML
  • CSS

    • 这是HTML代码，将下面的代码放到：后台–>>外观–>>自定义HTML，放到你想要展现的地方即可，图片我已经放到图床，自行替换一下合作的LOGO

    <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="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://blog.sdlinka.com/wp-content/uploads/2025/08/logohei-1-1.webp');"></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;
}
    © 版权声明

    本站收集的资源仅供内部学习研究软件设计思想和原理使用，学习研究后请自觉删除，请勿传播，因未及时删除所造成的任何后果责任自负。

    如果用于其他用途，请购买正版支持作者，谢谢！若您认为「BLOG.SDLINKA.COM」发布的内容若侵犯到您的权益，请联系站长进行删除处理。

    本站资源大多存储在云盘，如发现链接失效，请联系我们，我们会第一时间更新。
    THE END
    建站日志
    # 合作伙伴# 首页美化# 子比教程
    喜欢就支持一下吧
    点赞11 分享
    相关推荐
    友链发布规范->发布必看-停车技术员
    友链发布规范->发布必看
    友链发布规范->发布必看
    8天前 60
    访客可见部分内容插件-停车技术员
    访客可见部分内容插件
    访客可见部分内容插件
    34天前 40
    合作用户列表图片样式（修复版）-停车技术员
    合作用户列表图片样式（修复版）
    合作用户列表图片样式（修复版）
    前天 36
    评论 抢沙发

    请登录后发表评论

      暂无评论内容

    百度一下
         
    本站同款优雅的主题
  • 安装wordpress及主题服务一次
  • 一次购买终身免费提供主题更新服务
  • 强大的人工服务，为你解决主题问题
  • 使用无忧，协助使用后台设置
  • 本站同款优化远程协助提升网站速度
    • ￥759
    特别特惠
    ￥799
    立即购买
    默认头像

    海康威视停车管理系统PMS基础配置流程-停车技术员
    24人已阅读
    海康威视停车管理系统PMS基础配置流程
    TOP1
    海康威视智慧停车运营管理云平台配置使用说明书（停车场接入 PMS、NGS）-停车技术员
    海康威视智慧停车运营管理云平台配置使用说明书（停车场接入 PMS、NGS）
    18小时前61人已阅读
    TOP2
    海康威视智慧停车运营管理云平台常见问题（FAQ）-停车技术员
    海康威视智慧停车运营管理云平台常见问题（FAQ）
    18小时前42人已阅读
    TOP3
    海康威视智慧停车运营管理云平台（设备直连/一键上云配置）-停车技术员
    海康威视智慧停车运营管理云平台（设备直连/一键上云配置）
    18小时前34人已阅读
    TOP4
    海康威视智慧停车运营管理云平台（抓拍机一键上云配置）-停车技术员
    海康威视智慧停车运营管理云平台（抓拍机一键上云配置）
    18小时前35人已阅读
    TOP5
    LK-CX900车型识别仪规格书-物流园停车场使用。-停车技术员
    LK-CX900车型识别仪规格书-物流园停车场使用。
    昨天31人已阅读
    TOP6
    首页美化预识别区优化雷达调试雷达安装阿斯顿飞过防砸方案防砸技术门禁控制配置工具邮件测试道闸雷达道闸专利通行记录逃单追缴追缴设置违纪违法远程监控软件测试软件安装车道设置