前端代码编辑器
实时编辑HTML、CSS、JavaScript代码并查看效果
使用说明：
在左侧的三个编辑框中分别输入HTML、CSS和JavaScript代码
点击"运行代码"按钮查看效果
支持电脑和手机端自适应显示
预览区域会实时显示您编写的前端代码效果
HTML 编辑器
HTML
<!DOCTYPE html> <html> <head> <title>我的页面</title> </head> <body> <h1>欢迎使用在线编辑器</h1> <p>这是一个示例页面</p> <button id="demo-btn">点击我</button> <div id="output"></div> </body> </html>
CSS 编辑器
CSS
body { font-family: Arial, sans-serif; background-color: #f8f9fa; padding: 20px; } h1 { color: #2c3e50; text-align: center; } #demo-btn { background-color: #6c757d; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 16px; } #demo-btn:hover { background-color: #5a6268; } #output { margin-top: 20px; padding: 15px; background-color: #e9ecef; border-radius: 5px; text-align: center; }
JavaScript 编辑器
JS
document.getElementById('demo-btn').addEventListener('click', function() { const output = document.getElementById('output'); output.innerHTML = '<p style="color: #28a745;">按钮被点击了！</p>'; }); // 页面加载完成后的初始化 window.onload = function() { console.log('页面已加载'); };
预览区域
实时预览
▶ 运行代码