<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>校园活动公告</title>
<style>
body {
font-family
: Arial, sans-serif;
margin
: 0;
padding
: 0;
display
: flex;
flex-direction
: column;
min-height
: 100vh;
}
header {
background-color
: #51addb;
color
: white;
padding
: 1rem;
text-align
: center;
}
nav {
background-color
: #ff7829;
}
nav ul {
list-style-type
: none;
margin
: 0;
padding
: 0;
display
: flex;
justify-content
: center;
}
nav ul li {
padding
: 1rem;
}
nav ul li a {
color
: white;
text-decoration
: none;
}
main {
flex
: 1;
padding
: 1rem;
}
footer {
background-color
: #51addb;
color
: white;
text-align
: center;
padding
: 1rem;
margin-top
: auto;
}
.content {
display
: grid;
grid-template-columns
: repeat(auto-fit, minmax(300px, 1fr));
gap
: 1rem;
}
.content article {
background-color
: #f4f4f4;
padding
: 1rem;
border
: 1px solid #ddd;
border-radius
: 8px;
}
@media (max-width
: 768px) {
nav ul {
flex-direction
: column;
align-items
: center;
}
.content {
grid-template-columns
: 1fr;
}
}
.content article {
transition
: transform 0.3s ease, background-color 0.3s ease;
}
.content article
:hover {
background-color
: #e0f7fa;
transform
: scale(1.05);
box-shadow
: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.content article {
position
: relative;
perspective
: 1000px;
height
: 200px;
background-color
: transparent !important;
}
.card-front, .card-back {
position
: absolute;
width
: 100%;
height
: 100%;
backface-visibility
: hidden;
transition
: all 0.6s ease;
padding
: 1rem;
border-radius
: 8px;
background-color
: #f4f4f4;
box-sizing
: border-box;
}
.content article
:hover .card-front {
transform
: rotateY(180deg);
}
.content article
:hover .card-back {
transform
: rotateY(360deg);
}
.content article
:hover {
transform
: scale(1.1) !important;
box-shadow
: 0 10px 20px rgba(0, 0, 0, 0.3) !important;
background-color
: transparent !important;
}
body {
transition
: background-color 0.5s ease;
}
.content
:hover {
background-color
: #e0f7fa;
}
</style>
</head>
<body>
<header>
<h1>校园活动公告</h1>
</header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">活动日历</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</nav>
<main>
<section class="content">
<article>
<div class="card-front">
<h2>校园音乐会</h2>
<p><strong>时间：</strong>2025年10月15日 18
:00</p>
<p><strong>地点：</strong>学校大礼堂</p>
<p>欢迎全体师生参加，享受一场音乐盛宴！</p>
</div>
<div class="card-back">
<p>欢迎全体师生参加，享受一场音乐盛宴！</p>
</div>
</article>
<article>
<div class="card-front">
<h2>编程马拉松</h2>
<p><strong>时间：</strong>2025年10月20日 09
:00</p>
<p><strong>地点：</strong>计算机学院实验室</p>
<p>与同学们一起挑战编程极限，赢取丰厚奖品！</p>
</div>
<div class="card-back">
<p>与同学们一起挑战编程极限，赢取丰厚奖品！</p>
</div>
</article>
<article>
<div class="card-front">
<h2>校园运动会</h2>
<p><strong>时间：</strong>2025年10月25日 08
:00</p>
<p><strong>地点：</strong>学校操场</p>
<p>参与各项运动项目，展现你的运动风采！</p>
</div>
<div class="card-back">
<p>参与各项运动项目，展现你的运动风采！</p>
</div>
</article>
</section>
</main>
<footer>
<p>© 2025 校园活动中心 | 联系方式：activity@school.edu</p>
</footer>
</body>
</html>
以上代码的运行结果不符合我预期的效果，当鼠标移动至卡片上时翻转一百八十度，但是没有对齐，帮我修改一下
本文介绍Struts2框架中&s:hidden标签的使用方法，包括如何将参数传递给Action类，以及如何根据不同场景选择合适的表示方式。
扫一扫
1276
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
