前言
嗯…这应该算一个网页东西页面吧，哈哈哈。由于我自己建站的过程中运用许多东西，自己建立的网页东西以及自己需求的东西有点多，很乱，每次运用的时候都很难找到东西来用，所以就搞了一个网页东西调集页面HTML，使自己能快速的找到并运用。这是从网上找来一段图标代码，然后自己随意魔改一下，就诞生了这样的东西调集页面。我没有正式学过HTML、CSS等等，我只是一个萌新，所以感觉代码很乱，许多。哎！横竖代码能用就行了，哈哈哈！
网页东西调集页面采用HTML+CSS，我把HTML和CSS写到了一起（主要是我用WordPress，便利直接在后台创立页面），若懂得前端的，自己简化、修正吧！
假如你也运用Wordpress的话应该能够和我一样直接在后台通过自定义HTML创立页面来运用！话不多说，下面就共享代码！
预览图
教程
1.进入后台，找到 外观—自定义
2.点击小工具
3.选择需要放的位置
4.点击添加小工具 下滑找到 自定义html
5.点击展开刚添加的小工具，将代码填入
代码：
<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>
© 版权声明
THE END
暂无评论内容