在index.html页面body中加入如下HTML结构，有一个<h2>的标题居中显示，中间<div>标签中加入需要显示
的下载的内容，左边部分为下载文件名称，下载次数，右边部分当鼠标移动时会显示“点击下载”按键。
其中ul class="filelist"用来陈列文件列表，
现在它里面没有内容，将使用jQuery来异步读取文件列表，所以别忘了，还需要在html中加载jQuery库文件。
<body> <div id="header"> <div id="logo" style="text-align: center"><h2>下载统计</h2></div> </div> <div id="main"> <div id="demo"> <ul class="filelist"> </ul> </div> </div> <div id="footer"> </div> </body>
实现如下表格中的简单样式布局：
| 头部标题: 下载统计 | |||
| 中间的内容 | |||
| 下载的内容1 | 如：下载测试1.zip | 下载次数 如：7 | "点击下载" 按键 |
| 下载的内容2 | ...... | ....... | ....... |
| 下载的内容3 | ...... | ....... | ....... |
| 底部的内容(可自行添加内容和样式) | |||
为了让demo更好的展示页面效果，我们使用CSS来修饰页面，
以下的代码主要设置文件列表展示效果，当然实际项目中可以根据需要设置相应的样式。
在html<head>头部里面的<style>标签中输入各种CSS样式代码
<style>
#demo{width:80%;margin:50px auto;padding:10px;border:1px solid #ddd;background-color:#eee;}
ul.filelist li{background:url("https://img.php.cn/upload/course/000/000/008/582e53ad28601855.gif") repeat-x center bottom #F5F5F5;
border:1px solid #ddd;border-top-color:#fff;list-style:none;position:relative;}
ul.filelist li.load{background:url("https://img.php.cn/upload/course/000/000/008/582e5313d54a1210.gif") no-repeat;
padding-left:20px; border:none; position:relative; left:150px; top:30px; width:200px}
ul.filelist li a{display:block;padding:8px;}
ul.filelist li a:hover .download{display:block;}
span.download{background-color:#64b126;border:1px solid #4e9416;color:white;
display:none;font-size:12px;padding:2px 4px;position:absolute;right:8px;
text-decoration:none;text-shadow:0 0 1px #315d0d;top:6px;
-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}
span.downcount{color:#999;font-size:10px;padding:3px 5px;position:absolute; margin-left:10px;text-decoration:none;}
</style> 下一节
