友情链接

<div class="links"> <ul> <li> <a href="" target="_blank"> <img src="https://q2.qlogo.cn/headimg_dl?dst_uin=334452099&spec=100"> <span>雅蠛蝶</span> <div>如果哪天想起我的好了，别哭，别想，别回头，我不在。</div> </a> </li> </ul> </div> <style> .links ul{padding:0;width:100%;}.links ul li{width:66%;border-style:solid;border-width:2px;border-color:#42b88380;padding:12px;margin:12px;overflow:hidden;border-radius:10px;}@media (max-width:1024px){.links ul li{width:83%;}}.links ul li img{float:left;padding:1px;margin-top:3px !important;margin-left:3px !important;margin-right:3px !important;width:90px;height:90px;border-radius:100% !important;}.links ul li img:hover{opacity:.6;}</style>

二级菜单

<cd class="menu-container"> <a href="#" class="menu-trigger">meow</a> <div class="submenu"> <ul> <li> <a href="#" class="submenu-item submenu-trigger" id="option-1">meow 1</a> <div class="submenu-2" id="submenu-2"> <ul> <li><a href="#">meow 1</a></li> <li><a href="#">meow 2</a></li> </ul> </div> <a href="#" class="submenu-item">meow 1</a> <a href="#" class="submenu-item">meow 2</a> <a href="#" class="submenu-item">meow 3</a> </li> </ul> </div> </cd> <style> body{background:url('');}.submenu, .submenu-2{display:none;position:absolute;background:#fff6;border:1px solid #fff;width:166px;z-index:1234;border-radius:15px;}.submenu-2{top:-1px;left:100%;}.submenu ul{list-style:none;padding:0;margin:0;}.submenu ul li a{display:block;padding:10px;text-decoration:none;color:#000;border-radius:15px;}.menu-container:hover .submenu, .submenu ul li:hover>.submenu-2{display:block;}.menu-trigger:hover, .submenu-item:hover, .submenu-2 a:hover{background-color:#ffffff66;}</style> <script> const option1 = document.getElementById("option-1");const submenu2 = document.getElementById("submenu-2");const menuContainer = document.querySelector(".menu-container");option1.addEventListener("mouseover", () => submenu2.style.display = "block");menuContainer.addEventListener("mouseleave", () => submenu2.style.display = "none");option1.addEventListener("mouseout", (e) =>{if (!submenu2.contains(e.relatedTarget)) submenu2.style.display = "none";});submenu2.addEventListener("mouseover", () => submenu2.style.display = "block");submenu2.addEventListener("mouseout", (e) =>{if (!submenu2.contains(e.relatedTarget)) submenu2.style.display = "none";});option1.addEventListener("click", (e) =>{e.preventDefault();submenu2.style.display = submenu2.style.display === "block" ? "none":"block";});</script>

侧边栏底部图
Cuckoo/includes/header.php

<!--末尾</ul>插入--><img src="https://raw.githubusercontent.com/mikot0/moe/refs/heads/main/image/index/mikoto1-1.png" alt="底部图片" style="width: 100%; height: auto; display: block; margin-top: -150px;">