查看“模板:首页左栏/图鉴导航”的源代码

<h4>必备常用</h4>
<div class="nav-navigation"><!--
  --><div class="nav-item"><!--
--><a link="兑换码" target="_blank"><!--
    -->[[文件:首页推荐图-兑换码.png|160px|class="img"|link=]]<!--
    --></a><!--
  --></div><!--
  --><div class="nav-item"><!--
--><a link="节奏榜" target="_blank"><!--
    -->[[文件:首页推荐图-节奏榜.png|160px|class="img"|link=]]<!--
    --></a><!--
  --></div><!--
  --><div class="nav-item"><!--
--><a link="心愿单" target="_blank"><!--
    -->[[文件:首页推荐图-心愿单.png|160px|class="img"|link=]]<!--
    --></a><!--
  --></div>

* 国服目前还不确定有没有兑换码，后续如果有，会进行更新添加。
* 节奏榜现阶段主要是参考外服数据制作，后续会结合国服进度调整。
* 心愿单更新时间：2024年8月5日16:20:28

</div>

<h4>迷梦攻略</h4>
<div class="nav-navigation"><!--
--><div class="nav-item"><!--
--><a link="迷梦拟形雪怪" target="_blank"><!--
    -->[[文件:首页推荐图-迷梦拟形雪怪.png|160px|class="img"|link=]]<!--
    --></a><!--
  --></div><!--
   --><div class="nav-item"><!--
--><a link="迷梦深渊蚀骨" target="_blank"><!--
    -->[[文件:首页推荐图-迷梦深渊蚀骨.png|160px|class="img"|link=]]<!--
    --></a><!--
  --></div><!-- 
  --><div class="nav-item"><!--
--><a link="迷梦堕神之颅" target="_blank"><!--
    -->[[文件:首页推荐图-迷梦堕神之颅.png|160px|class="img"|link=]]<!--
    --></a><!--
  --></div><!--
    --><div class="nav-item"><!--
--><a link="迷梦孤瞳狼王" target="_blank"><!--
    -->[[文件:首页推荐图-迷梦孤瞳狼王.png|160px|class="img"|link=]]<!--
    --></a><!--
  --></div><!--
      --><div class="nav-item"><!--
--><a link="迷梦沼泽之王" target="_blank"><!--
    -->[[文件:首页推荐图-迷梦沼泽之王.png|160px|class="img"|link=]]<!--
    --></a><!--
  --></div><!--
  --><div class="nav-item"><!--
--><a link="迷梦叶角熊王" target="_blank"><!--
    -->[[文件:首页推荐图-迷梦叶角熊王.png|160px|class="img"|link=]]<!--
    --></a><!--
  --></div>
</div>

<h4>攻略指南</h4>


{{#css:
  .nav-item {
    width: 160px;
    height: 120px;
    overflow: hidden;
    position: relative;
    display: inline-block; /* 确保图片按行排列 */
    background-color: transparent; /* 初始背景色透明 */
    transition: background-color 0.5s ease, box-shadow 0.5s ease; /* 背景色和阴影变化动画 */
    box-shadow: 0px 0px 0px transparent; /* 初始无阴影 */
    margin: 10px; /* 5px外边距 */
    border: 2px solid #36363c; /* 添加边框 */
}
.nav-item img {
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease, opacity 0.5s ease;
    opacity: 0.8; /* 初始透明度 */
}
.nav-item:hover {
    background-color: #9f7850; /* 鼠标悬停时背景色变化 */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
}
.nav-item:hover img {
    transform: scale(1.05); /* 轻微放大 */
    opacity: 1; /* 鼠标悬浮时透明度变为完全不透明 */
}
}}