代码预览 | MingDynasty

代码编辑器

<!DOCTYPE html>
<html>
<head>
    <title>示例页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 40px;
            background-color: #f0f0f0;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #b32424;
            text-align: center;
        }
        p {
            line-height: 1.6;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>欢迎使用代码预览器</h1>
        <p>这是一个示例HTML页面，您可以在左侧编辑器中修改代码，右侧将实时显示结果。</p>
        <p>明朝风格设计融合了传统中国美学与现代功能，创造独特的用户体验。</p>
        <div style="text-align: center; margin-top: 20px;">
            <button style="background-color: #b32424; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer;">
                示例按钮
            </button>
        </div>
    </div>
</body>
</html>
明朝风格代码预览器

代码编辑器

实时预览
