用 HTML、CSS、JS 等前端技术设计制作一个精美的表白网页

好的，下面是一个简单的示例： HTML代码： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表白网页</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <h1>我对你的心意</h1> <p>亲爱的XXX：</p> <p>我想对你说：</p> <textarea name="content" id="content" cols="30" rows="10" placeholder="请输入你的表白内容"></textarea> <button id="submit">发送</button> </div> <script src="script.js"></script> </body> </html> ``` CSS代码： ```css * { margin: 0; padding: 0; } .container { width: 80%; margin: 50px auto; text-align: center; } h1 { font-size: 40px; margin-bottom: 30px; } p { font-size: 20px; margin-bottom: 10px; } textarea { width: 80%; height: 200px; font-size: 20px; margin: 20px 0; padding: 10px; border: 2px solid #ccc; border-radius: 5px; resize: none; } button { font-size: 20px; padding: 10px 20px; background-color: #ff69b4; color: #fff; border: none; border-radius: 5px; cursor: pointer; } button:hover { background-color: #ff1493; } ``` JS代码： ```javascript const submitBtn = document.getElementById("submit"); const contentTextarea = document.getElementById("content"); submitBtn.addEventListener("click", () => { const content = contentTextarea.value; if (content.trim()) { alert("表白成功！"); } else { alert("请输入表白内容！"); } }); ``` 在浏览器中打开 HTML 文件，就可以看到一个简单的表白网页了。用户可以在文本框中输入表白内容，然后点击发送按钮。如果内容不为空，则会弹出“表白成功”的提示框；否则会弹出“请输入表白内容”的提示框。

CSDN会员

开通CSDN年卡参与万元壕礼抽奖

海量 VIP免费资源千本正版电子书商城会员专享价千门课程&专栏

全年可省5,000元立即开通

用 HTML、CSS、JS 等前端技术设计制作一个精美的表白网页

最新推荐

HTML+CSS+JavaScript网页制作案例教程（第2版）_教学大纲.doc

CSS设计网页边框的几个实例

前端HTML5+CSS+JavaScript学习笔记.docx

纯js+html和纯css+html制作手风琴效果

韩顺平《轻松搞定网页设计HTML+CSS+JAVASCRIPT》之Javascript学习笔记

zigbee-cluster-library-specification

管理建模和仿真的文件

实现实时数据湖架构：Kafka与Hive集成

用 Python 画一个可以动的爱心

JSBSim Reference Manual