- 响应式设计：适配电脑、平板和手机屏幕。
- 节日氛围：使用了温暖的配色、气球和鲜花等元素。
- 祝福墙：一个可以滚动查看的祝福展示区。
- 发送祝福：一个简单的表单，让访客可以提交自己的祝福（提交后仅在当前页面可见，刷新后重置）。
- 互动效果：包含鼠标悬停动画和点击效果。
教师节主题网页源码
您可以直接将以下所有代码复制,粘贴到一个文本编辑器中（如 VS Code、Sublime Text 或记事本），然后将其保存为 teachers_day.html 文件，最后用浏览器打开即可。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">感恩教师节 - 致敬我们最敬爱的老师</title>
<style>
/* --- 全局样式和变量 --- */
:root {
--primary-color: #e74c3c; /* 红色，主色调 */
--secondary-color: #f39c12; /* 橙色，辅助色 */
--text-color: #333;
--light-bg: #fef9e7;
--card-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;
}
body {
background-color: var(--light-bg);
color: var(--text-color);
line-height: 1.6;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* --- 头部样式 --- */
header {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
padding: 60px 0;
text-align: center;
position: relative;
overflow: hidden;
}
header::before {
content: '🎓 📚 ✏️';
position: absolute;
font-size: 3rem;
opacity: 0.2;
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
h1 {
font-size: 3.5rem;
margin-bottom: 10px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}
.subtitle {
font-size: 1.2rem;
font-weight: 300;
}
/* --- 主要内容区 --- */
main {
padding: 60px 0;
}
/* 祝福墙样式 */
.wishes-section {
margin-bottom: 60px;
}
.section-title {
text-align: center;
font-size: 2.5rem;
color: var(--primary-color);
margin-bottom: 40px;
position: relative;
}
.section-title::after {
content: '';
display: block;
width: 80px;
height: 3px;
background-color: var(--secondary-color);
margin: 10px auto 0;
}
.wishes-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
}
.wish-card {
background: white;
padding: 25px;
border-radius: 15px;
box-shadow: var(--card-shadow);
flex: 1 1 300px;
max-width: 400px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
position: relative;
overflow: hidden;
}
.wish-card::before {
content: '💐';
position: absolute;
top: -10px;
right: -10px;
font-size: 3rem;
opacity: 0.1;
}
.wish-card:hover {
transform: translateY(-10px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.wish-author {
font-weight: bold;
color: var(--primary-color);
margin-bottom: 10px;
}
.wish-content {
font-size: 1rem;
color: #555;
}
/* 发送祝福表单样式 */
.form-section {
background: white;
padding: 40px;
border-radius: 20px;
box-shadow: var(--card-shadow);
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 8px;
font-weight: bold;
color: #555;
}
input[type="text"],
textarea {
width: 100%;
padding: 12px 15px;
border: 2px solid #ddd;
border-radius: 10px;
font-size: 1rem;
transition: border-color 0.3s ease;
}
input[type="text"]:focus,
textarea:focus {
outline: none;
border-color: var(--secondary-color);
}
textarea {
resize: vertical;
min-height: 120px;
}
.submit-btn {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
border: none;
padding: 15px 40px;
font-size: 1.1rem;
font-weight: bold;
border-radius: 50px;
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease;
display: block;
margin: 30px auto 0;
}
.submit-btn:hover {
transform: scale(1.05);
box-shadow: 0 5px 15px rgba(231, 76, 60, 0.4);
}
/* 气球装饰 */
.balloon {
position: fixed;
bottom: -100px;
width: 80px;
height: 100px;
border-radius: 50%;
opacity: 0.8;
z-index: -1;
}
.balloon-1 { background-color: #e74c3c; left: 10%; animation: float-up 15s infinite; }
.balloon-2 { background-color: #3498db; left: 20%; animation: float-up 18s infinite 2s; }
.balloon-3 { background-color: #2ecc71; left: 80%; animation: float-up 20s infinite 1s; }
.balloon-4 { background-color: #f39c12; left: 90%; animation: float-up 17s infinite 3s; }
@keyframes float-up {
0% {
bottom: -100px;
transform: translateX(0) rotate(0deg);
}
50% {
transform: translateX(20px) rotate(10deg);
}
100% {
bottom: 110vh;
transform: translateX(-20px) rotate(-10deg);
}
}
/* 页脚样式 */
footer {
text-align: center;
padding: 20px;
background-color: #333;
color: white;
margin-top: 60px;
}
/* 响应式设计 */
@media (max-width: 768px) {
h1 {
font-size: 2.5rem;
}
.section-title {
font-size: 2rem;
}
.form-section {
padding: 25px;
}
}
</style>
</head>
<body>
<!-- 气球装饰 -->
<div class="balloon balloon-1"></div>
<div class="balloon balloon-2"></div>
<div class="balloon balloon-3"></div>
<div class="balloon balloon-4"></div>
<header>
<div class="container">
<h1>教师节快乐</h1>
<p class="subtitle">桃李不言，下自成蹊，感谢您的辛勤付出！</p>
</div>
</header>
<main class="container">
<!-- 祝福展示区 -->
<section class="wishes-section">
<h2 class="section-title">祝福墙</h2>
<div class="wishes-container" id="wishesContainer">
<!-- 默认祝福卡片 -->
<div class="wish-card">
<div class="wish-author">— 学生小明</div>
<div class="wish-content">老师，您辛苦了！是您的谆谆教诲，照亮了我们前行的路，祝您教师节快乐，永远年轻！</div>
</div>
<div class="wish-card">
<div class="wish-author">— 学生小红</div>
<div class="wish-content">一支粉笔，两袖清风，三尺讲台，四季耕耘，感谢您用知识浇灌我们成长，祝您节日快乐！</div>
</div>
<div class="wish-card">
<div class="wish-author">— 学生小李</div>
<div class="wish-content">师恩如山，因为高山巍巍，使人崇敬，师恩似海，因为大海浩瀚，无法估量，谢谢您，老师！</div>
</div>
</div>
</section>
<!-- 发送祝福表单 -->
<section class="form-section">
<h2 class="section-title">留下您的祝福</h2>
<form id="wishForm">
<div class="form-group">
<label for="authorName">您的名字</label>
<input type="text" id="authorName" name="authorName" placeholder="请输入您的名字" required>
</div>
<div class="form-group">
<label for="wishText">祝福内容</label>
<textarea id="wishText" name="wishText" placeholder="写下您想对老师说的话..." required></textarea>
</div>
<button type="submit" class="submit-btn">发送祝福</button>
</form>
</section>
</main>
<footer>
<p>© 2025 教师节主题网页. 祝所有老师节日快乐！</p>
</footer>
<script>
document.addEventListener('DOMContentLoaded', function () {
const wishForm = document.getElementById('wishForm');
const wishesContainer = document.getElementById('wishesContainer');
wishForm.addEventListener('submit', function (event) {
// 阻止表单默认的提交行为（页面刷新）
event.preventDefault();
// 获取表单中的数据
const authorName = document.getElementById('authorName').value.trim();
const wishText = document.getElementById('wishText').value.trim();
// 检查输入是否为空
if (authorName === '' || wishText === '') {
// 使用更友好的方式提示用户
showNotification('请填写您的名字和祝福内容哦！', 'warning');
return;
}
// 创建新的祝福卡片元素
const newWishCard = document.createElement('div');
newWishCard.className = 'wish-card';
newWishCard.style.opacity = '0'; // 初始透明度为0，用于动画
newWishCard.innerHTML = `
<div class="wish-author">— ${authorName}</div>
<div class="wish-content">${wishText}</div>
`;
// 将新卡片添加到祝福墙容器的开头
wishesContainer.prepend(newWishCard);
// 触发动画，让新卡片淡入并滑入
setTimeout(() => {
newWishCard.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
newWishCard.style.opacity = '1';
newWishCard.style.transform = 'translateY(0)';
}, 10);
// 清空表单
wishForm.reset();
// 显示成功提示
showNotification('祝福发送成功！感谢您的留言！', 'success');
});
// 简单的通知函数
function showNotification(message, type) {
const notification = document.createElement('div');
notification.style.position = 'fixed';
notification.style.top = '20px';
notification.style.left = '50%';
notification.style.transform = 'translateX(-50%)';
notification.style.padding = '15px 25px';
notification.style.borderRadius = '10px';
notification.style.color = 'white';
notification.style.fontWeight = 'bold';
notification.style.zIndex = '1000';
notification.style.boxShadow = '0 4px 12px rgba(0,0,0,0.15)';
if (type === 'success') {
notification.style.backgroundColor = '#2ecc71'; // 绿色
} else if (type === 'warning') {
notification.style.backgroundColor = '#f39c12'; // 橙色
}
notification.textContent = message;
document.body.appendChild(notification);
// 3秒后自动移除通知
setTimeout(() => {
notification.style.opacity = '0';
notification.style.transition = 'opacity 0.5s ease';
setTimeout(() => {
document.body.removeChild(notification);
}, 500);
}, 3000);
}
});
</script>
</body>
</html>
如何使用这份源码？
- 复制代码：将上面所有代码块（从
<!DOCTYPE html>开始，到</html>结束）完整地复制下来。 - 创建文件：
- 在您的电脑上新建一个文本文档。
- 将复制的代码粘贴到这个新文档中。
- 点击“文件” -> “另存为”（或
Ctrl + Shift + S）。 - 在“保存类型”中，选择“所有文件（*.*）”。
- 在“文件名”中输入
teachers_day.html（后缀名必须是.html）。 - 选择一个位置保存文件,然后点击“保存”。
- 打开网页：
- 找到您刚刚保存的
teachers_day.html文件。 - 双击它,它就会在您的默认浏览器中打开。
- 找到您刚刚保存的
您现在就可以看到一个精美的教师节主题网页了！您还可以根据需要修改 CSS 中的颜色、字体等样式，或者修改 HTML 中的文字内容，使其更符合您的需求。
