教程

网页工具集合页面采用HTML+CSS，我把HTML和CSS写到了一起（主要是我用WordPress，方便直接在后台创建页面），若懂得前端的，自己简化、修改吧！

如果你也使用WordPress的话应该可以和我一样直接在后台通过自定义HTML创建页面来使用！话不多说，下面就分享代码！

极简教程：打开后台→页面 → 创建页面 → 内容选择自定义html → 复制以下代码

<div class="box-body theme-box radius8 main-bg main-shadow"> <style> .wiiuii-card-nav{display:flex;flex-wrap:wrap;margin:20px 0}.wiiuii-card-nav .item{width:25%;padding:10px}.wiiuii-card-nav .nav{display:flex;align-items:center;border-radius:8px;box-shadow:0px 0px 10px rgba(0,0,0,0.2);transition:-webkit-transform 0.35s;transition:transform 0.35s;transition:transform 0.35s, -webkit-transform 0.35s;padding:20px 10px}.wiiuii-card-nav .nav .avatar{min-width:40px;min-height:40px;width:40px;height:40px;background-size:cover;border-radius:8px;margin-right:10px}.wiiuii-card-nav .nav .content{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.wiiuii-card-nav .nav svg{width:18px;height:18px;min-width:18px;min-height:18px;fill:#fff}.wiiuii-card-nav .nav:hover{text-decoration:none !important;-webkit-transform:translate3d(0, -5px, 0);transform:translate3d(0, -5px, 0)}@media (max-width: 1200px){.wiiuii-card-nav .item{width:33.3333333%;padding:10px}}@media (max-width: 992px){.wiiuii-card-nav .item{width:50%;padding:10px}.wiiuii-card-nav .nav svg{display:none}.wiiuii-card-nav{margin:15px 0}}@media screen and (max-width: 768px){.wiiuii-card-nav .item{width:100%;padding:10px}.wiiuii-card-nav .nav svg{display:none}.wiiuii-card-nav{margin:15px 0}} </style> <div class="wiiuii-card-nav"> <!----> <div class="item"> <a href="/%e6%8a%96%e9%9f%b3%e6%96%9c%e5%ad%97%e4%bd%93/" class="nav" target="_blank" rel="noopener"> <span class="avatar" style="background-image: url(https://guanzenan.oss-cn-beijing.aliyuncs.com/2021/10/23/468bb0e88175a.png)"></span> <span class="content" style="font-weight: bold;">抖音斜体字生成</span><i class="fa fa-paper-plane-o" aria-hidden="true"></i></a> </div> <div class="item"> <a href="#" class="nav" target="_blank" rel="noopener"> <span class="avatar" style="background-image: url(https://guanzenan.oss-cn-beijing.aliyuncs.com/2021/10/23/f925a9bd1030e.png)"></span> <span class="content" style="font-weight: bold;">云音乐</span> <i class="fa fa-paper-plane-o" aria-hidden="true"></i></a> </div> <div class="item"> <a href="/730-2/" class="nav" target="_blank" rel="noopener"> <span class="avatar" style="background-image: url(https://guanzenan.oss-cn-beijing.aliyuncs.com/2021/10/23/7c967cef51f0e.png)"></span> <span class="content" style="font-weight: bold;">A P I 接口</span><i class="fa fa-paper-plane-o" aria-hidden="true"></i></a> </div> <div class="item"> <a href="/%e5%85%a8%e7%bd%91%e5%bd%b1%e8%a7%86%e8%a7%a3%e6%9e%90/" class="nav" target="_blank" rel="noopener"> <span class="avatar" style="background-image: url(https://guanzenan.oss-cn-beijing.aliyuncs.com/2021/10/23/bf1e6f796b0dc.png)"></span> <span class="content" style="font-weight: bold;">视 频 解 析 (新版)</span><i class="fa fa-paper-plane-o" aria-hidden="true"></i></a> </div> <div class="item"> <a href="https://fh.znywl.net/" class="nav" target="_blank" rel="noopener"> <span class="avatar" style="background-image: url(https://guanzenan.oss-cn-beijing.aliyuncs.com/2021/10/23/b81a2dcd4189e.png)"></span> <span class="content" style="font-weight: bold;">防洪网址生成</span><i class="fa fa-paper-plane-o" aria-hidden="true"></i></a> </div> <div class="item"> <a href="/音乐提取/" class="nav" target="_blank" rel="noopener"> <span class="avatar" style="background-image: url(https://guanzenan.oss-cn-beijing.aliyuncs.com/2021/10/23/6b527f5ab8bfc.png)"></span> <span class="content" style="font-weight: bold;">抖音音乐提取</span><i class="fa fa-paper-plane-o" aria-hidden="true"></i></a> </div> <div class="item"> <a href="#" class="nav" target="_blank" rel="noopener"> <span class="avatar" style="background-image: url(https://guanzenan.oss-cn-beijing.aliyuncs.com/2021/10/23/24a77b34be75b.png)"></span> <span class="content" style="font-weight: bold;">网易云签到</span><i class="fa fa-paper-plane-o" aria-hidden="true"></i></a> </div> <div class="item"> <a href="#" class="nav" target="_blank" rel="noopener"> <span class="avatar" style="background-image: url(https://guanzenan.oss-cn-beijing.aliyuncs.com/2021/10/23/f1c40d43a5fce.png)"></span> <span class="content" style="font-weight: bold;">音乐搜索器</span><i class="fa fa-paper-plane-o" aria-hidden="true"></i></a> </div> <div class="item"> <a href="#" class="nav" target="_blank" rel="noopener"> <span class="avatar" style="background-image: url(https://guanzenan.oss-cn-beijing.aliyuncs.com/2021/10/23/ad08f0ce2606e.png)"></span> <span class="content" style="font-weight: bold;">领赞助手</span><i class="fa fa-paper-plane-o" aria-hidden="true"></i></a> </div> <div class="item"> <a href="#" class="nav" target="_blank" rel="noopener"> <span class="avatar" style="background-image: url(https://ss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/baike/w%3D217/sign=809ef80b0af79052ef1f403f3bf3d738/e850352ac65c1038f37945dab1119313b07e89a7.jpg)"></span> <span class="content" style="font-weight: bold;">Q Q签到助手</span><i class="fa fa-paper-plane-o" aria-hidden="true"></i></a> </div> <div class="item"> <a href="/%e8%81%9a%e5%90%88%e7%9f%ad%e8%a7%86%e9%a2%91%e6%97%a0%e6%b0%b4%e5%8d%b0%e8%a7%a3%e6%9e%90/" class="nav" target="_blank" rel="noopener"> <span class="avatar" style="background-image: url(http://guanzenan.oss-cn-beijing.aliyuncs.com/2021/10/23/bf77abec84ad1.png)"></span> <span class="content" style="font-weight: bold;">聚合短视频去水印</span><i class="fa fa-paper-plane-o" aria-hidden="true"></i></a> </div> <!----> </div> <!----> </div>