discuz n7 导航小工具

源码

<style>
.indexnews-tools{/*margin:10px auto;*/background:var(--comiis-bgf);padding:10px 20px;overflow:hidden;border-radius:var(--comiis-radius-b);border: 1px solid #9595952e;}
.indexnewss-tools li{width:30%;margin-right:5%;float:left;box-sizing:content-box}
.indexnewss-tools li img{float:left;width:32px;height:32px;margin-right:15px;margin-top: 10px;border-radius:10px}
.indexnewss-tools li div{float:left;width:calc(100% - 10px - 25px - 75pt - 25px)}
.indexnewss-tools li div h3,.indexnewss-tools li div span{display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.indexnewss-tools li div h3{font-size:14px;/*color:#333;*/height:25px;line-height:30px;font-weight: normal;}
.indexnewss-tools li div span{font-size:12px;height:26px;line-height:26px;color:#a9a9a9}
.indexnewss-tools li div h3,.indexnewss-tools li div span{display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.indexnewss-tools li .go{float:right;width:60pt;border-radius:20px;height:26px;line-height:26px;margin-top:12px;text-align:center;margin-left:10px;/*color:#FF7800;border:1px solid #FF7800;*/border: 1px solid var(--comiis-fd);transition:.1s all;font-size: 12px;}
.indexnewss-tools li:nth-child(3){margin-right:0;border-right:0;padding-right:0}
</style>
<div class="indexnews-tools">
<ul class="indexnewss-tools layui-clear">
            <li>
                <img src="./index-diy/img/swhz.svg">
                <div>
                    <h3>新帖推送</h3>
                    <span>加入钉钉群，新帖早知道</span>
                </div>
                <a class="go" href="https://www.hbd0.cn/thread-8888-1-1.html" target="_blank">加入群聊</a>
            </li>
            <li>
                <img src="./index-diy/img/sjtj.svg">
                <div>
                    <h3>随机推荐</h3>
                    <span>随机前往一篇帖子</span>
                </div>
                <a class="go" href="/suiji.php" target="_blank">随便看看</a>
            </li>
            <li>
                <img src="./index-diy/img/qqq.svg">
                <div>
                    <h3>官方Q群</h3>
                    <span>跟论坛的朋友一起吹吹牛</span>
                </div>
                <a class="go" href="////" target="_blank">加入Q群</a>
            </li>
</ul>
</div>

小太阳很忙，小云朵想吃糖，长颈鹿嫌脖子不够长，喜欢你太难忘