![图片[1]-为网站简单添加网页工具集合页面[整站笔记]-星语的小木屋](https://img.wiiuii.cn/WP-TUTU/WP%E6%96%87%E7%AB%A0%E9%85%8D%E5%9B%BE/%E4%B8%BA%E7%BD%91%E7%AB%99%E7%AE%80%E5%8D%95%E6%B7%BB%E5%8A%A0%E7%BD%91%E9%A1%B5%E5%B7%A5%E5%85%B7%E9%9B%86%E5%90%88%E9%A1%B5%E9%9D%A2.jpg)
嗯…这应该算一个网页工具页面吧，哈哈哈。因为我自己建站的过程中使用很多工具，自己搭建的网页工具以及自己需要的工具有点多，很乱，每次使用的时候都很难找到工具来用，所以就搞了一个网页工具集合页面HTML，使自己能快速的找到并使用。这是从网上找来一段图标代码，然后自己随便魔改一下，就诞生了这样的工具集合页面。我没有正式学过HTML、CSS等等，我只是一个萌新，所以感觉代码很乱，很多。哎！反正代码能用就行了，哈哈哈！
网页工具集合页面采用HTML+CSS，我把HTML和CSS写到了一起（主要是我用WordPress，方便直接在后台创建页面），若懂得前端的，自己简化、修改吧！
如果你也使用Wordpress的话应该可以和我一样直接在后台通过自定义HTML创建页面来使用！话不多说，下面就分享代码！
代码：
<html>
<head>
</head>
<body>
<div class="kePublic">
<style type="text/css">
.i,em{font-style: normal!important}.body>div,form>div,body>section{margin: 0 auto}.div{text-align: left}.a img{border: 0}.table{border-collapse: collapse;border-spacing: 0}.select,input,textarea{outline: none}.ul,ol,li{list-style-type: none;vertical-align: 0}.a{outline-style: none;color: #494949;text-decoration: none}.a,area{blr: expression(this.onFocus=this.blur())}.focus{-moz-outline-style: none}.clear{clear: both;height: 0;overflow: hidden;visibility: hidden}.hidden,.hide{display: none}.block,.show{display: block}.fl{float: left}.fr{float: right}.fline{float: left;display: inline}.clearfix: after{clear: both;content: ".";height: 0;display: block;visibility: hidden}.chgBtn{cursor: pointer}.far{font-family: Arial}.fb{font-weight: 700}.auto{margin-left: auto!important;margin-right: auto!important}.cor_red{color: red}.cor_org{color: #f40}.cor_bs,.cor_bs: hover{color: #fff}.autoImg img{height: auto;width: 100%;display: block}.button{display: inline-block;zoom: 1;*display: inline;vertical-align: baseline;margin: 0 2px;outline: none;cursor: pointer;text-align: center;text-decoration: none;font: 14px/100% Arial,Helvetica,sans-serif;padding: .25em .6em .3em;text-shadow: 0 1px 1px rgba(0,0,0,.3);-webkit-border-radius: .5em;-moz-border-radius: .5em;border-radius: .5em;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);box-shadow: 0 1px 2px rgba(0,0,0,.2)}.red{color: #faddde;border: solid 1px #980c10;background: #d81b21;background: -webkit-gradient(linear,left top,left bottom,from(#ed1c24),to(#A51715));background: -moz-linear-gradient(top,#ed1c24,#A51715);filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24',endColorstr='#aa1317')}.red: hover{background: #b61318;background: -webkit-gradient(linear,left top,left bottom,from(#c9151b),to(#a11115));background: -moz-linear-gradient(top,#c9151b,#a11115);filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#c9151b',endColorstr='#a11115');color: #fff}.red: active{color: #de898c;background: -webkit-gradient(linear,left top,left bottom,from(#aa1317),to(#ed1c24));background: -moz-linear-gradient(top,#aa1317,#ed1c24);filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#aa1317',endColorstr='#ed1c24')}.cor_bs,.cor_bs: hover{color: #fff}.mKeBanner,.mKeBanner div{text-align: center}.gb_res_t{line-height: 58px;height: 58px;position: relative;font-size: 18px;text-align: center}.gb_res_t span{display: inline-block;padding: 0 6px;position: relative;z-index: 2}.gb_resItms{margin: 0 4%}.gb_resItms li{text-align: center;float: left;width: 16.66%;padding-bottom: 15px}.gb_resA img{height: auto;width: 60px;margin-bottom: 10px}@media only screen and (max-width: 500px){.gb_resA img{width: 45px;margin-top: 5px}}@media only screen and (max-width: 470px){.gb_resItms li{width: 33.333%}.gb_resLay{height: 290px}.gb_resA img{width: 60px;margin-top: 0}}
/***********/
.wiiuii_img{border:2px dashed #009966;border-radius: 10px;}
.bdsharebuttonbox a { width: 60px!important; height: 60px!important; margin: 0 auto 10px!important; float: none!important; padding: 0!important; display: block; }
.bdsharebuttonbox a img { width: 60px; height: 60px;}
.bdsharebuttonbox .bds_1 { background: url(https://img.wiiuii.cn/img/%E9%9F%B3%E4%B9%90.png) no-repeat center center/60px 60px;}
.bdsharebuttonbox .bds_2 { background: url(https://img.wiiuii.cn/img/%E6%8A%96%E9%9F%B3.png) no-repeat center center/60px 60px; }
.bdsharebuttonbox .bds_3 { background: url(https://img.wiiuii.cn/img/%E8%A7%86%E9%A2%91.png) no-repeat center center/60px 60px; }
.bdsharebuttonbox .bds_4 { background: url(https://img.wiiuii.cn/img/%E9%9F%B3%E4%B9%901.png) no-repeat center center/60px 60px; }
.bdsharebuttonbox .bds_5 { background: url(https://img.wiiuii.cn/img/%E7%BD%91%E7%BB%9C.png) no-repeat center center/60px 60px; }
.bdsharebuttonbox .bds_6 { background: url(https://img.wiiuii.cn/img/%E8%A7%86%E9%A2%91jx.png) no-repeat center center/60px 60px; }
.bdsharebuttonbox .bds_7{ background: url(https://img.wiiuii.cn/img/API.png) no-repeat center center/60px 60px; }
.bdsharebuttonbox .bds_8{ background: url(https://img.wiiuii.cn/img/Music.png) no-repeat center center/60px 60px; }
.bdsharebuttonbox .bds_9{ background: url(https://img.wiiuii.cn/img/%E9%9F%B3%E4%B9%90.png) no-repeat center center/60px 60px; }
.bdsharebuttonbox .bds_10{ background: url(https://img.wiiuii.cn/img/douyin_logo.png) no-repeat center center/60px 60px; }
.bdsharebuttonbox .bds_11{ background: url(https://img.wiiuii.cn/img/%E6%B7%BB%E5%8A%A0.png) no-repeat center center/60px 60px; }
.bdsharebuttonbox .bds_12{ background: url(https://img.wiiuii.cn/img/%E6%B7%BB%E5%8A%A0.png) no-repeat center center/60px 60px; }
.bd_weixin_popup .bd_weixin_popup_foot { position: relative; top: -12px; }
</style>
<div class="gb_resLay">
<div class="bdsharebuttonbox">
<ul class="gb_resItms" style="font-weight:bold;">
<li> <a title="网易云300百首音乐打卡" href="https://www.wiiuii.cn/qiandao/" class="bds_1 wiiuii_img" target="_blank" rel="noopener noreferrer"></a>网易云签到 </li>
<li> <a title="抖音去除水印" href="https://www.wiiuii.cn/douyin/" class="bds_2 wiiuii_img" target="_blank" rel="noopener noreferrer"></a>抖音无水印 </li>
<li> <a title="全网VIP视频免费解析" href="https://www.wiiuii.cn/analysis" class="bds_3 wiiuii_img" target="_blank" rel="noopener noreferrer"></a>视频解析(旧版) </li>
<li> <a title="抖音音乐提取MP3" href="https://www.wiiuii.cn/dymusic" class="bds_4 wiiuii_img" target="_blank" rel="noopener noreferrer"></a>抖音音乐 </li>
<li> <a title="可以设置网站的短网址、短网址的还原。 " href="https://www.wiiuii.cn/short_url" class="bds_5 wiiuii_img" target="_blank" rel="noopener noreferrer"></a>短网址 </li>
<li> <a title="星语视频解析(新版)" href="https://www.wiiuii.cn/video_vip" class="bds_6 wiiuii_img" target="_blank" rel="noopener noreferrer"></a>视频解析(新版) </li>
<li> <a title="星语API免费提供Api服务" href="https://api.wiiuii.cn/" class="bds_7 wiiuii_img" target="_blank" rel="noopener noreferrer"></a>星语API </li>
<li> <a title="本页面由Netease Music插件强力驱动.|歌单由网易云提供大力支持." href="https://www.wiiuii.cn/xingyu-music" class="bds_8 wiiuii_img" data-cmd="renren"></a>听音乐 </li>
<li> <a title="星语音乐啦" href="https://www.wiiuii.cn/music_core" class="bds_9 wiiuii_img" target="_blank" rel="noopener noreferrer"></a>星语音乐 </li>
<li> <a title="抖音斜体字生成" href="https://www.wiiuii.cn/douyinziti" class="bds_10 wiiuii_img" target="_blank" rel="noopener noreferrer"></a>抖音斜体字生成 </li>
<li> <a title="待添加..." href="#" class="bds_11 wiiuii_img" target="_blank" rel="noopener noreferrer"></a>待添加11 </li>
<li> <a title="待添加..." href="#" class="bds_12 wiiuii_img" target="_blank" rel="noopener noreferrer"></a>待添加12 </li>
</ul>
</div>
</div>
<div class="clear"></div>
</div>
</body>
</html>效果：
你可以点击下面的链接，进行查看效果：
【星语的小木屋 – 星语工具中心】
截图：
![图片[2]-为网站简单添加网页工具集合页面[整站笔记]-星语的小木屋](https://img.wiiuii.cn/WP-TUTU/WP%E6%96%87%E7%AB%A0%E9%85%8D%E5%9B%BE/xy_tool.jpg)
感谢您的来访，获取更多精彩文章请收藏本站。
© 版权声明
THE END
![子比主题美化教程(备忘录)[更新时间:2022年11月12日]-星语的小木屋](https://www.wiiuii.cn/wp-content/uploads/2021/01/b106fb9775212236.jpg)
![WordPress添加VIP视频在线解析页面[WP教程]-星语的小木屋](https://img.wiiuii.cn/WP-TUTU/WP%E6%96%87%E7%AB%A0%E9%85%8D%E5%9B%BE/WordPress%E6%B7%BB%E5%8A%A0VIP%E8%A7%86%E9%A2%91%E5%9C%A8%E7%BA%BF%E8%A7%A3%E6%9E%90%E9%A1%B5%E9%9D%A2.jpg)
![子比主题添加热门标签页面[子比主题教程]-星语的小木屋](https://img.wiiuii.cn/WP-TUTU/WP%E6%96%87%E7%AB%A0%E9%85%8D%E5%9B%BE/%E5%AD%90%E6%AF%94%E4%B8%BB%E9%A2%98%E6%B7%BB%E5%8A%A0%E7%83%AD%E9%97%A8%E6%A0%87%E7%AD%BE%E9%A1%B5%E9%9D%A2.jpg)
![为WordPress网站添加一个[时光轴]页面[整站笔记]-星语的小木屋](https://img.wiiuii.cn/WP-TUTU/WP%E6%96%87%E7%AB%A0%E9%85%8D%E5%9B%BE/%E4%B8%BAWordPress%E7%BD%91%E7%AB%99%E6%B7%BB%E5%8A%A0%E4%B8%80%E4%B8%AA%E6%97%B6%E5%85%89%E8%BD%B4%E9%A1%B5%E9%9D%A2%E6%95%B4%E7%AB%99%E7%AC%94%E8%AE%B055.png)
![WordPress添加疫情实时动态页面[WP页面]-星语的小木屋](https://img.wiiuii.cn/WP-TUTU/WP%E6%96%87%E7%AB%A0%E9%85%8D%E5%9B%BE/WordPress%E7%96%AB%E6%83%85%E5%AE%9E%E6%97%B6%E5%8A%A8%E6%80%81.jpg)
![WordPress清新版说说页面[更新:2-7]-星语的小木屋](https://img.wiiuii.cn/WP-TUTU/WP%E6%96%87%E7%AB%A0%E9%85%8D%E5%9B%BE/WordPress%E6%B7%BB%E5%8A%A0%E6%B8%85%E6%96%B0%E7%89%88%E7%9A%84%E8%AF%B4%E8%AF%B4%E9%A1%B5%E9%9D%A2.jpg)
![WordPress管理后台轻微美化[WP教程]-星语的小木屋](https://img.wiiuii.cn/WP-TUTU/WP%E6%96%87%E7%AB%A0%E9%85%8D%E5%9B%BE/WP%E5%90%8E%E5%8F%B0%E7%BE%8E%E5%8C%96%E6%A0%87%E9%A2%98%E5%9B%BE.png)
![网站点击彩色效果[整站笔记]-星语的小木屋](https://img.wiiuii.cn/WP-TUTU/WP%E6%96%87%E7%AB%A0%E9%85%8D%E5%9B%BE/%E7%BD%91%E7%AB%99%E7%82%B9%E5%87%BB%E5%BD%A9%E8%89%B2%E6%95%88%E6%9E%9C.jpg)
暂无评论内容