用html写一个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;
}
.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
原文地址: https://www.cveoy.top/t/topic/hchN 著作权归作者所有。请勿转载和采集!