WebCraft - 在线HTML编辑器
WebCraft HTML编辑器
运行代码
保存文件
新建文件
清空
HTML
<!DOCTYPE html> <html> <head> <title>我的网页</title> <style> body { font-family: Arial, sans-serif; margin: 40px; background-color: #f0f8ff; } .container { max-width: 800px; margin: 0 auto; text-align: center; } h1 { color: #4361ee; } .card { background: white; padding: 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); margin: 20px 0; } .btn { background: #4361ee; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; } </style> </head> <body> <div class="container"> <h1>欢迎使用WebCraft编辑器</h1> <div class="card"> <p>这是一个使用在线HTML编辑器创建的示例页面</p> <button class="btn">点击我</button> </div> <div class="card"> <h3>功能特性</h3> <ul style="text-align: left;"> <li>实时预览HTML/CSS/JS效果</li> <li>响应式设计,适配所有设备</li> <li>本地文件存储管理</li> <li>简洁易用的界面</li> </ul> </div> </div> </body> </html>
CSS
/* 添加自定义CSS样式 */ .container { animation: fadeIn 1s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .btn { transition: all 0.3s ease; } .btn:hover { background: #3a0ca3; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.2); }
JavaScript
// 添加交互功能 document.addEventListener('DOMContentLoaded', function() { const buttons = document.querySelectorAll('.btn'); buttons.forEach(button => { button.addEventListener('click', function() { alert('按钮被点击了!'); this.textContent = '已点击'; this.style.background = '#f72585'; }); }); // 控制台输出 console.log('页面已加载完成!'); });
实时预览
刷新
文件管理器
示例文件.html
文件已成功保存!
问题反馈
反馈来源:
HTML在线编辑器
工具链接:http://dkfile.com/gpt/HTMLzaixianbianji.html
反馈类型
问题反馈
功能建议/需求
技术支持
商务合作
其他
反馈内容
0/1000
请尽可能详细地描述,这有助于我们更好地理解和解决问题
问题解决后,会通过你的帐号邮箱给你回复,也能在
我的反馈
查看问题处理进度。
分享内容
HTML在线编辑器
来自 DKFile 免费HTML网页托管平台
生成二维码中...
下载二维码
复制链接
一键分享到这些平台
X (Twitter)
微博
GitHub
Reddit
LinkedIn
WhatsApp
Telegram
微信
QQ
关闭