PHP開發(fā)實(shí)現(xiàn)下載次數(shù)統(tǒng)計(jì)創(chuàng)建HTML頁面
在index.html頁面body中加入如下HTML結(jié)構(gòu)，有一個(gè)<h2>的標(biāo)題居中顯示，中間<div>標(biāo)簽中加入需要顯示
的下載的內(nèi)容，左邊部分為下載文件名稱，下載次數(shù)，右邊部分當(dāng)鼠標(biāo)移動(dòng)時(shí)會(huì)顯示“點(diǎn)擊下載”按鍵。
其中ul class="filelist"用來陳列文件列表，
現(xiàn)在它里面沒有內(nèi)容，將使用jQuery來異步讀取文件列表，所以別忘了，還需要在html中加載jQuery庫文件。
<body> <div id="header"> <div id="logo" style="text-align: center"><h2>下載統(tǒng)計(jì)</h2></div> </div> <div id="main"> <div id="demo"> <ul class="filelist"> </ul> </div> </div> <div id="footer"> </div> </body>
實(shí)現(xiàn)如下表格中的簡單樣式布局：
| ? ? ? ? ? ? ? ? 頭部標(biāo)題: ?下載統(tǒng)計(jì) | |||
| ? ? ? ? ? ? ? ? 中間的內(nèi)容 | |||
| 下載的內(nèi)容1 | 如：下載測試1.zip | ?下載次數(shù) ? 如：7 | ?"點(diǎn)擊下載" ?按鍵 |
| 下載的內(nèi)容2 | ? ? ...... | ? ? ....... | ? ?....... |
| 下載的內(nèi)容3 | ? ? ...... | ? ? ....... | ? ?....... |
| ? ? ? ? ? ? ? ? ?底部的內(nèi)容(可自行添加內(nèi)容和樣式) | |||
為了讓demo更好的展示頁面效果，我們使用CSS來修飾頁面，
以下的代碼主要設(shè)置文件列表展示效果，當(dāng)然實(shí)際項(xiàng)目中可以根據(jù)需要設(shè)置相應(yīng)的樣式。
在html<head>頭部里面的<style>標(biāo)簽中輸入各種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> 
