您的位置：首页 > 其它

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

2017-04-27 18:19 351 查看

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

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

一。页面展示图

二。代码分析

此处主要是有了myFocus js库，由于官网上下载比较缓慢，因此可以在我的gitHub源码中下载。
注意代码结构
<div class="boxId">
<div class="loading"></div>
<div cass="pic">
<ul>
<li></li>
<li></li>
</ul>
</div>
</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库中找到。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航