明朝风格代码预览器
切换主题
代码编辑器
<!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>
实时预览