中国四大名著 | HTML & CSS 实现古代风格标签页 - 常规

<!DOCTYPE html>
<html>
<head>
	<title>中国四大名著</title>
	<style type="text/css">
		body {
			background-image: url('background.jpg');
			background-size: cover;
			color: white;
			font-family: 'Microsoft Yahei', sans-serif;
			font-size: 16px;
			line-height: 1.5;
			margin: 0;
			padding: 0;
		}
<pre><code>	h1 {
		font-size: 32px;
		margin: 30px 0 20px;
		text-align: center;
	}

	h2 {
		font-size: 24px;
		margin: 30px 0 10px;
	}

	.tab {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin-bottom: 50px;
	}

	.tab button {
		background-color: inherit;
		border: none;
		color: white;
		cursor: pointer;
		font-size: 20px;
		margin: 0 10px;
		outline: none;
		padding: 15px 20px;
		transition: background-color 0.3s ease;
	}

	.tab button.active {
		background-color: rgba(255, 255, 255, 0.3);
		border-radius: 10px;
	}

	.tabcontent {
		display: none;
		padding: 20px;
		text-align: justify;
		width: 90%;
	}

	.tabcontent p {
		margin-bottom: 10px;
	}

	.tabcontent img {
		display: block;
		margin: 20px auto;
		max-width: 100%;
	}
&lt;/style&gt;
</code></pre>
</head>
<body>
	<h1>中国四大名著</h1>
	<div class="tab">
		<button class="tablinks active" onclick="openTab(event, 'honglou')">'红楼梦'</button>
		<button class="tablinks" onclick="openTab(event, 'xiyou')">'西游记'</button>
		<button class="tablinks" onclick="openTab(event, 'shuihu')">'水浒传'</button>
		<button class="tablinks" onclick="openTab(event, 'sanguo')">'三国演义'</button>
	</div>
	<div id="honglou" class="tabcontent" style="display: block;">
		<h2>'红楼梦'</h2>
		<p>'红楼梦'是清代作家曹雪芹所著的长篇小说，被誉为中国古代小说的巅峰之作。小说以贾宝玉为主人公，描写了他和林黛玉、薛宝钗等人之间的爱情纠葛，以及贾家衰落的历程。</p>
		<img src="honglou.jpg" alt="红楼梦">
	</div>
	<div id="xiyou" class="tabcontent">
		<h2>'西游记'</h2>
		<p>'西游记'是明代小说家吴承恩所著的长篇小说，是中国古代小说中的四大奇书之一。小说主要描写了孙悟空、猪八戒、沙悟净和唐僧四人西天取经的历程，充满了神话和传说元素。</p>
		<img src="xiyou.jpg" alt="西游记">
	</div>
	<div id="shuihu" class="tabcontent">
		<h2>'水浒传'</h2>
		<p>'水浒传'是明代小说家施耐庵所著的长篇小说，也是中国古代小说中的四大奇书之一。小说主要描写了108位好汉的抗金故事，其中有许多英雄人物如宋江、武松等。</p>
		<img src="shuihu.jpg" alt="水浒传">
	</div>
	<div id="sanguo" class="tabcontent">
		<h2>'三国演义'</h2>
		<p>'三国演义'是元代小说家罗贯中所著的长篇小说，是中国古代小说中的四大奇书之一。小说主要描写了三国时期的历史故事，如曹操、刘备、孙权等人之间的战争和政治斗争。</p>
		<img src="sanguo.jpg" alt="三国演义">
	</div>
	<script type="text/javascript">
		function openTab(evt, tabName) {
			var i, tabcontent, tablinks;
			tabcontent = document.getElementsByClassName("tabcontent");
			for (i = 0; i < tabcontent.length; i++) {
				tabcontent[i].style.display = "none";
			}
			tablinks = document.getElementsByClassName("tablinks");
			for (i = 0; i < tablinks.length; i++) {
				tablinks[i].className = tablinks[i].className.replace(" active", "");
			}
			document.getElementById(tabName).style.display = "block";
			evt.currentTarget.className += " active";
		}
	</script>
</body>
</html>