다운로드 횟수 통계를 구현하고 HTML 페이지를 생성하는 PHP 개발

index.html 페이지 본문에 다음 HTML 구조를 추가하세요. 중앙에 표시되는 <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 … ….. … 하단의 콘텐츠(콘텐츠 및 스타일은 직접 추가 가능)데모에서 페이지 효과를 더 잘 표현하기 위해,

다음 코드는 주로 파일 목록 표시 효과를 설정합니다. 물론 실제 프로젝트에서는 필요에 따라 해당 스타일을 설정할 수 있습니다.

html<head> 헤더 내부의 <style>에 다양한 CSS 스타일 코드를 입력하세요.다음 섹션

새로운 파일

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>PHP实现文件下载次数统计</title>
<style type="text/css">
	#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>
</head>

<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>
</html>

제출하다 코드 재설정

자동운전

전체 화면