子比主题美化 – 给顶部幻灯片组件添加一组图标引导栏目

美化步骤

如图所示，在幻灯片简介这里添加代码（显示位置选择为居中）

<div class="slide-desc"><div class="header-slider-card container">
<div class=""><div class="flex jse flex-row gutters-5 flex-col-sm-2">
    <div class="flex1">
        <div class="icon-cover-card flex ac zib-widget">
            <a class="main-color" target="_blank" href="https://www.macgf.com/?s=%E8%AE%BF%E8%BE%BE&type=post">
                <div class="icon-cover-icon" style="font-size: 25px">
                    <img src="/wp-content/themes/zibllsucai/img/zhutishezhi/Code-introduction-image/1/1.png" alt="访达" style="width: 60px;height: 60px">
                </div>
            </a>
            <a class="main-color" target="_blank" href="https://www.macgf.com/?s=CleanMyMac+X&type=post">
                <div class="icon-cover-icon" style="font-size: 25px">
                    <img src="/wp-content/themes/zibllsucai/img/zhutishezhi/Code-introduction-image/1/2.png" alt="CleanMyMac" style="width: 60px;height: 60px">
                </div>
            </a>
            <a class="main-color" target="_blank" href="https://www.macgf.com/?s=After Effects&type=post">
                <div class="icon-cover-icon" style="font-size: 25px">
                    <img src="/wp-content/themes/zibllsucai/img/zhutishezhi/Code-introduction-image/1/3.webp" alt="After Effects" style="width: 60px;height: 60px">
                </div>
            </a>
            <a class="main-color" target="_blank" href="https://www.macgf.com/?s=Photoshop&type=post">
                <div class="icon-cover-icon" style="font-size: 25px">
                    <img src="/wp-content/themes/zibllsucai/img/zhutishezhi/Code-introduction-image/1/256.webp" alt="Photoshop" style="width: 60px;height: 60px">
                </div>
            </a>
            <a class="main-color" target="_blank" href="https://www.macgf.com/?s=Premiere Pro&type=post">
                <div class="icon-cover-icon" style="font-size: 25px">
                    <img src="/wp-content/themes/zibllsucai/img/zhutishezhi/Code-introduction-image/1/28.webp" alt="Premiere Pro" style="width: 60px;height: 60px">
                </div>
            </a>
            <a class="main-color" target="_blank" href="https://www.macgf.com/?s=Sketch&type=post">
                <div class="icon-cover-icon" style="font-size: 25px">
                    <img src="/wp-content/themes/zibllsucai/img/zhutishezhi/Code-introduction-image/1/5.png" alt="Sketch" style="width: 60px;height: 60px">
                </div>
            </a>
            <a class="main-color" target="_blank" href="https://www.macgf.com/?s=Downie&type=post">
                <div class="icon-cover-icon" style="font-size: 25px">
                    <img src="/wp-content/themes/zibllsucai/img/zhutishezhi/Code-introduction-image/1/27.webp" alt="Downie" style="width: 60px;height: 60px">
                </div>
            </a>
            <a class="main-color" target="_blank" href="https://www.macgf.com/?s=DaVinci Resolve&type=post">
                <div class="icon-cover-icon" style="font-size: 25px">
                    <img src="/wp-content/themes/zibllsucai/img/zhutishezhi/Code-introduction-image/1/26.webp" alt="DaVinci Resolve" style="width: 60px;height: 60px">
                </div>
            </a>
            <a class="main-color" target="_blank" href="https://www.macgf.com/?s=Cinema 4D&type=post">
                <div class="icon-cover-icon" style="font-size: 25px">
                    <img src="/wp-content/themes/zibllsucai/img/zhutishezhi/Code-introduction-image/1/25.webp" alt="Cinema 4D" style="width: 60px;height: 60px">
                </div>
            </a>
            <a class="main-color" target="_blank" href="https://www.macgf.com/?s=WeChat&type=post">
                <div class="icon-cover-icon" style="font-size: 25px">
                    <img src="/wp-content/themes/zibllsucai/img/zhutishezhi/Code-introduction-image/1/29.webp" alt="WeChat" style="width: 60px;height: 60px">
                </div>
            </a>
            <a class="main-color" target="_blank" href="https://www.macgf.com/?s=Parallels Desktop&type=post">
                <div class="icon-cover-icon" style="font-size: 25px">
                    <img src="/wp-content/themes/zibllsucai/img/zhutishezhi/Code-introduction-image/1/29.webp" alt="Parallels Desktop" style="width: 60px;height: 60px">
                </div>
            </a>
            <a class="main-color" target="_blank" href="https://www.macgf.com/?s=Office&type=post">
                <div class="icon-cover-icon" style="font-size: 25px">
                    <img src="/wp-content/themes/zibllsucai/img/zhutishezhi/Code-introduction-image/1/29.webp" alt="Office" style="width: 60px;height: 60px">
                </div>
            </a>
            <a class="main-color" target="_blank" href="https://www.macgf.com/?s=AlDente&type=post">
                <div class="icon-cover-icon" style="font-size: 25px">
                    <img src="/wp-content/themes/zibllsucai/img/zhutishezhi/Code-introduction-image/1/29.webp" alt="AlDente" style="width: 60px;height: 60px">
                </div>
            </a>
            <a class="main-color" target="_blank" href="https://www.macgf.com/?s=VMware Fusion&type=post">
                <div class="icon-cover-icon" style="font-size: 25px">
                    <img src="/wp-content/themes/zibllsucai/img/zhutishezhi/Code-introduction-image/1/29.webp" alt="VMware Fusion" style="width: 60px;height: 60px">
                </div>
            </a>
            <a class="main-color" target="_blank" href="https://www.macgf.com/?s=AutoCAD&type=post">
                <div class="icon-cover-icon" style="font-size: 25px">
                    <img src="/wp-content/themes/zibllsucai/img/zhutishezhi/Code-introduction-image/1/29.webp" alt="AutoCAD" style="width: 60px;height: 60px">
                </div>
            </a>      
        </div>
    </div>
</div>
</div></div></div>

自定义css代码

.icon-cover-card {
  display: flex;
  justify-content: center;
  position: relative;
  min-width: 60px; 
}
.icon-cover-icon {
  margin: 0 5px; 
  transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.13, 1.34), margin-top 0.3s cubic-bezier(0.25, 0.1, 0.13, 1.34); /* 添加放大效果的过渡 */
  z-index: 1;
  max-width: 100%; 
  max-height: 100%; 
}
.icon-cover-card:hover .icon-cover-icon:hover {
  transform: scale(1.2) translateY(-5px); 
  z-index: 2; 
  margin-top: -20px;
}
@media screen and (max-width: 768px) {  
      .conter-bottom {  
        display: none;  
    }  
}