HTML5 扑克牌翻拍论文模板 - 完整代码示例 - 常规

<!DOCTYPE html>
<html>
<head>
	<meta charset='UTF-8'>
	<title>扑克牌翻拍论文模板</title>
	<style>
		body {
			font-family: Arial, sans-serif;
			margin: 0;
			padding: 0;
		}
		header {
			background-color: #333;
			color: #fff;
			padding: 10px;
			text-align: center;
		}
		main {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			padding: 20px;
		}
		.card {
			background-color: #fff;
			border: 1px solid #ccc;
			border-radius: 5px;
			box-shadow: 2px 2px 2px #ccc;
			height: 200px;
			margin: 10px;
			width: 150px;
		}
		.card:hover {
			transform: translateY(-10px);
			transition: transform 0.2s ease-in-out;
		}
		.card img {
			height: 150px;
			margin-top: 10px;
			width: 100%;
		}
		.card p {
			font-size: 16px;
			margin: 0;
			padding: 5px;
			text-align: center;
		}
		footer {
			background-color: #333;
			color: #fff;
			padding: 10px;
			text-align: center;
		}
	</style>
</head>
<body>
	<header>
		<h1>扑克牌翻拍论文模板</h1>
	</header>
	<main>
		<div class='card'>
			<img src='card1.png' alt='Ace of Hearts'>
			<p>Ace of Hearts</p>
		</div>
		<div class='card'>
			<img src='card2.png' alt='King of Diamonds'>
			<p>King of Diamonds</p>
		</div>
		<div class='card'>
			<img src='card3.png' alt='Queen of Clubs'>
			<p>Queen of Clubs</p>
		</div>
		<div class='card'>
			<img src='card4.png' alt='Jack of Spades'>
			<p>Jack of Spades</p>
		</div>
	</main>
	<footer>
		<p>Created by [Your Name]</p>
	</footer>
</body>
</html>