响应式个人主页HTML模板 - 含联系表单与社交链接 - AI问答

我来为您生成一个精美的HTML程序 - 一个响应式个人主页模板。 ```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: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 20px; } .card { background: rgba(255, 255, 255, 0.95); border-radius: 20px; padding: 40px; max-width: 800px; width: 100%; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); text-align: center; } .avatar { width: 120px; height: 120px; background: linear-gradient(135deg, #667eea, #764ba2); border-radius: 50%; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; font-size: 48px; color: white; font-weight: bold; box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4); } h1 { color: #333; font-size: 32px; margin-bottom: 5px; } .title { color: #764ba2; font-size: 18px; margin-bottom: 25px; letter-spacing: 2px; } .bio { color: #666; line-height: 1.8; margin-bottom: 30px; font-size: 15px; } .skills { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 30px; } .skill-tag { background: linear-gradient(135deg, #667eea, #764ba2); color: white; padding: 8px 20px; border-radius: 50px; font-size: 14px; transition: transform 0.3s ease; cursor: default; } .skill-tag:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3); } .social-links { display: flex; justify-content: center; gap: 15px; margin-bottom: 30px; } .social-btn { width: 50px; height: 50px; border-radius: 50%; background: #f0f0f0; display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: 22px; color: #666; transition: all 0.3s ease; } .social-btn:hover { background: linear-gradient(135deg, #667eea, #764ba2); color: white; transform: translateY(-5px); box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3); } .contact-form { text-align: left; margin-top: 20px; } .form-group { margin-bottom: 20px; } .form-group label { display: block; color: #555; font-size: 14px; margin-bottom: 8px; font-weight: 500; } .form-group input, .form-group textarea { width: 100%; padding: 12px 15px; border: 2px solid #e0e0e0; border-radius: 10px; font-size: 14px; transition: border-color 0.3s ease; font-family: inherit; background: #f8f8f8; } .form-group input:focus, .form-group textarea:focus { outline: none; border-color: #764ba2; background: white; } .form-group textarea { height: 100px; resize: vertical; } .submit-btn { width: 100%; padding: 14px; background: linear-gradient(135deg, #667eea, #764ba2); color: white; border: none; border-radius: 10px; font-size: 16px; font-weight: 600; cursor: pointer; transition: transform 0.3s ease; letter-spacing: 1px; } .submit-btn:hover { transform: scale(1.02); box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4); } .submit-btn:active { transform: scale(0.98); } .footer { margin-top: 30px; color: #999; font-size: 13px; border-top: 1px solid #eee; padding-top: 20px; } @media (max-width: 600px) { .card { padding: 25px; } h1 { font-size: 26px; } .avatar { width: 100px; height: 100px; font-size: 38px; } } </style> </head> <body> <div class="card"> <div class="avatar">👨‍💻</div> <h1>李明</h1> <div class="title">全栈开发工程师</div> <div class="bio"> 热爱技术与创新，专注于构建高质量的Web应用。拥有5年开发经验，擅长前端与后端技术，热衷于探索新技术并应用到实际项目中。在业余时间喜欢开源贡献和技术写作。 </div> <div class="skills"> <span class="skill-tag">HTML/CSS</span> <span class="skill-tag">JavaScript</span> <span class="skill-tag">React</span> <span class="skill-tag">Node.js</span> <span class="skill-tag">Python</span> <span class="skill-tag">Docker</span> <span class="skill-tag">Git</span> <span class="skill-tag">SQL</span> </div> <div class="social-links"> <a href="#" class="social-btn" title="GitHub">🐙</a> <a href="#" class="social-btn" title="LinkedIn">🔗</a> <a href="#" class="social-btn" title="Twitter">🐦</a> <a href="#" class="social-btn" title="Email">📧</a> <a href="#" class="social-btn" title="博客">📝</a> </div> <form class="contact-form"> <div class="form-group"> <label for="name">姓名</label> <input type="text" id="name" placeholder="请输入您的姓名" required> </div> <div class="form-group"> <label for="email">邮箱</label> <input type="email" id="email" placeholder="请输入您的邮箱" required> </div> <div class="form-group"> <label for="message">留言</label> <textarea id="message" placeholder="请输入您想说的话..." required></textarea> </div> <button type="submit" class="submit-btn">发送消息 ✉️</button> </form> <div class="footer"> © 2024 李明 | 用心创造 · 用代码改变世界 </div> </div> </body> </html> ``` 这个程序是一个完整、美观的响应式个人主页，包含以下特点： 📱 **响应式设计** - 自动适配手机、平板和电脑屏幕 🎨 **渐变主题** - 紫色渐变，现代感十足 👤 **个人信息展示** - 头像、姓名、职位和简介 🏷️ **技能标签** - 展示技术栈，带悬停动画效果 🔗 **社交链接** - 5个社交按钮，带有交互反馈 📝 **联系表单** - 包含姓名、邮箱和留言字段 ✨ **交互效果** - 悬停、点击、聚焦都有流畅动画可以直接运行这个HTML文件，或者根据需要修改头像、姓名、技能标签和社交链接等内容。 ######[AI问答 | 2051点数解答 | 2026-05-29 19:24:40]

服务商

更多选项

快捷项

自定义

响应式个人主页HTML模板 - 含联系表单与社交链接