[HTML模板] 总之是一个简单的单页导航模板
帮朋友网站做备案,需要挂个单页,于是给自己以前写过的小玩意里一顿乱翻找到的。
总之如图,然后简单说明一下,虽然写的挺烂的。
这个单页是以前用QNAP的NAS时候方便导航的,因为我没有固定IP,所以写成了JS替换URL。
JS的部分不需要的可以自己删,然后给对应的位置替换成a标签。
背景渐变色动画不需要可以直接删了animation样式然后给background-size改成100%。
头像的p0.jpg记得自己换。
如果拿去做备案的话记得不要在页面上保留奇奇怪怪的URL,要被卡的。
大概就这些。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="robots" content="noarchive">
<meta name="Baiduspider" content="noarchive">
<meta name="googlebot" content="noarchive">
<title>HOMEPAGE</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<style>
body {
display: flex;
font-family: sans-serif, "Microsoft YaHei", Cambria, Verdana, Georgia, Arial;
margin: 0;
padding: 0;
width: 100%;
min-height: 80vh;
flex-direction: column;
text-align:center;
align-items: center;
justify-content: center;
background-size: 300% 300%;
background-image: linear-gradient(-45deg,
rgba(152, 68, 183, 1) 0%,
rgba(255, 53, 127, 1) 25%,
rgba(87, 111, 230, 1) 50%,
rgba(59, 173, 227, 1) 100%);
animation: AnimateBGM 20s ease infinite;
text-shadow: 2px 2px 5px #333333;
}
@keyframes AnimateBGM {
0% {background-position: 0% 50%} 50% {background-position: 100% 50%} 100% {background-position: 0% 50%}
}
img {
border-radius: 50%;
width: 100px;
height: 100px;
margin: 20px 0;
}
h1 {
font-size: 52px;
color: #f5f5f5;
letter-spacing: 1px;
margin: 0;
}
p {
color: #f5f5f5;
font-size: 18px;
}
a {
border-radius:10px;
padding:10px 38px;
margin: 0 10px;
color:#f5f5f5;
border-style:solid;
text-decoration:none;
}
</style>
<script>
const url = window.location.host;
function GetUrl_0(){
document.write(url);
}
function GetUrl_1(){
var text = 'qBittorrent';
var src = ':8080';
var html = '<a target="_blank" href="http://' + url + src + '">' + text + '</a>';
document.write(html);
}
function GetUrl_2(){
var text = 'AList';
var src = ':5244';
var html = '<a target="_blank" href="http://' + url + src + '">' + text + '</a>';
document.write(html);
}
function GetUrl_3(){
var text = 'Jellyfin';
var src = ':8096';
var html = '<a target="_blank" href="http://' + url + src + '">' + text + '</a>';
document.write(html);
}
</script>
</head>
<body>
<img src="./p0.jpg" />
<h1>HOMEPAGE</h1>
<p>在光的前端 ,或思之极处。</p>
<br /><br />
<p><script>GetUrl_1(); GetUrl_2(); GetUrl_3();</script></p>
<br /><br />
<p>Current url : <script>GetUrl_0();</script> , From Yeraph Studio.</p>
<br />
</body>
</html>
THE END
站点声明:本站部分内容转载自网络,作品版权归原作者及来源网站所有,任何内容转载、商业用途等均须联系原作者并注明来源。
暂无评论