一个简单的网页系统Tour（终结）和效果展示图

最新推荐文章于 2024-06-14 00:27:36 发布

lcla0800

最新推荐文章于 2024-06-14 00:27:36 发布

阅读量1.2k

点赞数 1

分类专栏：可视化 web前端

本文链接：https://blog.csdn.net/lccla120712/article/details/70870814

版权

可视化同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

web前端

4 篇文章 1 订阅

订阅专栏

一个简单的网页系统Tour（终结）

本篇文章将展示具体页面展示效果以及整体架构图。

一。页面展示图

二。代码分析

此处主要是有了myFocus js库，由于官网上下载比较缓慢，因此可以在我的gitHub源码中下载。

注意代码结构

<ul>

</ul>

</div>

三. 代码展示

<!DOCTYPE html>
<html>
<head>
             <meta charset="utf-8">
  <title>TianTan</title>
              <style type="text/css">
                         html,body{
                          width: 100%;
                         }
                #boxID{
                  width:1000px;
                  height: 562px;
                }
                .wrap{
                  margin:0 auto;
                }
 
              </style>
</head>
<body>
   
     <div id="boxID" class="wrap">
    <div class="loading"><img src="../img/loading.gif" alt="请稍候..." /></div><!--载入画面(可删除)-->
    <div class="pic"><!--内容列表(li数目可随意增减)-->
    <ul> 
                <li><a href="#"><img src="../img/beijing/t1.jpg" thumb="" alt="北京-天坛" text="详细描述1" /></a></li>
                 <li><a href="#"><img src="../img/beijing/t2.jpg" thumb="" alt="北京-天坛" text="详细描述2" /></a></li>
                 <li><a href="#"><img src="../img/beijing/t3.jpg" thumb="" alt="北京-天坛" text="详细描述3" /></a></li>
                 <li><a href="#"><img src="../img/beijing/t4.jpg" thumb="" alt="北京-天坛" text="详细描述4" /></a></li>
                <li><a href="#"><img src="../img/beijing/t5.jpg" thumb="" alt="北京-天坛" text="详细描述5" /></a></li>
                 <li><a href="#"><img src="../img/beijing/t6.jpg" thumb="" alt="北京-天坛" text="详细描述1" /></a></li>
                 <li><a href="#"><img src="../img/beijing/t7.jpg" thumb="" alt="北京-天坛" text="详细描述2" /></a></li>
                 <li><a href="#"><img src="../img/beijing/t8.jpg" thumb="" alt="北京-天坛" text="详细描述3" /></a></li>
                 <li><a href="#"><img src="../img/beijing/t9.jpg" thumb="" alt="北京-天坛" text="详细描述4" /></a></li>
   
    </ul>

  </div>
     </div>

     <script type="text/javascript" src="../../js/myfocus-2.0.1.min.js"></script>
     <script type="text/javascript">
             myFocus.set({
              id:'boxID',
              pattern:'mF_fancy'//风格
             });
</script>
</body>
</html>

四. 展示网页

网页链接： https://liuchengcheng-jack.github.io/Tour/firstPage.html

代码可以在我的gitHub库中找到。

lcla0800

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
一个简单的网页系统Tour（终结）和效果展示图

一个简单的网页系统Tour（终结）本篇文章将展示具体页面展示效果以及整体架构图。一。页面展示图二。代码分析此处主要是有了myFocus js库，由于官网上下载比较缓慢，因此可以在我的gitHub源码中下载。注意代码结构
复制链接

扫一扫