用html写一个tab页面介绍中国四大名著用css使页面看上去更简洁和精炼
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>中国四大名著介绍</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f1f1f1;
}
<pre><code> .container {
width: 80%;
margin: 0 auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
border-radius: 5px;
}
.tab {
display: flex;
flex-wrap: wrap;
margin-bottom: 20px;
}
.tab button {
background-color: #ddd;
border: none;
outline: none;
cursor: pointer;
padding: 10px 20px;
font-size: 16px;
flex: 1;
margin-right: 10px;
}
.tab button.active {
background-color: #4CAF50;
color: #fff;
}
.tabcontent {
display: none;
padding: 20px;
}
.tabcontent.active {
display: block;
}
h1 {
font-size: 32px;
margin-bottom: 20px;
}
p {
line-height: 1.5;
margin-bottom: 10px;
}
ul {
margin-left: 20px;
margin-bottom: 10px;
}
li {
margin-bottom: 5px;
}
</style>
</code></pre>
</head>
<body>
<div class="container">
<h1>中国四大名著介绍</h1>
<div class="tab">
<button class="tablinks active" onclick="openTab(event, 'honglou')">红楼梦</button>
<button class="tablinks" onclick="openTab(event, 'shuihu')">水浒传</button>
<button class="tablinks" onclick="openTab(event, 'xiyou')">西游记</button>
<button class="tablinks" onclick="openTab(event, 'sanguo')">三国演义</button>
</div>
<div id="honglou" class="tabcontent active">
<p>《红楼梦》是中国文学史上一部长篇小说，被誉为中国古代小说的巅峰之作。</p>
<ul>
<li>作者：曹雪芹</li>
<li>成书年代：18世纪中期</li>
<li>主要人物：贾宝玉、林黛玉、薛宝钗、王熙凤等</li>
</ul>
</div>
<div id="shuihu" class="tabcontent">
<p>《水浒传》是中国文学史上一部长篇小说，描写了北宋末年108位好汉在梁山泊聚义的故事。</p>
<ul>
<li>作者：施耐庵</li>
<li>成书年代：14世纪末至15世纪初</li>
<li>主要人物：宋江、林冲、鲁智深、武松等</li>
</ul>
</div>
<div id="xiyou" class="tabcontent">
<p>《西游记》是中国文学史上一部长篇小说，描写了唐僧带领孙悟空、猪八戒、沙僧等人西天取经的故事。</p>
<ul>
<li>作者：吴承恩</li>
<li>成书年代：16世纪末至17世纪初</li>
<li>主要人物：唐僧、孙悟空、猪八戒、沙僧等</li>
</ul>
</div>
<div id="sanguo" class="tabcontent">
<p>《三国演义》是中国文学史上一部长篇小说，描写了三国时期的历史事件以及各种英雄人物的故事。</p>
<ul>
<li>作者：罗贯中</li>
<li>成书年代：14世纪末至15世纪初</li>
<li>主要人物：刘备、关羽、张飞、曹操、孙权等</li>
</ul>
</div>
</div>
<script>
function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].classList.remove("active");
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].classList.remove("active");
}
document.getElementById(tabName).classList.add("active");
evt.currentTarget.classList.add("active");
}
</script>
</body>
</html
原文地址: https://www.cveoy.top/t/topic/hchV 著作权归作者所有。请勿转载和采集!