Construyendo una página de inicio de sitio web de noticias responsiva

Introducción

En este proyecto, aprenderás cómo crear la página de inicio del sitio web del diario LabEx Daily. Serás responsable de configurar la estructura HTML y dar estilo a las diferentes secciones de la página de inicio utilizando CSS.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Cómo configurar la estructura HTML para la página de inicio de LabEx Daily
• Cómo dar estilo a la sección del encabezado, incluyendo el logotipo y los botones de navegación
• Cómo dar estilo a la sección del banner, incluyendo la imagen del teléfono y el área de contenido
• Cómo dar estilo a la sección del título de pestaña, incluyendo el texto "Últimas Noticias" y "Más"
• Cómo dar estilo a la sección de la lista de noticias, incluyendo la disposición de los elementos de noticias y el botón "Más"
• Cómo dar estilo a la sección del pie de página, incluyendo las secciones izquierda y derecha

🏆 Logros

Después de completar este proyecto, podrás:

• Crear una página de inicio responsiva y visualmente atractiva para un sitio web de noticias
• Utilizar CSS para dar estilo a diferentes secciones de una página web
• Posicionar y alinear elementos utilizando CSS
• Aplicar diversas propiedades CSS para lograr el diseño deseado

Skills Graph

Configurar la estructura del proyecto

En este paso, configurarás la estructura del proyecto y prepararás los archivos y carpetas necesarios.

El código inicial para esta pregunta ya ha sido proporcionado. Abra el entorno de codificación y la estructura de directorios es la siguiente:

├── css
│   └── style.css
├── images
│   ├── 1.jpg
│   ├── 2.jpg
│   ├── 3.jpg
│   ├── 4.jpg
│   ├── 5.jpg
│   ├── 6.jpg
│   ├── 7.jpg
│   ├── phone_sample.png
│   └── qr.png
└── index.html

Donde:

• css/style.css es el archivo de estilo que se debe completar para este desafío.
• images contiene los archivos de imagen utilizados en el proyecto.
• index.html es la página de inicio del proyecto LabEx Daily.

Haga clic en el botón Go Live en la esquina inferior derecha de WebIDE para ejecutar el proyecto.

Luego, abra "Web 8080" en la parte superior de la VM y actualícela manualmente y verá la página.

Complete el archivo de estilo css/style.css (no modifique el estilo base css ya dado) para que la página de inicio de LabEx Daily se vea como sigue (el ancho total de la página es 1024px):

Dar estilo al encabezado

En este paso, aprenderás cómo dar estilo a la sección del encabezado de la página de inicio de LabEx Daily. Siga los pasos siguientes para completar este paso:

1. Abra el archivo css/style.css en su editor de código.
2. Agregue la siguiente regla CSS después de /* TODO */ para ajustar el estilo del encabezado:

/* header */
.headerbox {
  height: 78px;
  background-color: white;
}

.navbox {
  padding: 23px;
}

.navbox h1 {
  color: #0099f2;
  float: left;
}

.navright {
  float: right;
}

.on {
  display: inline-block;
  width: 120px;
  height: 32px;
  color: #0099f2;
  background-color: #f0f9ff;
  line-height: 32px;
  text-align: center;
}

.on + a {
  display: inline-block;
  width: 120px;
  height: 32px;
  color: black;
  line-height: 32px;
  text-align: center;
}

Estas reglas CSS le dan estilo al encabezado, incluyendo el logotipo de LabEx Daily, el botón "Descargar APP" y su efecto al pasar el cursor.

Dar estilo al banner

En este paso, aprenderás cómo dar estilo a la sección del banner de la página de inicio de LabEx Daily. Siga los pasos siguientes para completar este paso:

1. Abra el archivo css/style.css en su editor de código.
2. Agregue las siguientes reglas CSS al archivo css/style.css:

/* banner */
.banner {
  position: relative;
  overflow: hidden;
  height: 460px;
  background-color: #008bed;
}

.container {
  width: 964px;
  height: 430px;
  position: absolute;
  bottom: 0px;
  padding: 30px 30px 0px 30px;
}

.container img {
  width: 409px;
  position: absolute;
  bottom: -15px;
}

.content {
  width: 43%;
  padding-top: 100px;
  float: right;
}

