景点列表展示 - HTML+CSS+JS 创建景点信息页面 - 常规

<!DOCTYPE html>
<html>
<head>
	<title>景点列表</title>
	<meta charset="UTF-8">
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #f2f2f2;
		}
		.container {
			width: 80%;
			margin: 0 auto;
			padding-top: 50px;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
		}
		.card {
			width: 300px;
			margin: 20px;
			border: 1px solid #ccc;
			border-radius: 5px;
			overflow: hidden;
			box-shadow: 0 0 10px rgba(0,0,0,0.2);
			background-color: #fff;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}
		.card img {
			width: 100%;
			height: 200px;
			object-fit: cover;
		}
		.card h3 {
			margin: 10px;
			font-size: 24px;
			font-weight: bold;
			text-align: center;
		}
		.card p {
			margin: 10px;
			font-size: 16px;
			line-height: 1.5;
			text-align: justify;
		}
		.card .info {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10px;
			background-color: #f2f2f2;
		}
		.card .info span {
			font-size: 16px;
			font-weight: bold;
			color: #333;
		}
		.card .info a {
			font-size: 16px;
			color: #008CBA;
			text-decoration: none;
			font-weight: bold;
			transition: all 0.3s ease-in-out;
		}
		.card .info a:hover {
			color: #ff6600;
		}
	</style>
</head>
<body>
	<div class='container'>
		<div class='card'>
			<img src='https://picsum.photos/300/200' alt='景点照片'>
			<h3>颐和园</h3>
			<p>颐和园，又称万园之园，是中国清朝时期一座宫廷皇家园林，位于北京市西郊，距城区十五公里，占地约290公顷，水域约150公顷，园内建筑宫殿众多，分为前、中、后三部分，是中国古典园林的代表之一。</p>
			<div class='info'>
				<span>位于：北京市</span>
				<a href='#'>查看详情</a>
			</div>
		</div>
		<div class='card'>
			<img src='https://picsum.photos/300/200' alt='景点照片'>
			<h3>故宫博物院</h3>
			<p>故宫博物院，简称故宫，位于中国北京市中心的紫禁城内，是明、清两代的皇宫，也是中国古代宫廷建筑之精华，是世界上现存规模最大、保存最为完整的古代宫殿建筑之一。</p>
			<div class='info'>
				<span>位于：北京市</span>
				<a href='#'>查看详情</a>
			</div>
		</div>
		<div class='card'>
			<img src='https://picsum.photos/300/200' alt='景点照片'>
			<h3>长城</h3>
			<p>长城，又称万里长城，是中国古代的军事防御工程，是中国古代劳动人民在数千年的历史长河中创造的伟大奇迹，也是中国古代科技文明的瑰宝之一。</p>
			<div class='info'>
				<span>位于：北京市</span>
				<a href='#'>查看详情</a>
			</div>
		</div>
		<div class='card'>
			<img src='https://picsum.photos/300/200' alt='景点照片'>
			<h3>西湖</h3>
			<p>西湖，位于中国浙江省杭州市西湖区，是中国著名的景点和旅游胜地，是中国十大名湖之一，是中国南方的著名淡水湖泊之一，也是中国文化名胜区的重要组成部分。</p>
			<div class='info'>
				<span>位于：浙江省杭州市</span>
				<a href='#'>查看详情</a>
			</div>
		</div>
		<div class='card'>
			<img src='https://picsum.photos/300/200' alt='景点照片'>
			<h3>黄鹤楼</h3>
			<p>黄鹤楼，位于中国湖北省武汉市长江南岸的蛇山上，是中国著名的古迹名楼之一，也是中国文化名胜区的重要组成部分，被誉为'江南三大名楼'之一。</p>
			<div class='info'>
				<span>位于：湖北省武汉市</span>
				<a href='#'>查看详情</a>
			</div>
		</div>
	</div>
</body>
</html>