请你使用html写一个tab页面介绍四大名著当鼠标移动到对应的tab时进行换页再写一个css使得页面看着更舒服再优化一下页面的背景
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>四大名著介绍</title>
<style>
body {
background-image: url('https://cdn.pixabay.com/photo/2017/02/22/19/11/abstract-2091916_960_720.jpg');
background-size: cover;
font-family: Arial, Helvetica, sans-serif;
color: #fff;
margin: 0;
padding: 0;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
h1 {
text-align: center;
margin: 50px 0;
font-weight: bold;
font-size: 36px;
text-shadow: 2px 2px #000;
}
.tab {
display: inline-block;
padding: 10px 20px;
border-radius: 10px 10px 0 0;
background-color: #fff;
color: #000;
cursor: pointer;
margin-right: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.tab.active {
background-color: #ff6347;
color: #fff;
}
.tab-content {
padding: 20px;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
border-radius: 0 10px 10px 10px;
display: none;
}
.tab-content.active {
display: block;
}
.book {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.book img {
width: 200px;
height: 300px;
margin-right: 20px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.book h2 {
font-size: 24px;
font-weight: bold;
margin: 0;
text-shadow: 2px 2px #000;
}
.book p {
font-size: 18px;
margin-top: 10px;
line-height: 1.5;
text-indent: 2em;
}
</style>
</head>
<body>
<div class="container">
<h1>四大名著介绍</h1>
<div class="tabs">
<div class="tab active" data-tab="journey">
西游记
</div>
<div class="tab" data-tab="three">
三国演义
</div>
<div class="tab" data-tab="water">
水浒传
</div>
<div class="tab" data-tab="red">
红楼梦
</div>
</div>
<div class="tab-contents">
<div class="tab-content active" data-tab="journey">
<div class="book">
<img src="https://cdn.pixabay.com/photo/2019/08/02/06/06/journey-to-the-west-4374398_960_720.jpg">
<div>
<h2>《西游记》</h2>
<p>《西游记》是中国古代小说，是明代小说家吴承恩创作的长篇小说，全名为《西游记三藏取经大传》。小说通过描写唐朝僧人玄奘西天取经的故事，表现了人物的不同性格、不同阶层、不同民族的形象和人民群众的生活场面。是中国古代小说的经典之作，被誉为“中国神髓小说的巅峰之作”。</p>
</div>
</div>
</div>
<div class="tab-content" data-tab="three">
<div class="book">
<img src="https://cdn.pixabay.com/photo/2019/08/02/06/10/three-kingdoms-4374406_960_720.jpg">
<div>
<h2>《三国演义》</h2>
<p>《三国演义》是中国古代长篇小说，作者是元朝人罗贯中。《三国演义》描述的是从东汉末年到西晋初年这个时期的历史故事，主要讲述了三国时代各国之间的政治、军事、外交等方面的斗争。小说以其丰富多彩的人物形象、曲折离奇的情节和深刻的历史思考而成为中国古代小说的经典之作。</p>
</div>
</div>
</div>
<div class="tab-content" data-tab="water">
<div class="book">
<img src="https://cdn.pixabay.com/photo/2019/08/02/06/10/water-margin-4374407_960_720.jpg">
<div>
<h2>《水浒传》</h2>
<p>《水浒传》是中国古代小说，作者不详。小说描述的是北宋末年农民起义领袖宋江领导的108位好汉在梁山泊聚义的故事。这部小说以其生动的人物形象、曲折离奇的情节、深刻的思想内涵和优美的语言风格而成为中国古代小说中不可多得的经典之作。</p>
</div>
</div>
</div>
<div class="tab-content" data-tab="red">
<div class="book">
<img src="https://cdn.pixabay.com/photo/2019/08/02/06/09/dream-of-red-chamber-4374402_960_720.jpg">
<div>
<h2>《红楼梦》</h2>
<p>《红楼梦》是中国古代小说，作者是清代作家曹雪芹。小说主要描写了一个大贾家庭的兴衰历程，以及贾宝玉与林黛玉、薛宝钗之间的爱情故事。小说以其精美的艺术形式、深刻的人物塑造、优美的语言风格和独特的思想内涵，被誉为“中国古代小说的巅峰之作”。</p>
</div>
</div>
</div>
</div>
</div>
<script>
const tabs = document.querySelectorAll('.tab');
const tabContents = document.querySelectorAll('.tab-content');
<pre><code> tabs.forEach(tab => {
tab.addEventListener('click', () => {
const tabId = tab.dataset.tab;
tabs.forEach(tab => tab.classList.remove('active'));
tabContents.forEach(content => content.classList.remove('active'));
tab.classList.add('active');
document.querySelector(`[data-tab="${tabId}"]`).classList.add('active');
});
});
</script>
</code></pre>
</body>
</html
原文地址: https://www.cveoy.top/t/topic/hcg5 著作权归作者所有。请勿转载和采集!