<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用Matcha.css美化的页面</title>
<!-- 1. 引入Matcha.css库 -->
<link rel="stylesheet" href="https://matcha.mizu.sh/matcha.css">
<!-- 你也可以在这里添加自己的额外CSS -->
<style>
body { max-width: 800px; margin: 2rem auto; padding: 0 1rem; }
h2 { border-bottom: 2px solid #eee; padding-bottom: 0.5rem; }
</style>
</head>
<body>
<h1>欢迎来到美化后的页面</h1>
<p>这只是一个简单的段落。引入上面的CSS库后，所有的原生标签（如按钮、输入框）都会自动变得更好看。</p>
<h2>📝 表单元素示例</h2>
<form>
<label for="name">姓名</label>
<input type="text" id="name" placeholder="请输入你的姓名">
<label for="email">邮箱</label>
<input type="email" id="email" placeholder="example@mail.com">
<label for="message">留言</label>
<textarea id="message" rows="4" placeholder="请留下你的想法..."></textarea>
<label>
<input type="checkbox"> 我同意相关条款
</label>
<button type="submit">提交表单</button>
<button type="button" class="secondary">次要按钮</button>
</form>
<h2>📋 其他常见元素</h2>
<p>这是一个包含 <a href="#">超链接</a> 的段落。</p>
<ul>
<li>无序列表项一</li>
<li>无序列表项二</li>
</ul>
<blockquote>
这是一个引用块。这些样式都是自动应用的。
</blockquote>
<h3>按钮组</h3>
<div>
<button>主要按钮</button>
<button class="secondary">次要按钮</button>
<button class="outline">线框按钮</button>
</div>
</body>
</html>
Matcha.css库
一次购买，永久免费
去创作
评论
{{item.path.join('.')}}
{{item.item.name}}