HTML+CSS+JS 520告白表白
时间: 2024-09-08 09:04:23 浏览: 211
HTML+CSS+JS 520表白代码
HTML、CSS和JavaScript常常结合在一起用于网页开发,特别是构建动态和交互式的用户体验。如果你想利用这三种技术创作一个520告白表白页面,你可以这样做:
1. **HTML (结构)**: 使用HTML来创建页面的基本框架,包括标题、段落、输入框等元素。例如,你可以创建一个包含文本区域让用户输入告白信息的"我爱你"标签。
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>520表白</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 id="greeting">520表白页面</h1>
<form>
<label for="message">写下你的告白:</label><br>
<textarea id="messageInput" rows="4" cols="50"></textarea><br>
<button type="button" onclick="sendLove()">发送</button>
</form>
<div id="displayMessage"></div>
<script src="script.js"></script>
</body>
</html>
```
2. **CSS (样式)**: 使用CSS来美化页面布局,设置字体颜色、背景、按钮样式等,让表白页看起来更浪漫。
```css
body {
font-family: '宋体', sans-serif;
}
#displayMessage {
color: red;
margin-top: 20px;
}
```
3. **JavaScript (交互)**: JavaScript负责处理用户的输入并显示结果。当用户点击“发送”按钮,可以在`sendLove()`函数里获取文本输入,然后将其显示在页面上。
```javascript
function sendLove() {
const message = document.getElementById('messageInput').value;
document.getElementById('displayMessage').innerText = "亲爱的,我想对你说: " + message;
}
```
阅读全文