我们将使用 HTML 搭建结构，CSS (特别是 Flexbox) 进行布局和美化，以及 jQuery 实现所有的交互逻辑。
（图片来源网络，侵删）
最终效果预览
这是一个静态的 GIF 预览,展示了模板的主要功能：
HTML 结构
我们创建整个桌面的基本骨架,它包含一个桌面区域和一个任务栏。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">我的桌面</title>
<!-- 引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 引入 Font Awesome 图标库 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<!-- 引入 CSS 和 JS 文件 -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 桌面背景和图标容器 -->
<div id="desktop">
<!-- 桌面图标 -->
<div class="desktop-icon" data-app="calculator">
<i class="fas fa-calculator"></i>
<span>计算器</span>
</div>
<div class="desktop-icon" data-app="notepad">
<i class="fas fa-sticky-note"></i>
<span>记事本</span>
</div>
<div class="desktop-icon" data-app="browser">
<i class="fas fa-globe"></i>
<span>浏览器</span>
</div>
<div class="desktop-icon" data-app="settings">
<i class="fas fa-cog"></i>
<span>设置</span>
</div>
</div>
<!-- 任务栏 -->
<div id="taskbar">
<!-- 开始菜单按钮 -->
<div id="start-menu-btn">
<i class="fas fa-bars"></i>
</div>
<!-- 打开的应用程序列表 -->
<div id="taskbar-apps">
<!-- 动态生成 -->
</div>
<!-- 系统托盘 -->
<div id="system-tray">
<div id="notification-btn">
<i class="fas fa-bell"></i>
<span class="badge">3</span>
</div>
<div id="clock">
<!-- 动态生成 -->
</div>
</div>
</div>
<!-- 开始菜单 (默认隐藏) -->
<div id="start-menu" class="hidden">
<div class="user-profile">
<i class="fas fa-user-circle"></i>
<span>用户</span>
</div>
<ul>
<li><i class="fas fa-power-off"></i> 关机</li>
<li><i class="fas fa-redo"></i> 重启</li>
</ul>
</div>
<!-- 通知中心 (默认隐藏) -->
<div id="notification-center" class="hidden">
<h3>通知</h3>
<div class="notification-item">
<p>欢迎使用桌面模板！</p>
<small>刚刚</small>
</div>
<div class="notification-item">
<p>您有 3 条新消息。</p>
<small>5分钟前</small>
</div>
</div>
<!-- 窗口容器 (动态生成窗口将放在这里) -->
<div id="windows-container"></div>
<!-- 引入 JS 文件 -->
<script src="script.js"></script>
</body>
</html>
CSS 样式 (style.css)
我们用 CSS 来美化界面,使其看起来像一个真正的桌面。
/* 全局样式和变量 */
:root {
--desktop-bg-color: #2c3e50;
--taskbar-bg-color: #34495e;
--taskbar-height: 40px;
--window-bg-color: #ecf0f1;
--window-border-color: #bdc3c7;
--icon-size: 80px;
--text-color: #ecf0f1;
--accent-color: #3498db;
}
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden; /* 防止滚动条 */
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/* 桌面区域 */
#desktop {
width: 100%;
height: calc(100% - var(--taskbar-height));
background-color: var(--desktop-bg-color);
background-image: url('https://picsum.photos/seed/desktop/1920/1080.jpg');
background-size: cover;
background-position: center;
position: relative;
}
/* 桌面图标 */
.desktop-icon {
position: absolute;
width: var(--icon-size);
text-align: center;
cursor: pointer;
user-select: none; /* 防止文字被选中 */
transition: transform 0.1s;
}
.desktop-icon:hover {
transform: scale(1.05);
}
.desktop-icon i {
font-size: 40px;
color: var(--text-color);
display: block;
margin-bottom: 5px;
}
.desktop-icon span {
color: var(--text-color);
font-size: 12px;
}
/* 任务栏 */
#taskbar {
position: fixed;
bottom: 0;
width: 100%;
height: var(--taskbar-height);
background-color: var(--taskbar-bg-color);
display: flex;
align-items: center;
padding: 0 10px;
box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
}
#start-menu-btn {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-color);
cursor: pointer;
border-radius: 5px;
transition: background-color 0.2s;
}
#start-menu-btn:hover {
background-color: rgba(255, 255, 255, 0.1);
}
#taskbar-apps {
display: flex;
margin-left: 10px;
flex-grow: 1;
}
.taskbar-app {
padding: 5px 10px;
margin-right: 5px;
background-color: rgba(255, 255, 255, 0.1);
color: var(--text-color);
border-radius: 5px;
cursor: pointer;
font-size: 12px;
display: flex;
align-items: center;
transition: background-color 0.2s;
}
.taskbar-app:hover {
background-color: rgba(255, 255, 255, 0.2);
}
.taskbar-app.active {
background-color: var(--accent-color);
}
#system-tray {
display: flex;
align-items: center;
margin-left: auto;
}
#notification-btn {
position: relative;
color: var(--text-color);
cursor: pointer;
padding: 0 10px;
}
.badge {
position: absolute;
top: -5px;
right: 5px;
background-color: #e74c3c;
color: white;
border-radius: 10px;
padding: 2px 5px;
font-size: 10px;
}
#clock {
color: var(--text-color);
padding: 0 10px;
font-size: 14px;
}
/* 开始菜单和通知中心 */
.hidden {
display: none !important;
}
#start-menu, #notification-center {
position: fixed;
bottom: var(--taskbar-height);
background-color: var(--window-bg-color);
border: 1px solid var(--window-border-color);
border-radius: 5px;
box-shadow: 0 0 15px rgba(0,0,0,0.3);
z-index: 1000;
}
#start-menu {
left: 10px;
width: 200px;
}
#start-menu .user-profile {
padding: 15px;
border-bottom: 1px solid var(--window-border-color);
display: flex;
align-items: center;
}
#start-menu .user-profile i {
font-size: 30px;
margin-right: 10px;
}
#start-menu ul {
list-style: none;
padding: 0;
margin: 0;
}
#start-menu ul li {
padding: 10px 15px;
cursor: pointer;
transition: background-color 0.2s;
}
#start-menu ul li:hover {
background-color: #d5dbdb;
}
#notification-center {
right: 10px;
width: 250px;
max-height: 300px;
overflow-y: auto;
}
#notification-center h3 {
padding: 15px;
margin: 0;
border-bottom: 1px solid var(--window-border-color);
}
.notification-item {
padding: 10px 15px;
border-bottom: 1px solid #f0f0f0;
}
.notification-item small {
color: #7f8c8d;
display: block;
margin-top: 5px;
}
/* 窗口样式 */
.window {
position: absolute;
background-color: var(--window-bg-color);
border: 1px solid var(--window-border-color);
border-radius: 5px;
box-shadow: 0 0 15px rgba(0,0,0,0.3);
min-width: 300px;
min-height: 200px;
display: flex;
flex-direction: column;
}
.window-header {
background-color: var(--taskbar-bg-color);
color: var(--text-color);
padding: 5px 10px;
display: flex;
justify-content: space-between;
align-items: center;
cursor: move;
user-select: none;
}
.window-title {
font-size: 14px;
}
.window-controls {
display: flex;
}
.window-control {
width: 16px;
height: 16px;
margin-left: 5px;
border-radius: 50%;
cursor: pointer;
}
.window-control.minimize { background-color: #f1c40f; }
.window-control.maximize { background-color: #2ecc71; }
.window-control.close { background-color: #e74c3c; }
.window-content {
padding: 15px;
flex-grow: 1;
overflow: auto;
}
.window.active {
z-index: 100; /* 确保活动窗口在最上层 */
}
jQuery 交互逻辑 (script.js)
我们用 jQuery 来实现所有的动态功能,这是整个模板的灵魂。
（图片来源网络，侵删）
$(document).ready(function() {
// --- 全局变量 ---
let zIndexCounter = 100; // 用于控制窗口层级
let activeWindow = null; // 当前活动窗口
const windows = {}; // 存储所有窗口的实例
// --- 时钟功能 ---
function updateClock() {
const now = new Date();
const timeString = now.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' });
$('#clock').text(timeString);
}
setInterval(updateClock, 1000);
updateClock(); // 立即更新一次
// --- 窗口管理 ---
const windowTemplates = {
calculator: `
<div class="window-content">
<h3>计算器</h3>
<input type="text" id="calc-display" readonly>
<div class="calc-buttons">
<button>7</button><button>8</button><button>9</button><button>/</button>
<button>4</button><button>5</button><button>6</button><button>*</button>
<button>1</button><button>2</button><button>3</button><button>-</button>
<button>0</button><button>.</button><button>=</button><button>+</button>
</div>
</div>
`,
notepad: `
<div class="window-content">
<h3>记事本</h3>
<textarea style="width: 100%; height: 200px; resize: none;">这是一个简单的记事本。</textarea>
</div>
`,
browser: `
<div class="window-content">
<h3>浏览器</h3>
<p>这是一个模拟的浏览器窗口。</p>
</div>
`,
settings: `
<div class="window-content">
<h3>设置</h3>
<p>系统设置面板。</p>
</div>
`
};
function createWindow(appId, title) {
const windowId = `window-${appId}`;
// 如果窗口已存在，则聚焦它
if (windows[windowId]) {
focusWindow(windowId);
return;
}
const $window = $(`
<div id="${windowId}" class="window">
<div class="window-header">
<span class="window-title">${title}</span>
<div class="window-controls">
<div class="window-control minimize"></div>
<div class="window-control maximize"></div>
<div class="window-control close"></div>
</div>
</div>
<div class="window-body">
${windowTemplates[appId]}
</div>
</div>
`);
$('#windows-container').append($window);
windows[windowId] = $window;
// 设置初始位置 (居中)
const desktopWidth = $('#desktop').width();
const desktopHeight = $('#desktop').height();
const windowWidth = $window.outerWidth();
const windowHeight = $window.outerHeight();
$window.css({
'left': (desktopWidth - windowWidth) / 2,
'top': (desktopHeight - windowHeight) / 2
});
// 添加到任务栏
addTaskbarApp(windowId, title);
// 绑定窗口事件
bindWindowEvents($window, windowId);
// 聚焦新窗口
focusWindow(windowId);
}
function bindWindowEvents($window, windowId) {
// 关闭按钮
$window.find('.window-control.close').on('click', function() {
closeWindow(windowId);
});
// 最小化按钮
$window.find('.window-control.minimize').on('click', function() {
$window.hide();
$(`#taskbar-apps .taskbar-app[data-window-id="${windowId}"]`).removeClass('active');
});
// 标题栏拖拽
let isDragging = false;
let currentX;
let currentY;
let initialX;
let initialY;
let xOffset = 0;
let yOffset = 0;
$window.find('.window-header').on('mousedown', function(e) {
if (e.target.classList.contains('window-control')) return;
initialX = e.clientX - xOffset;
initialY = e.clientY - yOffset;
if ($window.get(0) === document.elementFromPoint(e.clientX, e.clientY)) {
isDragging = true;
focusWindow(windowId);
}
});
$(document).on('mousemove', function(e) {
if (isDragging) {
e.preventDefault();
currentX = e.clientX - initialX;
currentY = e.clientY - initialY;
xOffset = currentX;
yOffset = currentY;
$window.css('transform', `translate(${currentX}px, ${currentY}px)`);
}
});
$(document).on('mouseup', function() {
initialX = currentX;
initialY = currentY;
isDragging = false;
});
// 点击窗口内容聚焦
$window.on('mousedown', function() {
focusWindow(windowId);
});
}
function focusWindow(windowId) {
// 移除所有活动状态
$('.window').removeClass('active');
$('.taskbar-app').removeClass('active');
// 添加活动状态
$(`#${windowId}`).addClass('active').css('z-index', ++zIndexCounter);
$(`#taskbar-apps .taskbar-app[data-window-id="${windowId}"]`).addClass('active');
activeWindow = windowId;
}
function closeWindow(windowId) {
$(`#${windowId}`).remove();
delete windows[windowId];
$(`#taskbar-apps .taskbar-app[data-window-id="${windowId}"]`).remove();
}
function addTaskbarApp(windowId, title) {
const $app = $(`<div class="taskbar-app" data-window-id="${windowId}">${title}</div>`);
$('#taskbar-apps').append($app);
$app.on('click', function() {
focusWindow(windowId);
});
}
// --- 桌面图标点击 ---
$('.desktop-icon').on('click', function() {
const appId = $(this).data('app');
const title = $(this).find('span').text();
createWindow(appId, title);
});
// --- 开始菜单 ---
$('#start-menu-btn').on('click', function(e) {
e.stopPropagation();
$('#start-menu').toggleClass('hidden');
$('#notification-center').addClass('hidden'); // 关闭通知中心
});
// --- 通知中心 ---
$('#notification-btn').on('click', function(e) {
e.stopPropagation();
$('#notification-center').toggleClass('hidden');
$('#start-menu').addClass('hidden'); // 关闭开始菜单
$('.badge').hide(); // 清除徽章
});
// --- 点击其他地方关闭菜单 ---
$(document).on('click', function() {
$('#start-menu').addClass('hidden');
$('#notification-center').addClass('hidden');
});
// --- 防止菜单内部点击关闭菜单 ---
$('#start-menu, #notification-center').on('click', function(e) {
e.stopPropagation();
});
});
如何使用
- 创建文件：将上面的代码分别保存为
index.html、style.css和script.js三个文件,并放在同一个文件夹下。 - 打开
index.html：用你的浏览器（如 Chrome, Firefox, Edge）打开这个 HTML 文件。 - 开始体验：
- 点击桌面上的图标（计算器、记事本等）来打开窗口。
- 拖动窗口的标题栏来移动窗口。
- 点击窗口的关闭按钮来关闭它。
- 点击任务栏上的应用图标来切换或聚焦窗口。
- 点击左下角的“开始”按钮打开开始菜单。
- 点击右下角的“通知”图标打开通知中心。
这个模板是一个非常好的起点，你可以基于它进行扩展，比如添加更多的应用程序窗口、实现窗口的最大化和还原功能、添加壁纸切换功能等。
（图片来源网络，侵删）