.content h2 {
  color: #fdfdfd;
  font-size: 40px;
  line-height: 40px;
  padding-bottom: 10px;
}

.info {
  width: 100%;
  font-size: 16px;
  line-height: 26px;
  color: #99d1f8;
}

Estas reglas CSS le dan estilo a la sección del banner, incluyendo el color de fondo, la colocación de la imagen del teléfono y el área de contenido con el título y la descripción.

Dar estilo al título de pestaña

En este paso, aprenderás cómo dar estilo a la sección del título de pestaña de la página de inicio de LabEx Daily. Siga los pasos siguientes para completar este paso:

1. Abra el archivo css/style.css en su editor de código.
2. Agregue las siguientes reglas CSS al archivo css/style.css:

/* tabtitle */
.tabtitle {
  width: 960px;
  height: 100px;
  padding-left: 32px;
  padding-right: 32px;
  background-color: rgb(249, 249, 249);
}

.tabtitle h3 {
  line-height: 100px;
  font-size: 24px;
  font-weight: 400;
  color: #000;
  float: left;
}

.tabtitle h4 {
  line-height: 100px;
  font-weight: 500;
  font-size: 24px;
  color: #cccccc;
  float: right;
}

Estas reglas CSS le dan estilo a la sección del título de pestaña, incluyendo el color de fondo, la colocación del texto "Explorar contenido" y "Contenido reciente" y sus respectivos estilos.

Dar estilo a la lista de noticias

En este paso, aprenderás cómo dar estilo a la sección de la lista de noticias de la página de inicio de LabEx Daily. Siga los pasos siguientes para completar este paso:

1. Abra el archivo css/style.css en su editor de código.
2. Agregue las siguientes reglas CSS al archivo css/style.css:

/* list */
.list {
  position: relative;
  background-color: rgb(249, 249, 249);
  height: 1718px;
  padding-bottom: 30px;
}

.list ul {
  list-style: none;
}

.list li {
  margin-left: 30px;
  margin-bottom: 20px;
  padding-top: 20px;
  float: left;
  background-color: white;
}

.list img {
  display: block;
  margin-top: 20px;
  width: 260px;
  height: 260px;
  margin: auto;
}

.list a {
  display: block;
  width: 300px;
  height: 374px;
}

.list p {
  width: 260px;
  font-size: 14px;
  line-height: 25px;
  color: #333333;
  margin: auto;
}

.more {
  position: absolute;
  bottom: 30px;
  width: 960px;
  height: 62px;
  left: 32px;
  background-color: #e8eef2;
  text-align: center;
}

.more a {
  display: block;
  width: 100%;
  line-height: 62px;
  font-size: 20px;
  color: #59abdf;
}

Estas reglas CSS le dan estilo a la sección de la lista de noticias, incluyendo la disposición de los elementos de noticias, el tamaño y la colocación de la imagen, los estilos de texto y el botón "Echa un vistazo a más en la app!" en la parte inferior.

Dar estilo al pie de página

En este último paso, aprenderás cómo dar estilo a la sección del pie de página de la página de inicio de LabEx Daily. Siga los pasos siguientes para completar este paso:

1. Abra el archivo css/style.css en su editor de código.
2. Agregue las siguientes reglas CSS al archivo css/style.css:

/* footer */
.footer {
  height: 265px;
  background-color: #e5e5e5;
}

.footerBox {
  width: 960px;
  padding: 32px;
}

.footerL {
  width: 710px;
  height: 210px;
  float: left;
}

.footerL p {
  font-size: 14px;
  line-height: 25px;
  margin-bottom: 15px;
  color: #000;
}

.footerR {
  float: right;
  text-align: center;
}

.footerR img {
  width: 141px;
  height: 152px;
}

Estas reglas CSS le dan estilo a la sección del pie de página, incluyendo el color de fondo, la disposición de las secciones izquierda y derecha, los estilos de texto y la colocación de la imagen del código QR.

¡Felicitaciones! Has terminado ahora el estilo de la página de inicio de LabEx Daily. Ahora puedes abrir el archivo index.html en tu navegador web para ver el resultado final.

Resumen

¡Felicitaciones! Has completado este proyecto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.