HTML LIVE PREVIEW
实时同步
运行 (Ctrl+Enter)
Editor
<div class="card"> <h1>Hello ProLink!</h1> <p>这是一个左右分栏的专业预览器。</p> <button>点击交互</button> </div> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background: #6366f1; font-family: sans-serif; } .card { background: white; padding: 2rem; border-radius: 1rem; box-shadow: 0 10px 25px rgba(0,0,0,0.2); text-align: center; } button { background: #6366f1; color: white; border: none; padding: 0.5rem 1.5rem; border-radius: 0.5rem; cursor: pointer; } </style> <script> document.querySelector('button').onclick = () => alert('运行成功！'); </script>
Preview