当前位置：首页 > news >正文

表白网页制作免费网站制作表白网站建设教程

news 2025/9/19 7:58:43

表白网页制作免费网站制作

表白网站建设与在线生成教程

我将为您创建一个简单而优雅的表白网页模板，并解释如何在线生成和自定义这样的页面。

实现代码

下面是完整的HTML代码，包含了CSS和JavaScript：

html

<!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>* {margin: 0;padding: 0;box-sizing: border-box;}body {font-family: 'Microsoft YaHei', sans-serif;background: linear-gradient(135deg, #ffe8e8 0%, #ffd6d6 100%);color: #333;min-height: 100vh;overflow-x: hidden;display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 20px;}.container {max-width: 800px;width: 100%;background: rgba(255, 255, 255, 0.9);border-radius: 15px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);padding: 30px;text-align: center;position: relative;z-index: 1;}h1 {color: #ff6b6b;margin-bottom: 20px;font-size: 2.5rem;}.heart-icon {color: #ff6b6b;font-size: 2rem;margin: 15px 0;display: block;}.message {font-size: 1.2rem;line-height: 1.6;margin: 20px 0;padding: 20px;background: rgba(255, 107, 107, 0.1);border-radius: 10px;text-align: left;}.signature {text-align: right;font-style: italic;margin-top: 20px;color: #ff6b6b;font-weight: bold;}.hearts {position: fixed;top: 0;left: 0;width: 100%;height: 100%;pointer-events: none;z-index: 0;}.heart {position: absolute;color: rgba(255, 107, 107, 0.7);font-size: 20px;animation: fall 10s linear infinite;}@keyframes fall {0% {transform: translateY(-10%) rotate(0deg);opacity: 1;}100% {transform: translateY(100vh) rotate(360deg);opacity: 0;}}.customize-btn {background: #ff6b6b;color: white;border: none;padding: 12px 25px;border-radius: 50px;font-size: 1rem;cursor: pointer;margin-top: 20px;transition: all 0.3s ease;}.customize-btn:hover {background: #ff5252;transform: translateY(-3px);box-shadow: 0 5px 15px rgba(255, 82, 82, 0.4);}.customize-panel {display: none;margin-top: 30px;padding: 20px;background: #f9f9f9;border-radius: 10px;text-align: left;}.form-group {margin-bottom: 15px;}label {display: block;margin-bottom: 5px;font-weight: bold;color: #ff6b6b;}input, textarea {width: 100%;padding: 10px;border: 1px solid #ddd;border-radius: 5px;font-family: inherit;}textarea {min-height: 100px;resize: vertical;}@media (max-width: 768px) {.container {padding: 20px;}h1 {font-size: 2rem;}.message {font-size: 1rem;}}</style>
</head>
<body><div class="container"><h1>致我心中的唯一</h1><span class="heart-icon">❤</span><div class="message"><p>亲爱的，</p><p>从遇见你的那一刻起，我的世界便充满了色彩。你的笑容如阳光般温暖，你的声音如音乐般动听。</p><p>每一天，我都想告诉你：我真的很喜欢你！喜欢你的一切，喜欢你的笑容，喜欢你的温柔，喜欢你偶尔的小脾气。</p><p>希望未来的日子里，我能一直陪伴在你身边，为你遮风挡雨，与你分享生活的点点滴滴。</p><p>你愿意给我这个机会吗？</p></div><div class="signature"><p>永远爱你的，</p><p>某某某</p></div><button class="customize-btn" id="customizeBtn">自定义这份表白</button><div class="customize-panel" id="customizePanel"><div class="form-group"><label for="recipient">收件人姓名：</label><input type="text" id="recipient" placeholder="输入TA的名字"></div><div class="form-group"><label for="message">表白内容：</label><textarea id="message" placeholder="写下你想对TA说的话..."></textarea></div><div class="form-group"><label for="sender">你的名字：</label><input type="text" id="sender" placeholder="输入你的名字"></div><button class="customize-btn" id="saveBtn">保存更改</button></div></div><div class="hearts" id="hearts"></div><script>// 创建飘落的心形function createHearts() {const heartsContainer = document.getElementById('hearts');const heartCount = 30;for (let i = 0; i < heartCount; i++) {const heart = document.createElement('div');heart.classList.add('heart');heart.innerHTML = '❤';heart.style.left = Math.random() * 100 + 'vw';heart.style.animationDuration = (Math.random() * 10 + 5) + 's';heart.style.fontSize = (Math.random() * 15 + 10) + 'px';heart.style.opacity = Math.random() * 0.5 + 0.3;heartsContainer.appendChild(heart);}}// 抖音微信表白https://www.hybiaobai.cn/biaobai_douyin/// 显示/隐藏自定义面板document.getElementById('customizeBtn').addEventListener('click', function() {const panel = document.getElementById('customizePanel');if (panel.style.display === 'block') {panel.style.display = 'none';this.textContent = '自定义这份表白';} else {panel.style.display = 'block';this.textContent = '收起编辑面板';// 填充当前内容document.getElementById('recipient').value = document.querySelector('h1').textContent.replace('致', '').trim();document.getElementById('message').value = document.querySelector('.message').textContent.trim();document.getElementById('sender').value = document.querySelector('.signature p:last-child').textContent.trim();}});// 保存自定义内容document.getElementById('saveBtn').addEventListener('click', function() {const recipient = document.getElementById('recipient').value || '我心中的唯一';const message = document.getElementById('message').value || '写下你想对TA说的话...';const sender = document.getElementById('sender').value || '某某某';// 更新页面内容document.querySelector('h1').textContent = '致' + recipient;document.querySelector('.message').innerHTML = `<p>${message.replace(/\n/g, '</p><p>')}</p>`;document.querySelector('.signature').innerHTML = `<p>永远爱你的，</p><p>${sender}</p>`;// 隐藏面板document.getElementById('customizePanel').style.display = 'none';document.getElementById('customizeBtn').textContent = '自定义这份表白';alert('表白内容已更新！');});// 爱心树https://www.hybiaobai.cn/biaobai_aixinshu/// 初始化window.addEventListener('load', function() {createHearts();});</script>
</body>
</html>

在线生成教程

要在线生成和自定义这个表白网页，您可以按照以下步骤操作：

复制代码：将上面的完整代码复制到剪贴板
创建新文件：
- 打开任何文本编辑器（如记事本、VS Code等）
- 创建一个新文件，将代码粘贴进去
- 将文件保存为 love.html
自定义内容：
- 用浏览器打开这个HTML文件
- 点击"自定义这份表白"按钮
- 填写收件人姓名、表白内容和你的名字
- 点击"保存更改"按钮
分享你的表白：
- 将这个HTML文件发送给你想表白的人
- 或者将其上传到免费网页托管服务（如GitHub Pages、Netlify等）
- 发送链接给对方