为网站简单添加网页工具集合页面

嗯...这应该算一个网页工具页面吧,哈哈哈。因为我自己建站的过程中使用很多工具,自己搭建的网页工具以及自己需要的工具有点多,很乱,每次使用的时候都很难找到工具来用,所以就搞了一个网页工具集合页面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}}
/***********/
.naigou_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://cdn.owoc.cn/2022/03/20220306075219964fcccd4f01.png) no-repeat center center/60px 60px;}
.bdsharebuttonbox .bds_2 { background: url(https://cdn.owoc.cn/2022/03/2022030607523750ddbbefb187.png) no-repeat center center/60px 60px; }
.bdsharebuttonbox .bds_3 { background: url(https://cdn.owoc.cn/2022/03/2022030607523750ddbbefb187.png) no-repeat center center/60px 60px; }
.bdsharebuttonbox .bds_4 { background: url(https://cdn.owoc.cn/2022/03/20220306075220bb29e8149ed3.png) no-repeat center center/60px 60px; }
.bdsharebuttonbox .bds_5 { background: url(https://cdn.owoc.cn/2022/03/20220306075221de6f472b9c18.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="人生模拟器" href="https://www.owoc.cn/tool/life/" class="bds_1 naigou_img" target="_blank" rel="noopener noreferrer"></a>人生模拟器</li>
<li> <a title="王者点券" href="https://www.owoc.cn/tool/wzdq/" class="bds_2 naigou_img" target="_blank" rel="noopener noreferrer"></a>王者点券 </li>
<li> <a title="王者战力查询" href="https://www.owoc.cn/tool/wzzl/" class="bds_3 naigou_img" target="_blank" rel="noopener noreferrer"></a>王者战力查询 </li>
<li> <a title="初音未来打击板" href="https://www.owoc.cn/tool/mikutap/" class="bds_4 naigou_img" target="_blank" rel="noopener noreferrer"></a>初音未来打击板</li>
<li> <a title="燃鹅抽奖助手" href="https://www.owoc.cn/tool/re/" class="bds_5 naigou_img" target="_blank" rel="noopener noreferrer"></a>燃鹅抽奖助手</li>
</ul>
</div>
</div>
<div class="clear"></div>
</div>
</body>
</html>

演示图

图片[1]-为网站简单添加网页工具集合页面-老奶狗博客

------本页内容已结束,喜欢请分享------

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

© 版权声明
THE END
喜欢就支持一下吧
点赞8赞赏 分享
评论 抢沙发
头像
发一条友善的评论吧
提交
头像

昵称

取消
昵称表情代码图片