PHP development to implement download count statistics and create HTML pages
Add the following HTML structure to the body of the index.html page. There is a <h2> title displayed in the center. In the middle <div> tag, add the downloaded content that needs to be displayed
. The left part is The name of the downloaded file, the number of downloads, and the "Click to Download" button will be displayed when the mouse is moved on the right part.
Ul class="filelist" is used to display the file list.
Now it has no content. jQuery will be used to read the file list asynchronously. So don't forget, you also need to load the jQuery library file in html.
<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>
Implement the simple style layout in the following table:
| Header title: Download statistics | |||
| Content in the middle | |||
| Downloaded content 1 | Such as: download test 1.zip | Number of downloads Such as: 7 | "Click to download" button |
| Downloaded content 2 | ...... | ....... | ...... |
| Downloaded content 3 | ...... | ... .... | ....... |
| Content at the bottom (you can add content and style by yourself) | |||
In order to make the demo better display the page effect, we use CSS to modify the page.
The following code mainly sets the file list display effect. Of course, in the actual project, the corresponding settings can be set as needed. style.
Enter various CSS style codes in the <style> tag inside the html<head> header
<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> 
![Front-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Zero-based front-end course [Vue advanced learning and practical application]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![WEB front-end tutorial [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Apipost practical application [api, interface, automated testing, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
