Diseño adaptable con barra lateral

Introducción

En este laboratorio, exploraremos el mundo de la programación CSS. El objetivo principal de este laboratorio es proporcionar experiencia práctica en la creación de un diseño adaptable con una barra lateral. Al final de este laboratorio, tendrás una mejor comprensión de cómo utilizar las propiedades display: grid y minmax() para crear un diseño efectivo y visualmente atractivo.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/AdvancedLayoutGroup(["Advanced Layout"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/colors("Colors") css/BasicStylingGroup -.-> css/text_styling("Text Styling") css/CoreLayoutGroup -.-> css/margin_and_padding("Margin and Padding") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/CoreLayoutGroup -.-> css/display_property("Display Property") css/AdvancedLayoutGroup -.-> css/grid_layout("Grid Layout") css/IntermediateStylingGroup -.-> css/backgrounds("Backgrounds") subgraph Lab Skills css/selectors -.-> lab-35234{{"Diseño adaptable con barra lateral"}} css/colors -.-> lab-35234{{"Diseño adaptable con barra lateral"}} css/text_styling -.-> lab-35234{{"Diseño adaptable con barra lateral"}} css/margin_and_padding -.-> lab-35234{{"Diseño adaptable con barra lateral"}} css/width_and_height -.-> lab-35234{{"Diseño adaptable con barra lateral"}} css/display_property -.-> lab-35234{{"Diseño adaptable con barra lateral"}} css/grid_layout -.-> lab-35234{{"Diseño adaptable con barra lateral"}} css/backgrounds -.-> lab-35234{{"Diseño adaptable con barra lateral"}} end

index.html y style.css ya se han proporcionado en la máquina virtual.

Para crear un diseño adaptable con una área de contenido y una barra lateral, use display: grid en el contenedor padre, minmax() para la segunda columna (barra lateral) para permitir que ocupe entre 150px y 20%, y 1fr para la primera columna (contenido principal) para ocupar el resto del espacio restante. Aquí hay un ejemplo de código HTML y CSS:

<div class="container">
  <main>This element is 1fr large.</main>
  <aside>Min: 150px / Max: 20%</aside>
</div>

.container {
  display: grid;
  grid-template-columns: 1fr minmax(150px, 20%);
  height: 100px;
}

main,
aside {
  padding: 12px;
  text-align: center;
}

main {
  background: #d4f2c4;
}

aside {
  background: #81cfd9;
}

Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Resumen

¡Felicidades! Has completado el laboratorio de Diseño adaptable con barra lateral. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.