PHP開發實作下載次數統計建立HTML頁面
在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 | 如：下載測驗1.zip | 下載次數 | # "點選下載" 按鍵
| 下載的內容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> 
