四大名著介绍 - 用 HTML 和 CSS 创建简洁精炼的 Tab 页面 - 常规

<!DOCTYPE html>
<html>
<head>
	<meta charset='UTF-8'>
	<title>四大名著介绍</title>
	<style>
		body {
			font-family: Arial, sans-serif;
			background-color: #f2f2f2;
		}
		h1 {
			text-align: center;
			margin-top: 50px;
		}
		.tab {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 50px;
		}
		.tab button {
			background-color: #fff;
			color: #333;
			border: none;
			outline: none;
			cursor: pointer;
			padding: 15px 25px;
			margin: 0 10px;
			border-radius: 5px 5px 0 0;
			transition: background-color 0.3s ease-in-out;
		}
		.tab button:hover {
			background-color: #333;
			color: #fff;
		}
		.tab button.active {
			background-color: #333;
			color: #fff;
		}
		.tabcontent {
			display: none;
			padding: 20px;
			background-color: #fff;
			border-radius: 0 5px 5px 5px;
			box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
			margin-top: -5px;
		}
		.tabcontent.active {
			display: block;
		}
		.book {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			margin-top: 50px;
		}
		.book img {
			height: 200px;
			margin: 20px;
			border-radius: 5px;
			box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
			transition: transform 0.3s ease-in-out;
		}
		.book img:hover {
			transform: scale(1.05);
			box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
		}
		.book p {
			text-align: center;
			font-weight: bold;
			margin-top: 10px;
		}
	</style>
</head>
<body>
	<h1>四大名著介绍</h1>
	<div class='tab'>
		<button class='tablinks active' onclick='openBook(event, 'journey')'>西游记</button>
		<button class='tablinks' onclick='openBook(event, 'watermelon')'>红楼梦</button>
		<button class='tablinks' onclick='openBook(event, 'threebody')'>三体</button>
		<button class='tablinks' onclick='openBook(event, 'dream')'>水浒传</button>
	</div>
	<div id='journey' class='tabcontent active'>
		<div class='book'>
			<img src='https://i.loli.net/2021/06/23/q8Wt4J3O2z5rHxS.jpg' alt='西游记'>
			<p>《西游记》是明代文学家吴承恩所著的一部长篇神魔小说，以唐朝司马相如为原型，讲述了唐僧师徒四人西天取经的故事。</p>
		</div>
	</div>
	<div id='watermelon' class='tabcontent'>
		<div class='book'>
			<img src='https://i.loli.net/2021/06/23/8tqYDvWV7f3xErM.jpg' alt='红楼梦'>
			<p>《红楼梦》是清朝作家曹雪芹所写的一部长篇小说，以贾宝玉和林黛玉的爱情为主线，描绘了贾家荣华富贵的兴衰历程。</p>
		</div>
	</div>
	<div id='threebody' class='tabcontent'>
		<div class='book'>
			<img src='https://i.loli.net/2021/06/23/LkrvJd8g1fnz6YH.jpg' alt='三体'>
			<p>《三体》是中国科幻作家刘慈欣所著的一部科幻小说，描写了地球与三体文明的交锋，以及人类面对外星文明的生存抉择。</p>
		</div>
	</div>
	<div id='dream' class='tabcontent'>
		<div class='book'>
			<img src='https://i.loli.net/2021/06/23/wiKczXvmtAQF8UB.jpg' alt='水浒传'>
			<p>《水浒传》是元朝作家施耐庵所著的一部长篇小说，讲述了宋江领导的一百零八位忠义之士义贼天下的故事。</p>
		</div>
	</div>
	<script>
		function openBook(evt, bookName) {
			var i, tabcontent, tablinks;
			tabcontent = document.getElementsByClassName('tabcontent');
			for (i = 0; i < tabcontent.length; i++) {
				tabcontent[i].className = tabcontent[i].className.replace(' active', '');
			}
			tablinks = document.getElementsByClassName('tablinks');
			for (i = 0; i < tablinks.length; i++) {
				tablinks[i].className = tablinks[i].className.replace(' active', '');
			}
			document.getElementById(bookName).className += ' active';
			evt.currentTarget.className += ' active';
		}
	</script>
</body>
</html>