PHP開(kāi)發(fā)實(shí)作下載次數(shù)統(tǒng)計(jì)建立HTML頁(yè)面
在index.html頁(yè)面body中加入以下HTML結(jié)構(gòu)，有一個(gè)<h2>的標(biāo)題居中顯示，中間<div>標(biāo)籤中加入需要顯示
的下載的內(nèi)容，左邊部分為下載檔案名稱，下載次數(shù)，右邊部分當(dāng)滑鼠移動(dòng)時(shí)會(huì)顯示「點(diǎn)擊下載」按鍵。
其中ul class="filelist"用來(lái)陳列檔案列表，
#現(xiàn)在它裡面沒(méi)有內(nèi)容，將使用jQuery來(lái)異步讀取檔案列表，所以別忘了，還需要在html中載入jQuery庫(kù)檔。
<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)如下表格中的簡(jiǎn)單樣式佈局：
| ? ? ? ? ? ? ? ? 頭部標(biāo)題: ?下載統(tǒng)計(jì) | |||
| ? ? ? ? ? ? ? ? 中間的內(nèi)容 | |||
| 下載的內(nèi)容 1 | ##如：下載測(cè)試1.zip?下載次數(shù)? 如：7 | 如：下載測(cè)驗(yàn)1.zip | ?下載次數(shù) | #?"點(diǎn)選下載" ?按鍵
| 下載的內(nèi)容2 | ? ? ...... | ? ? ....... | ? ?....... |
| 下載的內(nèi)容3 | ? ? ...... | ? ? ... .... | ? ?....... |
| ##? ? ? ? ? ? ? ? ?底部的內(nèi)容(可自行新增內(nèi)容與樣式) | |||
#為了讓demo更好的展示頁(yè)面效果，我們使用CSS來(lái)修飾頁(yè)面，
以下的程式碼主要設(shè)定檔案清單展示效果，當(dāng)然實(shí)際專案中可以根據(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> 
