前言

这次介绍的是一款导航页，寻常大多是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&amp;noverify=0" target="alt=&quot;&quot;"></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源码

网址导航引导页面H5源码相关推荐

简约二次元网址导航发布页HTML源码
简介: 简约二次元网址导航发布页HTML源码,就一个个人导航单页源码,非常轻量级,只有技术KB左右,上传服务器即可自行修改标题文字即可使用,背景图自行替换. 网盘地址: http://zijiepan ...
精品网址导航主题整站源码 wordpress模板自适应手机端
整站源码wordpress精品网址导航主题模板自适应手机端wordpress网址导航源码自适应手机端网站导航主题模板安装教程: 修改数据库文件:wp-config.php 导入数据库sql.sq ...
Laysns内核仿qq技术网址导航网整站源码
介绍: Laysns内核仿qq技术网址导航网整站源码基于laysns开发,打包的也只是模板文件,使用前需要自行下载安装laysns主程序,然后再将模板文件夹上传到template文件夹下替换即可使用. ...
2022简约二次元网址导航发布页HTML源码
正文: 2022简约二次元网址导航发布页HTML源码,没啥多余可介绍的,就一个个人导航单页源码,非常轻量级,只有技术KB左右,上传服务器即可自行修改标题文字即可使用,背景图自行替换. 程序: wwwu ...
最新WordPress精品网址导航主题整站源码+WAP端
周末的时候老蒋和群里的一些朋友聊到当前都在做哪些网站,有几个网友做网站导航目录网站做的还不错,盈利模式是通过收录网站和软文录入收费的. 这种网站商业模式也还是比较独特的,并不是依靠流量转化的,而是通过 ...
炫酷星空个人主页动态特效引导页面浏览器源码手机自适应引导页HTML
炫酷星空个人主页动态特效引导页面浏览器源码手机自适应引导页HTML 效果: 完整版链接: https://pan.baidu.com/s/1DbGaiqB5-29uoVbPK0fxCw 提取码: ...
仿微信引导页面HTML源码
简介: 一款漂亮的仿微信引导页HTML源码以文本形式打开 index.html 可直接编辑内容网盘下载地址: http://www.bytepan.com/NR8mBKoPNU8
2023 创意交互式个人简历手机页面H5源码
源码介绍: 这是一款创意的 H5 交互式个人简历手机页面模板,具有来电式和聊天式交互方案,非常适合于个人使用.该模板可用于展示个人简历.技能介绍.作品展示以及联系方式等信息. 该模板采用了魔方样式的导 ...
thinkphp小雨网址导航网整站源码
简介: thinkphp框架开发,小雨网址导航网站源码,整站数据打包. 个人修改了电脑模板和手机模板,还有一些功能,包括后台添加了几个数据库. 源码安装方法: 1.源码上传主机 2.数据库文件导入数据 ...
精美的导航引导页html源码
简介: 今天偶然间看到的,感觉挺好看就顺手扒了下来,所有信息均可代码修改,代码很简洁喜欢的拿走吧. 下载地址: http://www.bytepan.com/y5UWWyNDCXl

网址导航引导页面H5源码

文章目录

前言

一、网址导航引导页面

二、程序演示与下载

1.程序演示

2.程序下载

网址导航引导页面H5源码相关推荐

最新文章

热门文章