En este artículo, veremos cómo crear una interfaz de Windows 11 usando HTML5.
Enfoque: para crear la interfaz de Windows 11, usaremos HTML , CSS y JavaScript . Si desea cambiar el diseño, puede agregarle más funciones. En este artículo, dividiremos todo en tres partes diferentes creando la estructura, diseñando la estructura y agregando funcionalidad.
A continuación se muestra la implementación paso a paso del enfoque anterior.
Paso 1: En esta sección crearemos la estructura básica usando HTML para la interfaz de Windows 11. Le daremos el título » Probar Windows 11″ y agregaremos las imágenes necesarias usando la etiqueta <img> . También agregue los enlaces necesarios usando la etiqueta <link >.
- Código HTML: Este código se utiliza para agregar imágenes y enlaces para estructurar el sitio web. No tiene ninguna propiedad CSS. Crearemos varios div usando la etiqueta <div> y les daremos el nombre de clase respectivo.
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>
Paso 2: Diseño de la estructura: En la sección anterior, HEMOS creado la estructura de la interfaz de Windows 11. Ahora le agregaremos algunas propiedades CSS. Diferentes clases tendrán diferentes propiedades.
La barra de tareas con nombre de clase tendrá propiedades CSS como:
- color de fondo: #f3f3f3; (establece el color de fondo de un elemento).
- ancho: 100%; (establece el ancho del elemento)
- posición: absoluta; (establece la posición del elemento y especifica el método de posicionamiento utilizado para el elemento)
- inferior: 0; (afecta a la posición vertical del elemento posicionado).
- pantalla: flexible; (especifica el comportamiento de visualización (el tipo de cuadro de representación) de un elemento).
- índice z: 110; (especifica el orden de pila de un elemento).
- justificar-contenido: centro; (alinea los elementos del contenedor flexible cuando los elementos no utilizan todo el espacio disponible en el eje principal horizontalmente)
La clase llamada right tendrá propiedades CSS como:
- justificarse a sí mismo: extremo flexible ; (establece la forma en que se justifica un cuadro dentro de su contenedor de alineación a lo largo del eje apropiado).
- posición: absoluta; (establece la posición del elemento y especifica el método de posicionamiento utilizado para el elemento).
- derecha: 0; (afecta la posición horizontal de los elementos dados).
- margen: 6px 0; (crea espacio alrededor de los elementos).
- altura: 85%; (establece la altura de un elemento).
La clase llamada startmenu tendrá propiedades CSS como:
- posición: absoluta; (especifica el tipo de método de posicionamiento utilizado para un elemento).
- abajo: -655px; (afecta a la posición vertical de un elemento posicionado).
- ancho: 100%; (establece el ancho de un elemento).
- alineación de texto: centro; (especifica la alineación horizontal del texto en un elemento).
- transición: todos los 0,3 s de entrada lenta; (permite cambiar los valores de las propiedades sin problemas, durante un período determinado).
styles.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;
}
Paso 3: Agregar funcionalidad al sitio web: Escribiremos el JavaScript para el menú de inicio y la barra de tareas. Primero crearemos dos variables llamadas taskbar y startmenu , luego dentro de esta variable usaremos el método document.getElementsByClassName() que devuelve una colección de todos los elementos en el documento con el nombre de clase especificado, como un objeto HTMLCollection.
Ahora, en la barra de tareas, agregaremos un detector de eventos para un clic que adjunta un controlador de eventos al documento, y dentro de él, crearemos una declaración if-else como si la propiedad inferior del menú de inicio es 50px y luego actualícela en: 655 px, si no es 50 px, actualícelo a 50 px. Esto hará que la barra de tareas responda.
script.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"
}
})
Producción:
Publicación traducida automáticamente
Artículo escrito por goraisoumali5 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA