外观小工具：新增一个导航框（用了主题的框架，仅适配一为主题）

外观小工具：新增一个导航框（用了主题的框架，仅适配一为主题）自行添加到小工具，然后使用嵌入代码即可。

更多美化内容可以关注我的网站：https://navw.cn/（欢迎大家申请友联）

<div id="iow_ranking_post_min-4" class="fx-header-bg card io-sidebar-widget io-widget-ranking-list ajax-parent">
<div class="sidebar-header ">
<div class="card-header widget-header">
<h3 class="text-md mb-0">次级导航</h3>
</div>
</div>
<div class="cards">
<br>
<a href="https://navw.cn/" class="card red">
<p class="tip">AIGC 智能导航</p>生成式人工智能工具平台
</a>
<a href="https://navw.cn/" class="card blue">
<p class="tip">行业企业 导航</p>全网最全的实体行业
</a>
<a href="https://vip.lzzcc.cn/" class="card green">
<p class="tip">大海资源库</p>大海官网-优质资源
</a>
<br>
</div>
</div>
<style>
.cards {
display: flex;
flex-direction: column;
gap: 15px;
margin: 0 auto; /* 水平居中 */
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
}

.cards .red {
background-color: #f43f5e;
}

.cards .blue {
background-color: #3b82f6;
}

.cards .green {
background-color: #22c55e;
}

.cards .card {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
height: 70px;
width: 250px;
border-radius: 5px;
color: white;
cursor: pointer;
transition: 400ms;
line-height: 1em;
}

.cards .card p.tip {
font-size: 1em;
font-weight: 400;
}

.cards .card:hover {
transform: scale(1.1, 1.1);
}

.cards:hover > .card:not(:hover) {
filter: blur(10px);
transform: scale(0.9, 0.9);
}
</style>