网址导航引导页面H5源码

鲸鱼源码网

已于 2023-05-17 02:57:19 修改

阅读量4k

点赞数

分类专栏：源码文章标签： html css

于 2022-10-13 21:51:59 首次发布

本文链接：https://blog.csdn.net/ztc152521/article/details/127310160

版权

源码专栏收录该内容

16 篇文章 4 订阅

订阅专栏

文章目录

前言
一、网址导航引导页面
二、程序演示与下载
- 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&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>