一个单页导航
原因：自己有些选七八糟的URL自己也记不住，所以...
来源：lab.mkblog.cn扣来的，靴微微修改了一下，方便自己~。
演示：https://itkz.cn/tools/daohang.html
代码：
<head>
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" media="screen" rel="stylesheet" type="text/css">
<style>
/**************************************************
* 我从mengkun(https://mkblog.cn)抄的
* 前端样式参照了腾讯 alloyteam
* 转载或复制代码时请保留出处，这是底线！
*************************************************/
@charset "utf-8";*{margin:0;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;font-family:Microsoft Yahei,微软雅黑,Helvetica Neue,Helvetica,Hiragino Sans GB,WenQuanYi Micro Hei,sans-serif}body,html{width:100%;height:100%}a{text-decoration:none}a:focus{outline:none}img{border:none}.hidden{display:none}.container{max-width:1100px;margin:0 auto;position:relative}.mk-item-box{margin-left:-15px;margin-right:-15px}.mk-item-box:after,.mk-item-box:before{content:" ";display:table}.mk-item-box:after{clear:both}.mk-item{width:25%;float:left;padding-left:15px;padding-right:15px;position:relative}@media screen and (max-width:1150px){.container{width:950px}}@media screen and (max-width:1000px){.container{width:750px}.mk-item{width:50%}}@media screen and (max-width:800px){.container{width:100%;padding-left:30px;padding-right:30px}.welcome>p{font-size:20px}}@media screen and (max-width:600px){.container{padding-left:15px;padding-right:15px}.mk-item{width:100%}}.section{margin-top:30px;margin-bottom:10px;animation:rubberBand .8s}.mk-sub-title{text-align:center}.mk-sub-title>h4{font-size:50px;display:inline-block;position:relative;margin-bottom:10px}.mk-sub-title>h4:hover{animation:bounce 1s}@media screen and (-webkit-min-device-pixel-ratio:0){.mk-sub-title>h4{background:#eee url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAHklEQVQImWNkYGBgYGD4//8/A5wF5SBYyAr+//8PAPOCFO0Q2zq7AAAAAElFTkSuQmCC) repeat;text-shadow:5px -5px #000,4px -4px #fff;font-weight:700;-webkit-text-fill-color:transparent;-webkit-background-clip:text}}.mk-color-item{font-family:microsoft yahei;background-color:#70c3ff;padding:20px 10px;text-align:center;border-radius:4px;color:#fff;margin-bottom:25px;-webkit-transition:all .3s ease;transition:all .3s ease;overflow:hidden;cursor:pointer;position:relative}.mk-color-item:hover{transform:translateY(-6px);-webkit-transform:translateY(-6px);-moz-transform:translateY(-6px);box-shadow:0 26px 40px -24px rgba(0,36,100,.5);-webkit-box-shadow:0 26px 40px -24px rgba(0,36,100,.5);-moz-box-shadow:0 26px 40px -24px rgba(0,36,100,.5);animation:bounce .8s}.mk-color-item.color1{background-color:#70c3ff!important}.mk-color-item.color2{background-color:#fd6a7f!important}.mk-color-item.color3{background-color:#7f8ea0!important}.mk-color-item.color4{background-color:#89d04f!important}.mk-color-item.color5{background-color:#989!important}.mk-color-item.color6{background-color:#888069!important}.mk-color-item.color7{background-color:#ff9800!important}.mk-color-item.color8{background-color:#009688!important}.mk-color-item.color9{background-color:#00bcd4!important}.mk-color-item>p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}.mk-color-item>.item-logo{height:60px;overflow:hidden;display:inline-block}.mk-color-item>.item-logo>img{height:100%}.mk-color-item>.item-logo>.fa{font-size:60px;line-height:60px}.mk-color-item>h3{font-size:24px;margin-top:20px;margin-bottom:10px;font-family:inherit;font-weight:500;line-height:1.1;color:inherit}.mk-color-item>.light{cursor:pointer;position:absolute;left:-100%;top:0;width:100%;height:100%;background-image:-webkit-linear-gradient(0deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.5),hsla(0,0%,100%,0));transform:skewx(-25deg);-o-transform:skewx(-25deg);-moz-transform:skewx(-25deg);-webkit-transform:skewx(-25deg)}.mk-color-item:hover>.light{-webkit-transition:all .3s ease;transition:all .3s ease;left:100%}.social{font-size:60px;line-height:60px;margin-bottom:25px}.social>a{color:#fff;display:inline-block;position:relative}.social>a[href]:after,.social>a[href]:before{-webkit-transition:all .18s ease-out .18s;transition:all .18s ease-out .18s;opacity:0;display:none;left:50%;bottom:100%;-webkit-transform:translate3d(-50%,10px,0);transform:translate3d(-50%,10px,0);position:absolute}.social>a[href]:before{background:#222;background:rgba(0,0,0,.85);color:#f6f6f6;content:attr(mkpop);font-size:14px;height:32px;margin-bottom:15px;line-height:32px;padding:0 15px;text-shadow:0 1px 1px #000;white-space:nowrap;-webkit-border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;border-radius:5px}.social>a[href]:hover:after,.social>a[href]:hover:before{display:block;opacity:1}@-webkit-keyframes bounce{0%{-webkit-transform:scale(1)}10%,20%{-webkit-transform:scale(.8) rotate(-2deg)}30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(2deg)}40%,60%,80%{-webkit-transform:scale(1.1) rotate(-2deg)}to{-webkit-transform:scale(1) rotate(0)}}@keyframes rubberBand{0%{transform:scaleX(1)}30%{transform:scale3d(1.25,.75,1)}40%{transform:scale3d(.75,1.25,1)}50%{transform:scale3d(1.15,.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}to{transform:scaleX(1)}}
</style>
</head>
<body>
<div class="container">
<section class="section">
<div class="mk-sub-title"><h4>资产管理</h4></div>
<div class="mk-item-box"></div>
</section>
<section class="section">
<div class="mk-sub-title"><h4>安全工具</h4></div>
<div class="mk-item-box"></div>
</section>
<section class="section">
<div class="mk-sub-title"><h4>翻越长城</h4></div>
<div class="mk-item-box"></div>
</section>
<section class="section">
<div class="mk-sub-title"><h4>速度测试</h4></div>
<div class="mk-item-box"></div>
</section>
<section class="section">
<div class="mk-sub-title"><h4>设备监控</h4></div>
<div class="mk-item-box"></div>
</section>
</div><!---contaier end-->
<script type="text/javascript">
function fRandomBy(under, over) {
switch(arguments.length) {
case 1: return parseInt(Math.random() * under + 1);
case 2: return parseInt(Math.random() * (over - under + 1) + under);
default: return 0;
}
}
txt = {
d0: [{
url: "#",
ico: "cog",
title: "Esxi 6.7",
dis: "Esxi登录"
}, {
url: "#",
ico: "window-restore",
title: "VirtualBox",
dis: "VirtualBox管理"
}, {
url: "#",
ico: "terminal",
title: "Guacamole",
dis: "远程登录管理"
}, {
url: "#",
ico: "wifi",
title: "Padavan",
dis: "路由器登录"
}, {
url: "#",
ico: "linux",
title: "Appnode-Ali",
dis: "Appnode管理面板"
}, {
url: "#",
ico: "linux",
title: "BT-Panel",
dis: "宝塔Linux管理-Pro"
}, {
url: "#",
ico: "linux",
title: "Portainer",
dis: "内网Docker管理"
}, {
url: "#",
ico: "linux",
title: "Portainer",
dis: "外网Docker管理"
}, {
url: "#",
ico: "server",
title: "NextCloud",
dis: "NextCloud-XXX"
}, {
url: "#",
ico: "server",
title: "KodExplorer",
dis: "KodExplorer-XXX"
}, {
url: "#",
ico: "server",
title: "KodExplorer",
dis: "KodExplorer-XXX"
}, {
url: "#",
ico: "server",
title: "HFS-Win",
dis: "HttpFileServer-XXX"
}],
d1: [{
url: "#",
ico: "bug",
title: "Acunetix 13",
dis: "外网AWVS扫描器"
}, {
url: "#",
ico: "search",
title: "W12Scan",
dis: "W12Scan Scanner by w8way"
}, {
url: "#",
ico: "bug",
title: "Nessus 8",
dis: "Nessus Scanner"
}, {
url: "#",
ico: "bug",
title: "Kali Web",
dis: "Kali Linux Web Tools"
}],
d2: [{
url: "#",
ico: "send",
title: "Gyple-GAE",
dis: "GAE搭建的Gyple代理"
}, {
url: "#",
ico: "globe",
title: "JSProxy",
dis: "利用CloudFare实现JSProxy代理"
}, {
url: "#",
ico: "send-o",
title: "Gyple-Ru",
dis: "俄罗斯的Gyple代理"
}, {
url: "#",
ico: "send-o",
title: "Gyple-Opi",
dis: "在XXX上搭建Gyple"
}],
d3: [{
url: "#",
ico: "hourglass-end",
title: "Speedtest",
dis: "测速阿里云"
}, {
url: "#",
ico: "hourglass-end",
title: "Speedtest",
dis: "测速俄罗斯"
}, {
url: "#",
ico: "hourglass-end",
title: "Speedtest",
dis: "测速XXX"
}, {
url: "#",
ico: "hourglass-end",
title: "Speedtest",
dis: "测速XXX"
}],
d4: [{
url: "#",
ico: "tachometer",
title: "PHP-TZ-XXX",
dis: "阿里云探针"
}, {
url: "#",
ico: "tachometer",
title: "PHP-TZ-XXX",
dis: "香橙派探针"
}, {
url: "#",
ico: "heartbeat",
title: "ServerStatus",
dis: "Linux服务器统一监测"
}, {
url: "#",
ico: "tachometer",
title: "Supervisor",
dis: "Supervisor状态控制"
}]
};
const lei = document.getElementsByClassName('mk-item-box');
console.log(lei);
for (var i = 0; i < lei.length; i++) {
let dat=txt["d"+i];
console.log("草拟"+dat.length);
for (var j = 0; j < dat.length; j++) {
lei[i].innerHTML += '<div class="mk-item"><a href="'+dat[j].url+'" target="_blank"><article><div class="item-logo"><i class="fa fa-'+dat[j].ico+'" aria-hidden="true"></i></div><h3>'+dat[j].title+'</h3><p>'+dat[j].dis+'</p><i class="light"></i></article></a></div>';
}
const len = document.getElementsByTagName('article');
for (var k = 0; k < len.length; k++) {
len[k].className = 'mk-color-item color'+fRandomBy(1,9);
}
}
</script>
版权声明：若无特殊注明，本文皆为《
CM部落 》原创，转载请保留文章出处。
本文链接：一个单页导航 https://www.itkz.cn/tools/136.html
正文到此结束
![[CVE-2024-23692] (HFS) Rejetto HTTP File Server RCE Payload魔改](https://www.itkz.cn/content/templates/limh.me/images/random/tb2.jpg "查看文章：[CVE-2024-23692] (HFS) Rejetto HTTP File Server RCE Payload魔改")
发表吐槽
你肿么看？
既然没有吐槽，那就赶紧抢沙发吧！