为网站简单添加网页工具集合页面[整站笔记]

图片[1]-为网站简单添加网页工具集合页面[整站笔记]-星语的小木屋
为网站简单添加网页工具集合页面

嗯…这应该算一个网页工具页面吧,哈哈哈。因为我自己建站的过程中使用很多工具,自己搭建的网页工具以及自己需要的工具有点多,很乱,每次使用的时候都很难找到工具来用,所以就搞了一个网页工具集合页面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]-为网站简单添加网页工具集合页面[整站笔记]-星语的小木屋
网页工具集合页面
温馨提示:本文最后更新于2020-12-18 18:01:43,已超过719天没有更新。某些文章具有时效性,若文章内容或图片资源有错误或已失效,请在下方留言或联系星语社长。谢谢!

感谢您的来访,获取更多精彩文章请收藏本站。

© 版权声明
THE END
喜欢就支持一下吧
点赞6打赏 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容