在线代码预览器

代码编辑器HTML
CSS
JavaScript

                    <!DOCTYPE html>
<html>
<head>
    <title>测试页面</title>
</head>
<body>
    <div class="container">
        <h1>Hello World!</h1>
        <p>这是一个测试页面，展示了基本的HTML结构和CSS样式。</p>
        <button onclick="alert('Hello!')">点击我</button>
        <button onclick="changeColor()">改变颜色</button>
    </div>
</body>
</html>
                    body { 
    font-family: Arial, sans-serif; 
    padding: 20px; 
    background: #f5f5f5;
}

h1 { 
    color: #333; 
    text-align: center;
}

.container {
    max-width: 600px;
    margin: 0 auto;
    background: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

button { 
    background: #007acc; 
    color: white; 
    border: none; 
    padding: 12px 24px; 
    border-radius: 4px; 
    cursor: pointer;
    font-size: 16px;
    margin: 10px 5px;
}

button:hover {
    background: #005a9e;
}
                    function changeColor() {
    const colors = ['#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#feca57'];
    const randomColor = colors[Math.floor(Math.random() * colors.length)];
    document.querySelector('h1').style.color = randomColor;
}
                

🚀 在线代码预览器

代码编辑器

预览

问题反馈

🚀 在线代码预览器

代码编辑器

预览

问题反馈

一键分享到这些平台