如何使用 HTML5 创建 Windows 11 界面？

在本文中，我们将了解如何使用 HTML5 创建 Windows 11 界面。

方法：要创建 Windows 11 界面，我们将使用HTML 、 CSS和JavaScript 。如果您想更改设计，您可以为其添加更多功能。在本文中，我们将整个事物分为三个不同的部分，创建结构、设置结构样式和添加功能。

以下是上述方法的分步实施。

第 1 步：在本节中，我们将使用 HTML 为 Windows 11 界面创建基本结构。我们将标题命名为“Try Windows 11” ，并使用标签添加必要的图像。还可以使用 > 标签添加必要的链接。

• HTML 代码：此代码用于添加图像和链接来构建网站。它没有任何 CSS 属性。我们将使用
  标签创建各种 div 并给它们各自的类名。

HTML

  

    Try Windows 11
  
    
  
    
    

  

    
        
        
    
  
    
        
    
  
    
        
    
      
    
    

  

---

第 2 步：设置结构样式：在上一节中，我们已经创建了 windows 11 界面的结构。现在我们将在其上添加一些 CSS 属性。不同的类会有不同的属性。

名为taskbar的类将具有 CSS 属性，例如：

1. 背景颜色：#f3f3f3； （设置元素的背景颜色）。
2. 宽度：100%； （设置元素的宽度）
3. 位置：绝对； （设置元素的位置并指定用于元素的定位方法）
4. 底部：0； （影响定位元素的垂直位置）。
5. 显示：弯曲； （指定元素的显示行为（渲染框的类型））。
6. z 指数：110； （指定元素的堆栈顺序）。
7. 证明内容：中心； （当项目没有使用主轴上的所有可用空间时，对齐灵活容器的项目）

名为right的类将具有 CSS 属性，例如：

1. justify-self: flex-end ; （设置框在其对齐容器内沿相应轴对齐的方式）。
2. 位置：绝对； （设置元素的位置并指定用于元素的定位方法）。
3. 右：0； （影响给定元素的水平位置）。
4. 边距：6px 0； （在元素周围创建间距）。
5. 高度：85%； （设置元素的高度）。

名为startmenu的类将具有 CSS 属性，例如：

1. 位置：绝对； （指定用于元素的定位方法的类型）。
2. 底部：-655px； （影响定位元素的垂直位置）。
3. 宽度：100%； （设置元素的宽度）。
4. 文本对齐：居中； （指定元素中文本的水平对齐方式）。
5. 过渡：所有 0.3 秒缓入； （允许在给定的持续时间内平滑地更改属性值）。

样式.css

body{
    overflow: hidden;
    height: 100vh;
}
.taskbar{
    background-color: #F3F3F3;
    width: 100%;
    position: absolute;
    bottom: 0;
    display: flex;
    z-index: 110;
    justify-content: center;
}
.right{
    justify-self: flex-end;
    position: absolute;
    right: 0;
    margin: 6px 0;
    height: 85%;
}  
.startmenu{
    position: absolute;
    bottom: -655px;
    width: 100%;
    text-align: center;
    transition: all 0.3s ease-in; 
}
.startmenu img{
    border-radius: 8px;
}
.wallpaper img{
    height: 900px;
}

第 3 步：向网站添加功能：我们将为开始菜单和任务栏编写 JavaScript。首先，我们将创建两个名为taskbar和startmenu的变量，然后在此变量中，我们将使用document.getElementsByClassName()方法返回文档中具有指定类名的所有元素的集合，作为 HTMLCollection 对象。

现在在任务栏中，我们将为单击添加一个事件侦听器，将事件处理程序附加到文档，在其中，我们将创建一个 if-else 语句，例如如果 startmenu 的底部属性为 50px，则将其更新为 - 655px 否则如果不是 50px 则将其更新为 50px。这将使任务栏响应。

脚本.js

let taskbar = document.getElementsByClassName("taskbar")[0]
let startmenu = document.getElementsByClassName("startmenu")[0]
   
taskbar.addEventListener("click", ()=>{
    console.log("clicked");
    if(startmenu.style.bottom == "50px"){
        startmenu.style.bottom = "-655px"
    }
    else{
        startmenu.style.bottom = "50px"
    }
})

输出：