Metro 风格核心特点
在开始编码前，我们先明确一下 Metro/Fluent Design 的视觉元素：
（图片来源网络，侵删）
- 网格系统: 内容被整齐地排列在网格中,通常是等宽的方块或矩形。
- 大胆的色彩: 使用鲜艳、饱和的颜色作为背景，白色文字,形成强烈对比。
- 无衬线字体: 通常使用如 "Segoe UI" (Windows 默认字体) 或其他现代无衬线字体，如 Helvetica, Arial。
- 大量留白: 元素之间有充足的间距，界面显得干净、不拥挤。
- 内容优先: 设计服务于内容，没有多余的边框、阴影或纹理。
- 动态效果: 简单、流畅的悬停和点击效果,如轻微的缩放或颜色变化。
完整的 HTML5 Metro 模板代码
您可以直接将以下代码复制到一个 .html 文件中,然后在浏览器中打开即可看到效果。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">HTML5 Metro 风格模板</title>
<!-- 引入 Metro 风格的 CSS -->
<style>
/* --- 全局样式和变量 --- */
:root {
--primary-color: #0078D7; /* Windows 蓝 */
--secondary-color: #00BCF2; /* 浅蓝 */
--accent-color-1: #FF6B35; /* 橙色 */
--accent-color-2: #107C10; /* 绿色 */
--accent-color-3: #FFD700; /* 黄色 */
--text-color: #FFFFFF; /* 白色文字 */
--background-color: #F3F2F1; /* 浅灰背景 */
--font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; /* Metro 风格字体 */
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: var(--font-family);
background-color: var(--background-color);
color: #333; /* 深灰色用于正文 */
line-height: 1.6;
}
/* --- 布局容器 --- */
.container {
max-width: 1200px;
margin: 20px auto;
padding: 0 15px;
}
/* --- 顶部导航栏 --- */
.metro-header {
background-color: var(--primary-color);
color: var(--text-color);
padding: 15px 0;
text-align: center;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.metro-header h1 {
font-weight: 300;
font-size: 2.5em;
letter-spacing: 1px;
}
/* --- 网格系统 --- */
.metro-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 响应式网格 */
gap: 20px; /* 网格间距 */
margin-top: 30px;
}
/* --- Metro 磁贴/方块 --- */
.metro-tile {
background-color: var(--secondary-color);
color: var(--text-color);
padding: 30px;
text-align: center;
border-radius: 8px; /* 轻微圆角，更现代 */
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* 平滑过渡效果 */
cursor: pointer;
text-decoration: none; /* 如果是链接，去掉下划线 */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 200px; /* 统一高度 */
}
/* 为不同磁贴设置不同颜色 */
.metro-tile.tile-1 { background-color: var(--accent-color-1); }
.metro-tile.tile-2 { background-color: var(--accent-color-2); }
.metro-tile.tile-3 { background-color: var(--accent-color-3); }
.metro-tile.tile-4 { background-color: #9C27B0; /* 紫色 */ }
.metro-tile.tile-5 { background-color: #607D8B; /* 蓝灰色 */ }
.metro-tile.tile-6 { background-color: #E91E63; /* 粉色 */ }
/* --- 悬停效果 --- */
.metro-tile:hover {
transform: translateY(-5px) scale(1.02); /* 轻微上移和放大 */
box-shadow: 0 10px 20px rgba(0,0,0,0.2); /* 增加阴影 */
}
/* --- 磁贴内容样式 --- */
.metro-tile h2 {
font-size: 1.8em;
font-weight: 400;
margin-bottom: 10px;
}
.metro-tile p {
font-size: 1em;
opacity: 0.9;
}
.metro-tile .icon {
font-size: 3em;
margin-bottom: 15px;
}
/* --- 页脚 --- */
.metro-footer {
text-align: center;
margin-top: 50px;
padding: 20px;
color: #777;
font-size: 0.9em;
}
/* --- 响应式设计 --- */
@media (max-width: 768px) {
.metro-grid {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
}
.metro-header h1 {
font-size: 2em;
}
}
@media (max-width: 480px) {
.metro-grid {
grid-template-columns: 1fr; /* 在小屏幕上单列显示 */
}
}
</style>
</head>
<body>
<!-- 顶部导航栏 -->
<header class="metro-header">
<div class="container">
<h1>Metro 风格界面</h1>
</div>
</header>
<!-- 主要内容区 -->
<main class="container">
<div class="metro-grid">
<!-- 磁贴 1 -->
<a href="#" class="metro-tile tile-1">
<div class="icon">📊</div>
<h2>数据分析</h2>
<p>查看详细的业务报告和数据洞察</p>
</a>
<!-- 磁贴 2 -->
<a href="#" class="metro-tile tile-2">
<div class="icon">👥</div>
<h2>用户管理</h2>
<p>管理所有账户和权限设置</p>
</a>
<!-- 磁贴 3 -->
<a href="#" class="metro-tile tile-3">
<div class="icon">📅</div>
<h2>日历安排</h2>
<p>查看和安排即将到来的事件</p>
</a>
<!-- 磁贴 4 -->
<a href="#" class="metro-tile tile-4">
<div class="icon">💬</div>
<h2>消息中心</h2>
<p>查看所有通知和系统消息</p>
</a>
<!-- 磁贴 5 -->
<a href="#" class="metro-tile tile-5">
<div class="icon">⚙️</div>
<h2>系统设置</h2>
<p>自定义您的应用程序偏好</p>
</a>
<!-- 磁贴 6 -->
<a href="#" class="metro-tile tile-6">
<div class="icon">📈</div>
<h2>项目进度</h2>
<p>跟踪所有项目的最新状态</p>
</a>
</div>
</main>
<!-- 页脚 -->
<footer class="metro-footer">
<p>© 2025 HTML5 Metro 模板. 保留所有权利.</p>
</footer>
</body>
</html>
代码结构解析
HTML 结构
<!DOCTYPE html>: 标准的 HTML5 文档声明。<head>: 包含元数据、字符集、视口设置和最重要的 CSS 样式。<meta name="viewport"...>: 确保在移动设备上正确缩放。<style>: 我们将所有 CSS 代码直接写在这里，便于管理和理解，在实际项目中，你可能会将其拆分为一个.css文件。
<body>: 页面的可见内容。<header class="metro-header">: 顶部的蓝色标题栏。<main class="container">: 主要内容区的包裹容器,用于居中和限制最大宽度。<div class="metro-grid">: 这是实现网格布局的核心,它将所有磁贴整齐地排列起来。<a class="metro-tile">: 每个可点击的方块都是一个<a>标签（链接），并应用了.metro-tile样式，我使用了不同的tile-X类来为每个磁贴设置独特的背景色。<footer>: 页脚,通常放置版权信息。
CSS 样式
root和 CSS 变量: 我在root选择器中定义了 CSS 变量，这样做的好处是，如果你想改变整个主题的颜色（比如从蓝色换成绿色），你只需要修改root中的变量值,而无需在代码中寻找并替换每一个颜色代码。.container: 一个常用的类，用于将内容居中并设置最大宽度,避免在大屏幕上内容过宽。.metro-grid:display: grid;: 启用 Grid 布局。grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));: 这是响应式网格的关键。repeat(): 重复创建列。auto-fit: 自动填充可用空间。minmax(250px, 1fr): 每列的最小宽度为 250px，如果空间足够，则所有列平均分配剩余空间 (1fr代表一个分数单位)。
gap: 20px;: 设置网格项之间的间距。
.metro-tile:background-color,color: 定义背景和文字颜色。padding,text-align,border-radius: 设置基本外观和布局。transition: 定义了transform和box-shadow属性的变化效果，并设置了过渡时间,这样悬停效果才会平滑。cursor: pointer: 鼠标悬停时显示手型光标,提示用户可点击。
.metro-tile:hover: 当鼠标悬停在磁贴上时应用的样式。transform: translateY(-5px) scale(1.02);: 将磁贴向上移动 5px 并轻微放大 1.02 倍，产生“浮起”的立体感。box-shadow: ...: 增加一个阴影,进一步增强立体感。
@media查询: 这部分是响应式设计的核心。- 当屏幕宽度小于 768px (如平板) 时,减小网格间距和字体大小。
- 当屏幕宽度小于 480px (如手机) 时，将网格布局改为单列 (
grid-template-columns: 1fr;),确保在小屏幕上内容依然可读且易于点击。
如何使用和扩展这个模板
- 修改颜色: 只需修改
root中的--primary-color,--accent-color-x等变量。 - 添加/删除磁贴: 在
.metro-grid<div>内部或外部添加或移除<a class="metro-tile">元素，Grid 布局会自动处理排列。 - 添加图标: 我使用了 Emoji 作为图标，因为它简单且无需额外依赖，你也可以使用 Font Awesome、Ionicons 或其他图标库，只需将
<div class="icon">📊</div>替换成<i class="fas fa-chart-bar"></i>并引入相应的库即可。 - 改变布局: 你可以通过修改
.metro-grid的grid-template-columns来改变列数。grid-template-columns: repeat(4, 1fr);会强制创建 4 等分的列。 - : 在每个
.metro-tile的<h2>和<p>标签中填入你自己的标题和描述文字。
这个模板为你提供了一个坚实的基础,你可以根据项目的具体需求进行快速定制和扩展。
（图片来源网络，侵删）
