一个简单的网页系统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>
四. 展示网页
代码可以在我的gitHub库中找到。