分享一款引导页源码，免费下载html格式引导页，这款源码底部带IP时间调用，中间带随机文字，导航链接不是直接跳转，还有一个卡片形式的过渡，相比之前的引导页更加高端。
引导页展示
源码下载
您需要登录才能查看完整内容
已经登录？立即刷新
源码展示
<!DOCTYPE HTML>
<html>
<head>
<title>小蓝资源网引导页</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<noscript>
<link rel="stylesheet" href="assets/css/noscript.css" />
</noscript>
<link rel="stylesheet" href="./images/font/iconfont.css">
<link rel="icon" href="./images/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
</head>
<style>
ul,
li {
list-style: none;
}
.icon {
width: 2em;
height: 2em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
<body class="is-preload">
<!-- Wrapper -->
<div id="wrapper">
<!-- Header -->
<header id="header">
<div class="logo">
<span class="img">
<img src="./images/touxiang.jpg" alt="个人头像">
</span>
</div>
<div class="content">
<div class="inner">
<h1 class="animate__animated animate__bounce">小蓝资源网引导页</h1>
<!-- 一言接口 -->
<p id="hitokoto">
<h3 style="color:red">
<a href="#" id="hitokoto_text"></a>
</h3>
</p>
<br />
</div>
</div>
<nav>
<ul>
<li><a href="#intro">个人博客</a></li>
<li><a href="#work">源码下载</a></li>
<li><a href="#about">DM孵化园</a></li>
</ul>
</nav>
<ul class="jiangwan">
<li>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=68518549&site=qq&menu=yes">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-QQ"></use>
</svg>
</a>
</p>
</li>
<li>
<a target="_blank" href="mailto:68518549@qq.com">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-mail"></use>
</svg>
</a>
</li>
<li>
<a target="_blank" href="https://www.xiaolanzy.com">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-github"></use>
</svg>
</li>
<li>
<a target="_blank" href="https://www.xiaolanzy.com">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-gitee"></use>
</svg>
</li>
</header>
<!-- Main -->
<div id="main">
<!-- 个人博客 -->
<article id="intro">
<h2 class="major">简介</h2>
<span class="image main">
<img src="images/blog.png" alt="" />
</span>
<p>
<a href="http://www.xiaolanzy.com" target="_blank">这里是博客地址哦</a>
</p>
<p>记录本人技术道路上的点点滴滴.</p>
</article>
<!-- 个人影视站 -->
<article id="work">
<h2 class="major">网站源码</h2>
<span class="image main"><img src="images/yingshi.png" alt="" /></span>
<p> <a href="https://www.xiaolanzy.com/wzym" target="_blank">这里是源码下载地址入口哦</a>
</p>
<p>这里是源码网站,闲暇时间多看看</p>
<p></p>
</article>
<!-- 个人云盘 -->
<article id="about">
<h2 class="major">DM孵化园</h2>
<span class="image main"><img src="images/yun.jpg" alt="云盘图片" /></span>
<p> <a href="https://www.dmfhy.com/">私有云盘,暂时不贴地址哦</a>
</p>
<p></p>
</article>
</div>
<!-- Footer -->
<footer id="footer">
<p class="copyright">
<br>
您的IP:
<script src="https://pv.sohu.com/cityjson?ie=utf-8"></script>
<script type="text/javascript">document.write(returnCitySN["cip"])</script>
<script>
var mydate = new Date();
document.writeln("Copyright © - " + mydate.getFullYear() + -(mydate.getMonth() + 1) + -mydate.getDate() + ' 小蓝资源网<br/>');</script>
<span id="jinrishici-sentence">正在加载今日诗词....</span>
<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
<br>
</p>
</footer>
</div>
<!-- BG -->
<div id="bg"></div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
<script src="./images/font/iconfont.js"></script>
<script>
var xhr = new XMLHttpRequest();
xhr.open('get', 'https://v1.hitokoto.cn');
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
var data = JSON.parse(xhr.responseText);
var hitokoto = document.getElementById('hitokoto_text');
hitokoto.href = 'https://hitokoto.cn/?uuid=' + data.uuid
hitokoto.innerText = data.hitokoto;
}
}
xhr.send();
var bodyBgs = []; //创建一个数组变量来存储背景图片的路径
bodyBgs[0] = "images/bg/1.jpg";
bodyBgs[1] = "images/bg/2.jpg";
bodyBgs[2] = "images/bg/3.jpg";
bodyBgs[3] = "images/bg/4.jpg";
bodyBgs[4] = "images/bg/5.jpg";
bodyBgs[5] = "images/bg/6.jpg";
bodyBgs[6] = "images/bg/7.jpg";
bodyBgs[7] = "images/bg/8.jpg";
bodyBgs[8] = "images/bg/9.jpg";
var randomBgIndex = Math.round(Math.random() * 8);
document.write('<style>body{background:url(' + bodyBgs[randomBgIndex] + ') no-repeat 100% 100%;backgroun-size:100% 100%}</style>');
</script>
</body>
</html>原创文章，作者：李康哲，如若转载，请注明出处：https://www.xiaolanzy.com/125.html
微信扫一扫 
支付宝扫一扫 