如何使用HTML5创建Windows 11界面

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

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

下面是以上方法的逐步实现：

步骤1： 在本部分中，我们将使用HTML创建Windows 11界面的基本结构。我们将给出标题为 “尝试Windows 11” ，并使用 < img>标记添加必要的图像。同时，使用 < link>标记添加必要的链接。

HTML代码： 此代码用于向网站添加图像和链接的结构。它没有任何CSS属性。我们将使用 < div>标记创建各种div，并给它们相应的类名。

示例： 在此示例中，我们将使用HTML5创建Windows 11界面。

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Try Windows 11</title>
    <link rel="shortcut icon"
          href=
"https://media.geeksforgeeks.org/wp-content/uploads/20210914203818/faviconWindows.png"
          type="image/x-icon">
    <!-- Linking the CSS stylesheet -->
    <link rel="stylesheet"
          href="styles.css">
</head>
<body>
    <div class="taskbar">
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210914203932/icons-300x37.PNG"
             alt="">
        <img class="right"
             src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210914204052/taskbar-200x37.PNG"
             alt="">
    </div>
    <div class="startmenu">
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210914204232/startmenu-289x300.PNG"
             alt="">
    </div>
 
    <div class="wallpaper">
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210914204725/windows11-300x169.jpg"
             alt="">
    </div>
    <!-- Linking the external JavaScript -->
    <script src="script.js"></script>
</body>
</html>

步骤2：样式化结构： 在上一节中，我们创建了Windows 11界面的结构。现在我们将为其添加一些CSS属性。不同的类将具有不同的属性。

名为 任务栏的类 将具有以下CSS属性：

background-color: #f3f3f3; (设置元素的背景颜色)。
width: 100%; (设置元素的宽度)
position: absolute; (设置元素的位置并指定用于元素的定位方法)
bottom: 0; (影响定位元素的垂直位置)。
display: flex; (指定元素的显示行为(渲染框的类型))。
z-index: 110; (指定元素的堆叠顺序)。
justify-content: center; (在主轴水平方向上对齐弹性容器的项目，当项目不使用所有可用空间时)

名为 右侧的类 将具有以下CSS属性：

justify-self: flex-end ; (设置盒子在适当的轴上如何对齐其对齐容器内部)。
position: absolute; (设置元素的位置并指定用于元素的定位方法)。
right: 0; (影响给定元素的水平位置)。
margin: 6px 0; (在元素周围创建间距)。
height: 85%; (设置元素的高度)。

名为 开始菜单的类 将具有以下CSS属性：

position: absolute; (指定用于元素的定位方法)。
bottom: -655px; (影响定位元素的垂直位置)。
width: 100%; (设置元素的宽度)。
text-align: center; (指定元素中文本的水平对齐方式)。
transition: all 0.3s ease-in; (使属性值在给定的持续时间内平滑变化)。

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的bottom属性为50px，则将其更新为-655px，否则，如果不是50px，则将其更新为50px。这将使任务栏具有响应式的特性。

Javascript

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"
    }
})

输出：

如何使用HTML5创建Windows 11界面