当前位置：首页 > news >正文

简易BIOS设置模拟界面设计

news 2025/9/17 6:35:26

1.设计思路：

使用浅蓝色和白色为主色调，搭配柔和的绿色和橙色作为强调色

采用半透明效果和轻微阴影创造层次感

添加平滑的过渡动画提升用户体验

模拟真实BIOS的布局但增加现代美学元素

2.视觉设计：

使用柔和的蓝白配色方案，搭配绿色和橙色作为强调色

半透明效果和轻微阴影创造现代感

平滑的过渡动画提升用户体验

3.功能区域：

顶部标题栏显示当前时间和BIOS标题

左侧菜单栏提供五个主要设置类别

中央内容区显示当前选中菜单的详细设置选项

底部帮助栏显示键盘操作指南

4.交互功能：

鼠标点击切换菜单和修改设置

键盘方向键导航支持

实时更新的系统时间显示

退出选项提供保存/放弃更改功能

5.响应式设计：

适配各种屏幕尺寸

在移动设备上也能良好显示

6.截图展示：

7.代码重现：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>简易BIOS设置模拟</title><style>* {margin: 0;padding: 0;box-sizing: border-box;font-family: 'Courier New', monospace;}body {background: linear-gradient(135deg, #6e8efb, #a777e3);display: flex;justify-content: center;align-items: center;min-height: 100vh;padding: 20px;color: #333;}.bios-container {width: 800px;background: rgba(255, 255, 255, 0.9);border-radius: 10px;overflow: hidden;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);animation: fadeIn 0.5s ease;}.bios-header {background: linear-gradient(to right, #3498db, #2ecc71);color: white;padding: 15px 20px;display: flex;justify-content: space-between;align-items: center;}.bios-title {font-size: 1.2rem;font-weight: bold;}.bios-time {font-size: 0.9rem;}.bios-content {display: flex;min-height: 400px;}.bios-sidebar {width: 200px;background: rgba(52, 152, 219, 0.1);padding: 20px 0;border-right: 1px solid #e0e0e0;}.menu-item {padding: 12px 20px;cursor: pointer;transition: all 0.2s ease;display: flex;align-items: center;}.menu-item:hover {background: rgba(52, 152, 219, 0.2);}.menu-item.active {background: rgba(46, 204, 113, 0.2);border-left: 4px solid #2ecc71;font-weight: bold;}.menu-icon {margin-right: 10px;width: 16px;text-align: center;}.bios-main {flex: 1;padding: 20px;position: relative;}.menu-section {display: none;}.menu-section.active {display: block;animation: slideIn 0.3s ease;}.section-title {font-size: 1.1rem;margin-bottom: 20px;color: #3498db;border-bottom: 1px solid #e0e0e0;padding-bottom: 8px;}.setting-item {margin-bottom: 15px;display: flex;align-items: center;}.setting-label {width: 250px;font-weight: 500;}.setting-value {flex: 1;}select, input {padding: 6px 10px;border: 1px solid #ddd;border-radius: 4px;background: white;width: 200px;transition: all 0.2s ease;}select:focus, input:focus {outline: none;border-color: #3498db;box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);}.bios-footer {padding: 15px 20px;background: #f8f9fa;border-top: 1px solid #e0e0e0;display: flex;justify-content: space-between;font-size: 0.85rem;color: #666;}.key-help {display: flex;gap: 15px;}.key-item {display: flex;align-items: center;}kbd {background: #e0e0e0;padding: 2px 6px;border-radius: 4px;margin-right: 5px;font-size: 0.8rem;}@keyframes fadeIn {from { opacity: 0; transform: translateY(-10px); }to { opacity: 1; transform: translateY(0); }}@keyframes slideIn {from { opacity: 0; transform: translateX(10px); }to { opacity: 1; transform: translateX(0); }}.highlight {color: #e74c3c;font-weight: bold;}.info-text {font-size: 0.9rem;color: #666;margin-top: 5px;}</style>
</head>
<body><div class="bios-container"><div class="bios-header"><div class="bios-title">BIOS 设置实用程序</div><div class="bios-time" id="current-time">12:00:00</div></div><div class="bios-content"><div class="bios-sidebar"><div class="menu-item active" data-target="main"><span class="menu-icon">◈</span> 主要设置</div><div class="menu-item" data-target="advanced"><span class="menu-icon">◈</span> 高级设置</div><div class="menu-item" data-target="security"><span class="menu-icon">◈</span> 安全设置</div><div class="menu-item" data-target="boot"><span class="menu-icon">◈</span> 启动设置</div><div class="menu-item" data-target="exit"><span class="menu-icon">◈</span> 退出</div></div><div class="bios-main"><div class="menu-section active" id="main"><h2 class="section-title">主要设置</h2><div class="setting-item"><div class="setting-label">系统时间</div><div class="setting-value"><input type="time" id="system-time" value="12:00:00"></div></div><div class="setting-item"><div class="setting-label">系统日期</div><div class="setting-value"><input type="date" id="system-date" value="2023-01-01"></div></div><div class="setting-item"><div class="setting-label">SATA 模式</div><div class="setting-value"><select id="sata-mode"><option value="ahci">AHCI</option><option value="ide">IDE</option><option value="raid">RAID</option></select></div></div><div class="setting-item"><div class="setting-label">系统信息</div><div class="setting-value"><div>BIOS 版本: 1.0.2</div><div>处理器: Intel Core i7-12700K</div><div>内存: 16384 MB</div></div></div></div><div class="menu-section" id="advanced"><h2 class="section-title">高级设置</h2><div class="setting-item"><div class="setting-label">虚拟化技术</div><div class="setting-value"><select id="virtualization"><option value="enabled">启用</option><option value="disabled">禁用</option></select></div></div><div class="setting-item"><div class="setting-label">CPU 配置</div><div class="setting-value"><select id="cpu-config"><option value="auto">自动</option><option value="manual">手动</option></select></div></div><div class="setting-item"><div class="setting-label">USB 配置</div><div class="setting-value"><select id="usb-config"><option value="enabled">启用</option><option value="disabled">禁用</option></select><div class="info-text">启用或禁用USB端口</div></div></div></div><div class="menu-section" id="security"><h2 class="section-title">安全设置</h2><div class="setting-item"><div class="setting-label">管理员密码</div><div class="setting-value"><select id="admin-password"><option value="not-set">未设置</option><option value="set">已设置</option></select></div></div><div class="setting-item"><div class="setting-label">安全启动</div><div class="setting-value"><select id="secure-boot"><option value="enabled">启用</option><option value="disabled">禁用</option></select><div class="info-text">启用安全启动功能</div></div></div><div class="setting-item"><div class="setting-label">TPM 设备</div><div class="setting-value"><select id="tpm-device"><option value="enabled">启用</option><option value="disabled">禁用</option></select></div></div></div><div class="menu-section" id="boot"><h2 class="section-title">启动设置</h2><div class="setting-item"><div class="setting-label">启动顺序</div><div class="setting-value"><select id="boot-order"><option value="uefi">UEFI 优先</option><option value="legacy">传统优先</option></select></div></div><div class="setting-item"><div class="setting-label">快速启动</div><div class="setting-value"><select id="fast-boot"><option value="enabled">启用</option><option value="disabled">禁用</option></select><div class="info-text">启用快速启动以减少启动时间</div></div></div><div class="setting-item"><div class="setting-label">启动设备优先级</div><div class="setting-value"><div>1. Windows Boot Manager</div><div>2. SSD: Samsung 970 EVO</div><div>3. USB: UEFI</div></div></div></div><div class="menu-section" id="exit"><h2 class="section-title">退出</h2><div class="setting-item"><div class="setting-label">退出并保存更改</div><div class="setting-value"><button onclick="saveChanges()" style="padding: 8px 16px; background: #2ecc71; color: white; border: none; border-radius: 4px; cursor: pointer;">保存并退出</button><div class="info-text">保存所有更改并退出BIOS设置</div></div></div><div class="setting-item"><div class="setting-label">退出并放弃更改</div><div class="setting-value"><button onclick="discardChanges()" style="padding: 8px 16px; background: #e74c3c; color: white; border: none; border-radius: 4px; cursor: pointer;">放弃并退出</button><div class="info-text">退出而不保存任何更改</div></div></div><div class="setting-item"><div class="setting-label">加载默认设置</div><div class="setting-value"><button onclick="loadDefaults()" style="padding: 8px 16px; background: #3498db; color: white; border: none; border-radius: 4px; cursor: pointer;">加载默认值</button><div class="info-text">恢复所有设置为出厂默认值</div></div></div></div></div></div><div class="bios-footer"><div class="key-help"><div class="key-item"><kbd>←</kbd><kbd>→</kbd> 选择菜单</div><div class="key-item"><kbd>↑</kbd><kbd>↓</kbd> 选择项目</div><div class="key-item"><kbd>Enter</kbd> 确认</div><div class="key-item"><kbd>Esc</kbd> 退出</div></div><div>使用方向键导航，Enter键选择，Esc键返回</div></div></div><script>// 更新时间显示function updateTime() {const now = new Date();const timeStr = now.toLocaleTimeString();document.getElementById('current-time').textContent = timeStr;document.getElementById('system-time').value = now.toTimeString().substr(0, 8);}// 初始更新时间并设置间隔updateTime();setInterval(updateTime, 1000);// 设置当前日期const today = new Date();document.getElementById('system-date').value = today.toISOString().substr(0, 10);// 菜单切换功能const menuItems = document.querySelectorAll('.menu-item');const menuSections = document.querySelectorAll('.menu-section');menuItems.forEach(item => {item.addEventListener('click', function() {const target = this.getAttribute('data-target');// 更新活动菜单项menuItems.forEach(mi => mi.classList.remove('active'));this.classList.add('active');// 更新活动内容区域menuSections.forEach(section => section.classList.remove('active'));document.getElementById(target).classList.add('active');});});// 模拟保存功能function saveChanges() {alert('设置已保存！系统将重新启动。');}function discardChanges() {if(confirm('确定要放弃所有更改吗？')) {alert('已退出而不保存更改。');}}function loadDefaults() {if(confirm('确定要加载默认设置吗？所有自定义设置将被重置。')) {alert('已恢复默认设置。');}}// 添加键盘导航支持document.addEventListener('keydown', function(e) {const activeMenu = document.querySelector('.menu-item.active');let nextMenu;switch(e.key) {case 'ArrowUp':e.preventDefault();nextMenu = activeMenu.previousElementSibling;if(nextMenu && nextMenu.classList.contains('menu-item')) {activeMenu.classList.remove('active');nextMenu.classList.add('active');nextMenu.click();}break;case 'ArrowDown':e.preventDefault();nextMenu = activeMenu.nextElementSibling;if(nextMenu && nextMenu.classList.contains('menu-item')) {activeMenu.classList.remove('active');nextMenu.classList.add('active');nextMenu.click();}break;}});</script>
</body>
</html>