A continuación, te detallo paso a paso cómo escribir el código HTML y CSS proporcionado, explicando qué debes escribir, dónde colocarlo y cómo afecta a la estructura del sitio web. El objetivo es replicar la página mostrada en la imagen.
<!DOCTYPE html><htmllang="es"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body></body></html>index.html.<body> será el contenedor principal de todo el contenido visible.<head><style>body {
margin: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
}
nav {
background: dodgerblue;
margin: 0;
height: 30px;
display: flex;
align-items: center;
}
navul {
display: flex;
list-style: none;
justify-content: center;
padding: 0;
margin: 0;
}
navulli {
margin-right: 150px;
}
navulli:last-child {
margin-right: 0px;
}
nav:nth-child(1) {
margin-left: 2px;
}
navullia {
color: white;
text-decoration: none;
}
section {
display: flex;
justify-content: center;
align-items: center;
}
sectiondiv {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
sectiondivimg {
width: 50%;
height: auto;
object-fit: contain;
}
.table-container {
position: absolute;
bottom: 420px;
left: 0;
right: 0;
margin: 0 auto;
width: 97%;
text-align: center;
}
table {
border-collapse: collapse;
width: 100%;
margin: 0;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
text-align: center;
}
</style><head> después de <title>Document</title>.body usa flexbox para apilar elementos verticalmente y ocupar toda la altura de la pantalla.nav crea una barra de navegación azul con enlaces centrados.section alinea el logo en el centro de la parte superior..table-container posiciona la tabla de forma absoluta debajo del logo.table estiliza la tabla con bordes y centrado de texto.<section><div><imgsrc="https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=1224,h=341,fit=crop/AQEEDM8ELNiRa5pG/logolistogrande-dWxxBjwv6Qh4xBbr.png"alt="Logo Acali"></div></section><body> al inicio.<nav><ul><li><ahref="#">Inicio</a></li><li><ahref="#">Asistencia</a></li><li><ahref="#">Ventas</a></li><li><ahref="#">Configuración</a></li></ul></nav><body> después de la sección del logo.<divclass="table-container"><table><thead><tr><th>Nombre</th><th>Apellido</th><th>Edad</th><th>Ciudad</th><th>Dirección</th></tr></thead><tbody><tr><td>Juan</td><td>Pérez</td><td>30</td><td>Madrid</td><td>Calle Falsa 123</td></tr><tr><td>María</td><td>Gómez</td><td>25</td><td>Barcelona</td><td>Avenida Siempre Viva 456</td></tr></tbody></table></div><body> después de la barra de navegación.position: absolute en .table-container permite que la tabla se coloque a una distancia fija del fondo, pero podría superponerse si el contenido cambia de tamaño.body, nav, y section asegura un diseño centrado y organizado.index.html y ábrelo en un navegador.bottom en .table-container) si es necesario.¡Con esto tienes tu página web lista!
