<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>电脑启动热键指南</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
}
:root {
--primary-color: #4a6ee0;
--primary-dark: #3a5bc7;
--text-color: #333;
--text-light: #666;
--bg-color: #f8f9fa;
--card-color: #ffffff;
--border-color: #eaeaea;
--shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
--transition: all 0.3s ease;
}
.dark-theme {
--primary-color: #5d7de8;
--primary-dark: #4a6ee0;
--text-color: #f0f0f0;
--text-light: #b0b0b0;
--bg-color: #121826;
--card-color: #1e2538;
--border-color: #2a3248;
--shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
body {
background-color: var(--bg-color);
color: var(--text-color);
line-height: 1.6;
transition: var(--transition);
padding-bottom: 40px;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* 头部样式 */
header {
background-color: var(--card-color);
box-shadow: var(--shadow);
position: sticky;
top: 0;
z-index: 100;
transition: var(--transition);
}
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0;
}
.logo {
display: flex;
align-items: center;
gap: 12px;
}
.logo i {
font-size: 28px;
color: var(--primary-color);
}
.logo h1 {
font-size: 24px;
font-weight: 700;
}
.theme-toggle {
background-color: var(--primary-color);
color: white;
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
transition: var(--transition);
}
.theme-toggle:hover {
background-color: var(--primary-dark);
}
/* 搜索区域 */
.search-section {
margin: 30px 0;
text-align: center;
}
.search-box {
max-width: 600px;
margin: 0 auto;
position: relative;
}
.search-box input {
width: 100%;
padding: 16px 20px 16px 50px;
border-radius: 50px;
border: 2px solid var(--border-color);
background-color: var(--card-color);
color: var(--text-color);
font-size: 16px;
transition: var(--transition);
}
.search-box input:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(74, 110, 224, 0.1);
}
.search-box i {
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
color: var(--text-light);
font-size: 18px;
}
.search-hint {
margin-top: 10px;
color: var(--text-light);
font-size: 14px;
}
/* 品牌导航 */
.brand-nav {
margin-bottom: 30px;
}
.brand-nav h2 {
font-size: 20px;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 10px;
}
.brand-nav h2 i {
color: var(--primary-color);
}
.brand-list {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.brand-btn {
padding: 12px 24px;
background-color: var(--card-color);
border: 1px solid var(--border-color);
border-radius: 8px;
color: var(--text-color);
cursor: pointer;
font-weight: 500;
transition: var(--transition);
display: flex;
align-items: center;
gap: 8px;
}
.brand-btn:hover {
background-color: var(--primary-color);
color: white;
border-color: var(--primary-color);
}
.brand-btn.active {
background-color: var(--primary-color);
color: white;
border-color: var(--primary-color);
}
/* 热键表格 */
.hotkeys-section {
margin-top: 30px;
}
.section-title {
font-size: 22px;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 2px solid var(--primary-color);
display: flex;
align-items: center;
gap: 10px;
}
.section-title i {
color: var(--primary-color);
}
.hotkey-table {
width: 100%;
background-color: var(--card-color);
border-radius: 10px;
overflow: hidden;
box-shadow: var(--shadow);
margin-bottom: 30px;
transition: var(--transition);
}
.hotkey-table table {
width: 100%;
border-collapse: collapse;
}
.hotkey-table th {
background-color: var(--primary-color);
color: white;
padding: 18px 15px;
text-align: left;
font-weight: 600;
}
.hotkey-table td {
padding: 16px 15px;
border-bottom: 1px solid var(--border-color);
}
.hotkey-table tr:last-child td {
border-bottom: none;
}
.hotkey-table tr:hover {
background-color: rgba(74, 110, 224, 0.05);
}
.key {
display: inline-block;
background-color: var(--bg-color);
color: var(--text-color);
padding: 4px 10px;
border-radius: 5px;
font-family: 'Courier New', monospace;
font-weight: bold;
margin: 2px;
border: 1px solid var(--border-color);
}
.brand-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
margin-right: 8px;
background-color: var(--bg-color);
border-radius: 5px;
color: var(--text-color);
}
.no-results {
text-align: center;
padding: 40px;
color: var(--text-light);
display: none;
}
.no-results i {
font-size: 48px;
margin-bottom: 15px;
color: var(--text-light);
}
/* 页脚 */
footer {
text-align: center;
margin-top: 50px;
padding-top: 20px;
border-top: 1px solid var(--border-color);
color: var(--text-light);
font-size: 14px;
}
.footer-links {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 10px;
}
.footer-links a {
color: var(--primary-color);
text-decoration: none;
}
/* 响应式设计 */
@media (max-width: 768px) {
.header-content {
flex-direction: column;
gap: 15px;
}
.brand-list {
justify-content: center;
}
.hotkey-table {
overflow-x: auto;
}
.hotkey-table table {
min-width: 700px;
}
.search-box {
width: 100%;
}
}
@media (max-width: 480px) {
.brand-btn {
padding: 10px 15px;
font-size: 14px;
}
.logo h1 {
font-size: 20px;
}
}
</style>
</head>
<body>
<header>
<div class="container">
<div class="header-content">
<div class="logo">
<i class="fas fa-laptop-code"></i>
<h1>电脑启动热键指南</h1>
</div>
<button class="theme-toggle" id="themeToggle">
<i class="fas fa-moon"></i>
</button>
</div>
</div>
</header>
<main class="container">
<section class="search-section">
<div class="search-box">
<i class="fas fa-search"></i>
<input type="text" id="searchInput" placeholder="搜索品牌或热键（如：联想、F12、BIOS）...">
</div>
<p class="search-hint">支持按品牌名称、热键或功能进行搜索</p>
</section>
<section class="brand-nav">
<h2><i class="fas fa-desktop"></i> 选择电脑品牌</h2>
<div class="brand-list" id="brandList">
<!-- 品牌按钮将通过JS动态生成 -->
</div>
</section>
<section class="hotkeys-section">
<h2 class="section-title"><i class="fas fa-keyboard"></i> 启动热键指南</h2>
<div id="hotkeysContainer">
<!-- 热键表格将通过JS动态生成 -->
</div>
<div class="no-results" id="noResults">
<i class="fas fa-search"></i>
<h3>未找到匹配的热键</h3>
<p>请尝试其他关键词或选择其他品牌</p>
</div>
</section>
</main>
<footer class="container">
<p>© 2023 电脑启动热键指南 | 本指南收集了常见电脑品牌的启动热键信息</p>
<div class="footer-links">
<a href="#"><i class="fas fa-question-circle"></i> 使用帮助</a>
<a href="#"><i class="fas fa-sync-alt"></i> 更新日志</a>
<a href="#"><i class="fas fa-envelope"></i> 反馈建议</a>
</div>
</footer>
<script>
// 热键数据
const hotkeysData = [
{
brand: "联想 (Lenovo)",
icon: "fas fa-laptop",
keys: [
{ hotkey: "F12", function: "启动菜单 (最常见)", notes: "部分型号使用 Fn+F12" },
{ hotkey: "F2", function: "BIOS设置", notes: "部分旧型号" },
{ hotkey: "F1", function: "BIOS设置", notes: "部分台式机" },
{ hotkey: "Enter", function: "启动中断", notes: "部分型号" },
{ hotkey: "F8", function: "高级启动选项", notes: "Windows启动选项" }
]
},
{
brand: "戴尔 (Dell)",
icon: "fas fa-desktop",
keys: [
{ hotkey: "F12", function: "启动菜单", notes: "最常见" },
{ hotkey: "F2", function: "BIOS设置", notes: "开机时反复按" },
{ hotkey: "F10", function: "BIOS设置", notes: "部分型号" },
{ hotkey: "ESC", function: "启动菜单", notes: "部分旧型号" }
]
},
{
brand: "惠普 (HP)",
icon: "fas fa-laptop",
keys: [
{ hotkey: "F9", function: "启动菜单", notes: "最常见" },
{ hotkey: "ESC", function: "启动菜单", notes: "部分型号" },
{ hotkey: "F10", function: "BIOS设置", notes: "开机时反复按" },
{ hotkey: "F2", function: "系统诊断", notes: "部分型号" }
]
},
{
brand: "华硕 (ASUS)",
icon: "fas fa-laptop",
keys: [
{ hotkey: "ESC", function: "启动菜单", notes: "最常见" },
{ hotkey: "F2", function: "BIOS设置", notes: "开机时反复按" },
{ hotkey: "F8", function: "启动菜单", notes: "部分台式机" },
{ hotkey: "Del", function: "BIOS设置", notes: "部分主板" }
]
},
{
brand: "宏碁 (Acer)",
icon: "fas fa-laptop",
keys: [
{ hotkey: "F12", function: "启动菜单", notes: "最常见" },
{ hotkey: "F2", function: "BIOS设置", notes: "开机时反复按" },
{ hotkey: "Del", function: "BIOS设置", notes: "部分台式机" },
{ hotkey: "F10", function: "启动菜单", notes: "部分型号" }
]
},
{
brand: "苹果 (Apple)",
icon: "fab fa-apple",
keys: [
{ hotkey: "Option (⌥)", function: "启动管理器", notes: "开机时按住" },
{ hotkey: "Cmd + R", function: "恢复模式", notes: "开机时按住" },
{ hotkey: "Cmd + Option + R", function: "网络恢复", notes: "开机时按住" },
{ hotkey: "Shift", function: "安全模式", notes: "开机时按住" }
]
},
{
brand: "微星 (MSI)",
icon: "fas fa-desktop",
keys: [
{ hotkey: "F11", function: "启动菜单", notes: "最常见" },
{ hotkey: "Del", function: "BIOS设置", notes: "开机时反复按" },
{ hotkey: "F3", function: "系统恢复", notes: "部分型号" }
]
},
{
brand: "华为 (Huawei)",
icon: "fas fa-laptop",
keys: [
{ hotkey: "F2", function: "BIOS设置", notes: "最常见" },
{ hotkey: "F12", function: "启动菜单", notes: "部分型号" },
{ hotkey: "ESC", function: "启动菜单", notes: "部分型号" }
]
},
{
brand: "小米 (Xiaomi)",
icon: "fas fa-laptop",
keys: [
{ hotkey: "F12", function: "启动菜单", notes: "最常见" },
{ hotkey: "F2", function: "BIOS设置", notes: "开机时反复按" },
{ hotkey: "F7", function: "系统恢复", notes: "部分型号" }
]
},
{
brand: "神舟 (Hasee)",
icon: "fas fa-desktop",
keys: [
{ hotkey: "F12", function: "启动菜单", notes: "最常见" },
{ hotkey: "F2", function: "BIOS设置", notes: "开机时反复按" },
{ hotkey: "F7", function: "系统恢复", notes: "部分型号" }
]
}
];
// 获取DOM元素
const brandList = document.getElementById('brandList');
const hotkeysContainer = document.getElementById('hotkeysContainer');
const searchInput = document.getElementById('searchInput');
const noResults = document.getElementById('noResults');
const themeToggle = document.getElementById('themeToggle');
// 当前选中的品牌
let selectedBrand = "全部";
let filteredData = [...hotkeysData];
// 初始化页面
function initPage() {
renderBrandButtons();
renderHotkeyTables();
setupEventListeners();
checkThemePreference();
}
// 渲染品牌按钮
function renderBrandButtons() {
// 添加"全部"按钮
const allButton = document.createElement('button');
allButton.className = 'brand-btn active';
allButton.innerHTML = '<i class="fas fa-layer-group"></i> 全部品牌';
allButton.dataset.brand = "全部";
allButton.addEventListener('click', () => filterByBrand("全部"));
brandList.appendChild(allButton);
// 添加各品牌按钮
hotkeysData.forEach(brand => {
const button = document.createElement('button');
button.className = 'brand-btn';
button.innerHTML = `<i class="${brand.icon}"></i> ${brand.brand.split(' ')[0]}`;
button.dataset.brand = brand.brand;
button.addEventListener('click', () => filterByBrand(brand.brand));
brandList.appendChild(button);
});
}
// 渲染热键表格
function renderHotkeyTables() {
hotkeysContainer.innerHTML = '';
if (filteredData.length === 0) {
noResults.style.display = 'block';
return;
}
noResults.style.display = 'none';
filteredData.forEach(brand => {
const tableContainer = document.createElement('div');
tableContainer.className = 'hotkey-table';
let tableHTML = `
<table>
<thead>
<tr>
<th style="width: 40%;">
<div style="display: flex; align-items: center;">
<div class="brand-icon"><i class="${brand.icon}"></i></div>
<span>${brand.brand}</span>
</div>
</th>
<th style="width: 30%;">热键</th>
<th style="width: 30%;">功能说明</th>
</tr>
</thead>
<tbody>
`;
brand.keys.forEach(key => {
// 处理热键显示，如果是组合键则分开显示
const hotkeySpans = key.hotkey.split('+').map(k => `<span class="key">${k}</span>`).join(' + ');
tableHTML += `
<tr>
<td>${key.function}</td>
<td>${hotkeySpans}</td>
<td>${key.notes}</td>
</tr>
`;
});
tableHTML += `
</tbody>
</table>
`;
tableContainer.innerHTML = tableHTML;
hotkeysContainer.appendChild(tableContainer);
});
}
// 按品牌筛选
function filterByBrand(brand) {
selectedBrand = brand;
// 更新品牌按钮状态
document.querySelectorAll('.brand-btn').forEach(btn => {
if (btn.dataset.brand === brand) {
btn.classList.add('active');
} else {
btn.classList.remove('active');
}
});
// 筛选数据
if (brand === "全部") {
filteredData = [...hotkeysData];
} else {
filteredData = hotkeysData.filter(item => item.brand === brand);
}
// 应用搜索筛选（如果搜索框有内容）
const searchTerm = searchInput.value.trim().toLowerCase();
if (searchTerm) {
applySearchFilter(searchTerm);
} else {
renderHotkeyTables();
}
}
// 应用搜索筛选
function applySearchFilter(searchTerm) {
if (!searchTerm) {
// 如果没有搜索词，根据当前选中的品牌显示
filterByBrand(selectedBrand);
return;
}
// 根据搜索词筛选
filteredData = hotkeysData.filter(brand => {
// 检查品牌名称是否匹配
if (brand.brand.toLowerCase().includes(searchTerm)) return true;
// 检查热键是否匹配
const keyMatch = brand.keys.some(key =>
key.hotkey.toLowerCase().includes(searchTerm) ||
key.function.toLowerCase().includes(searchTerm) ||
key.notes.toLowerCase().includes(searchTerm)
);
return keyMatch;
});
// 如果当前品牌不是"全部"，进一步筛选
if (selectedBrand !== "全部") {
filteredData = filteredData.filter(brand => brand.brand === selectedBrand);
}
renderHotkeyTables();
}
// 设置事件监听器
function setupEventListeners() {
// 搜索框输入事件
searchInput.addEventListener('input', () => {
const searchTerm = searchInput.value.trim().toLowerCase();
applySearchFilter(searchTerm);
});
// 主题切换按钮
themeToggle.addEventListener('click', toggleTheme);
}
// 切换主题
function toggleTheme() {
document.body.classList.toggle('dark-theme');
const icon = themeToggle.querySelector('i');
if (document.body.classList.contains('dark-theme')) {
icon.className = 'fas fa-sun';
localStorage.setItem('theme', 'dark');
} else {
icon.className = 'fas fa-moon';
localStorage.setItem('theme', 'light');
}
}
// 检查主题偏好
function checkThemePreference() {
const savedTheme = localStorage.getItem('theme');
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {
document.body.classList.add('dark-theme');
themeToggle.querySelector('i').className = 'fas fa-sun';
}
}
// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', initPage);
</script>
</body>
</html>
功能说明
- 品牌导航：顶部提供常见电脑品牌的快速导航按钮
- 搜索功能：可通过品牌名称、热键或功能进行搜索
- 热键表格：清晰展示每个品牌的热键、功能和使用说明
- 主题切换：支持浅色/深色主题，自动保存用户偏好
- 响应式设计：适配各种屏幕尺寸，在手机上也能良好显示
涵盖的品牌和热键
- 联想：F12、F2、F1等
- 戴尔：F12、F2、F10等
- 惠普：F9、ESC、F10等
- 华硕：ESC、F2、F8等
- 苹果：Option、Cmd+R等
- 以及其他常见品牌如宏碁、微星、华为、小米、神舟等
您可以直接将此代码复制到HTML文件中，然后在浏览器中打开即可使用。页面支持搜索、筛选和主题切换功能，方便用户快速查找所需的启动热键信息。
