HTML 实现 Windows 11 风格窗口 - 简易代码示例 - 常规

以下 HTML 代码展示如何创建一个简单的 Windows 11 风格窗口：

<!DOCTYPE html>
<html>

<head>
  <title>Windows 11-like Window</title>
  <style>
    body {
      background-color: white;
      margin: 0;
      padding: 0;
    }

    .window {
      background-color: #eaeaea;
      width: 300px;
      height: 200px;
      margin: 50px auto;
      border: 1px solid gray;
      border-radius: 4px;
      position: relative;
    }

    .title-bar {
      background-color: #c0c0c0;
      height: 30px;
      line-height: 30px;
      padding: 0 10px;
      color: white;
      font-weight: bold;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
    }

    .title-bar img {
      vertical-align: middle;
      width: 20px;
      height: 20px;
      margin-right: 5px;
    }
  </style>
</head>

<body>
  <div class='window'>
    <div class='title-bar'>
      <img src='./q.jpg' alt='Icon'>
      Window Title
    </div>
  </div>
</body>

</html>

代码说明：

body 元素设置白色背景，并移除默认边距和内边距。
.window 类定义了窗口的基本样式，包括灰色背景、大小、边框、圆角和居中定位。
.title-bar 类定义了标题栏的样式，包括灰色背景、高度、内边距、白色文本和圆角。
.title-bar img 设置了标题栏图标的样式，包括垂直居中、大小和右边距。

注意：

请将代码中的 <img src='./q.jpg' alt='Icon'> 中的 ./q.jpg 替换为你自己的图标文件路径。
该代码只实现了窗口的基本外观，不包含放大、关闭等按钮的功能。