手机网站免费制作平台免费网站制作app
文章目录
- 前言
- 一、网址导航引导页面
- 二、程序演示与下载
- 1.程序演示
- 2.程序下载
前言
这次介绍的是一款导航页，寻常大多是pc端，今天介绍这款自适应手机端，话不多说，下面介绍。
一、网址导航引导页面
导航引导页有什么作用？如下：
- 引导用户完成网站各内容页面间的跳转
- 理清网站各内容与链接间的联系
- 定位用户在网站中所处的位置
另外这款网可自动检测域名延迟，演示图显示10Ms为测试的速度，除了这个功能以外，这个导航站的UI也是非常不错的。
二、程序演示与下载
1.程序演示
代码如下（仅html，css代码有点多，需要研究的兄弟下面有下载地址）：
<!DOCTYPE html><html data-dpr="1"><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge">
<title>网站导航_鲸鱼源码网</title><meta name="keywords" content="网址导航引导页面源码_自动检测域名延迟"><meta name="description" content="网址导航引导页面源码_自动检测域名延迟"><link rel="stylesheet" href="static/css/reset.css">
<link rel="stylesheet" href="static/css/slick.css">
<link rel="stylesheet" href="static/css/style.css">
<script type="text/javascript" src="static/js/flexible.js"></script><script type="text/javascript" src="static/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="static/js/touchslide.js"></script>
<script type="text/javascript">
$(function(){$('.refresh a').click(function(){window.location.reload();});$('.menu a').click(function(){$(this).parent().toggleClass('on');$('.menuBox').toggleClass('show');return false;});
})
</script><!-- <script type="text/javascript">var oWidth = document.documentElement.clientWidth || document.body.clientWidth;if (oWidth < 1024) {}else {window.location.href = "../index.html";}window.addEventListener("orientationchange", function () {var oWidth = document.documentElement.clientWidth || document.body.clientWidth;if (oWidth < 1024) {}else {window.location.href = "../index.html";}}, false);window.addEventListener("resize", function () {var oWidth = document.documentElement.clientWidth || document.body.clientWidth;if (oWidth < 1024) {}else {window.location.href = "../index.html";}}, false);
</script> --></head>
<body style="font-size: 12px;">
<!--[if lt IE 8]>
<p class="browserupgrade">当前浏览器版本太低,建议升级道最新版本</p>
<![endif]-->
<div id="container">
<div class="header"><span style="color: #00FFFF;">【无法打开请更换其他运营商网络或翻q】</span><div class="hImg"><img src="static/picture/h_img01.png" alt=""></div><div class="menu"><a href="#"><img src="static/picture/menu.png" alt=""></a></div>
</div>
<div class="menuBox"><ul><li><a href="https://www.jyuym.com/">官网首页</a></li><li class="color"><a href="https:/E5X3p29cdUu15gB-fmm572iAc&noverify=0" target="alt="""></a></li></ul>
</div>
<div class="banner"><div id="focus" class="focus"><div class="hd" style="display: none;"><ul></ul></div><div class="bd"><ul><li><a href="https://www.jyuym.com/"><img src="static/picture/banner.jpg"></a></li></ul></div></div><script type="text/javascript">TouchSlide({ slideCell:"#focus",titCell:".hd ul", //开启自动分页 autoPage:true ，此时设置 titCell 为导航元素包裹层mainCell:".bd ul", effect:"left", autoPlay:true,//自动播放autoPage:true, //自动分页});</script></div>
<p class="text"><img src="static/picture/img01.png" alt="">请收藏本站，防止失联！永久地址：www.jyuym.com</p><div class="testing"><div class="bd"><ul class="speedlist"><li><p><span class="ms" id="lineMs0"></span><img src="static/picture/icon01.png" class="img01" alt=""><span class="url">导航:www.jyuym.com</span></p><span class="btn-open"><a href="https://www.jyuym.com/" target="_blank">打开网站</a></span></li><li><p><span class="ms" id="lineMs1"></span><img src="static/picture/icon01.png" class="img01" alt=""><span class="url">网址1：</span></p><span class="btn-open"><a href="https://www.jyuym.cn/" target="_blank">打开网站</a></span></li><li><p><span class="ms" id="lineMs2"></span><img src="static/picture/icon01.png" class="img01" alt=""><span class="url">网址2:</span></p><span class="btn-open"><a href="https://www.jyuym.com/" target="_blank">打开网站</a></span></li><li><p> <span class="ms" id="lineMs3"></span><img src="static/picture/icon01.png" class="img01" alt=""><span class="url">QQ通知群①</span></p><span class="btn-open"><a href="/" target="_blank">点击添加</a></span></li><li><p><span class="ms" id="lineMs4"></span><img src="static/picture/icon01.png" class="img01" alt=""><span class="url">QQ通知群②</span></p><span class="btn-open"><a href="/" target="_blank">点击添加</a></span></li><li><p><span class="ms" id="lineMs5"></span><img src="static/picture/icon01.png" class="img01" alt=""><span class="url">QQ通知群③</span></p><span class="btn-open"><a href="/" target="_blank">点击添加</a></span></li></ul></div>
</div><div class="refresh"><a href="#"><img src="static/picture/btn03.png" alt=""></a></div><div id="footer"><div class="fBox"><p>鲸鱼源码网 2018-2022</p><div class="img"><img src="static/picture/f_img.png" alt=""></div></div>
</div>
</div>
<script type="text/javascript" src="static/js/ms.js"></script></body></html>
2.程序下载
网址导航引导页面H5源码