请你使用html写一个tab页面介绍四大名著当鼠标移动到对应的tab时进行换页再写一个css使得页面看着更舒服
<!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;
color: #333;
}
.tab {
display: flex;
justify-content: space-around;
align-items: center;
margin-top: 50px;
height: 50px;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.tab a {
font-size: 18px;
color: #333;
text-decoration: none;
padding: 10px;
transition: all 0.3s ease-in-out;
}
.tab a:hover,
.tab a.active {
background-color: #333;
color: #fff;
}
.tabcontent {
display: none;
padding: 20px;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.tabcontent.active {
display: block;
}
.book {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
margin-top: 50px;
}
.book img {
width: 200px;
height: 300px;
object-fit: cover;
margin-bottom: 20px;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.book p {
font-size: 16px;
line-height: 1.5;
text-align: justify;
margin-bottom: 20px;
}
</style>
</head>
<body>
<h1>四大名著介绍</h1>
<pre><code><div class="tab">
<a href="#" class="active" onclick="openTab(event, 'honglou')">《红楼梦》</a>
<a href="#" onclick="openTab(event, 'shuihu')">《水浒传》</a>
<a href="#" onclick="openTab(event, 'xiyou')">《西游记》</a>
<a href="#" onclick="openTab(event, 'sanguo')">《三国演义》</a>
</div>
<div id="honglou" class="tabcontent active">
<div class="book">
<img src="https://img3.doubanio.com/view/subject/l/public/s1070959.jpg">
<p>《红楼梦》是中国小说史上一部长篇小说，曾用名《石头记》、《金陵十二钗》等，是中国古代小说的巅峰之作，也是中华文化的珍贵遗产之一。小说主要描写了一个封建王朝腐败没落的历史时期，以贾、史、王、薛四大家族的荣辱兴衰为背景，通过贾宝玉与林黛玉、薛宝钗等人的爱情婚姻、身世成败和悲剧遭遇等，反映了封建社会的黑暗和腐败，表现了人性的复杂和多样，是一部揭示封建社会矛盾和危机的伟大作品。</p>
</div>
</div>
<div id="shuihu" class="tabcontent">
<div class="book">
<img src="https://img3.doubanio.com/view/subject/l/public/s1128411.jpg">
<p>《水浒传》是中国小说史上一部长篇小说，是中国古代小说的经典之作，也是中华文化的珍贵遗产之一。小说主要描写了北宋末年民变的历史事件，以宋江为首的108位好汉联合起义，反抗封建统治的故事。小说运用生动的语言和丰富多彩的形象，塑造了一批伟大的英雄形象，表现了人性的善恶和复杂，反映了封建社会的黑暗和腐败，是一部展现中国民族精神和社会历史的伟大作品。</p>
</div>
</div>
<div id="xiyou" class="tabcontent">
<div class="book">
<img src="https://img3.doubanio.com/view/subject/l/public/s1072710.jpg">
<p>《西游记》是中国小说史上一部长篇小说，是中国古代小说的经典之作，也是中华文化的珍贵遗产之一。小说主要讲述了唐朝时期僧人玄奘西行取经的故事，以孙悟空、猪八戒、沙和尚、唐僧等人物为主要形象，描绘了一个充满奇幻和神秘的世界。小说融合了道教、佛教、儒教等多种文化元素，表现了中国古代文化的丰富性和多样性，也是中国民间文化的重要组成部分。</p>
</div>
</div>
<div id="sanguo" class="tabcontent">
<div class="book">
<img src="https://img3.doubanio.com/view/subject/l/public/s1074304.jpg">
<p>《三国演义》是中国小说史上一部长篇小说，是中国古代小说的经典之作，也是中华文化的珍贵遗产之一。小说主要描写了东汉末年到三国时期的历史事件，以刘备、关羽、张飞、诸葛亮、曹操、孙权等人物为主要形象，表现了一个奋起反抗暴政、建立统一政权的历史进程。小说运用生动的语言和丰富多彩的形象，塑造了一批伟大的英雄形象，表现了人性的善恶和复杂，也是中国民族精神和民族情感的表现。</p>
</div>
</div>
<script>
function openTab(evt, tabName) {
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(tabName).className += " active";
evt.currentTarget.className += " active";
}
</script>
</code></pre>
</body>
</html
原文地址: https://www.cveoy.top/t/topic/hcgY 著作权归作者所有。请勿转载和采集!