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

来源：互联网发布：gps航迹编辑软件编辑：程序博客网时间：2024/06/05 10:02

一个简单的网页系统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库中找到。

1 0

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

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

一。 页面展示图

二。代码分析

三. 代码展示

四. 展示网页

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

一。页面展示图