http___localhost_css4_ejer5.html


📖 Explicación de cómo funciona

La magia de flex: 1

css
.card-body {
    flex: 1;  /* ← Esta línea es la más importante */
}

¿Qué hace? Permite que el cuerpo de la tarjeta se expanda automáticamente para ocupar todo el espacio entre cabecera y pie.

Visualmente:

text
┌─────────────────┐
│    HEADER       │ ← Altura fija (40px)
├─────────────────┤
│                 │
│    BODY         │ ← Se EXPANDE automáticamente
│    (flex: 1)    │   para llenar el espacio
│                 │
├─────────────────┤
│    FOOTER       │ ← Altura fija (40px)
└─────────────────┘

Problemas en tu código actual

  1. Faltan estilos esenciales: .btn-ingresar, .rol-subtitulo, .stats-container no tienen CSS

  2. Error semántico: <button><a>Ingresar</a></button> no es válido

  3. Doble padding en .card-body: Primero padding:10px, luego padding:40px (el segundo anula al primero)

Cómo corregirlo (código que falta agregar)

css
/* Agrega esto al final del <style> */

.btn-ingresar {
    width: 100%;                /* Ancho completo */
    padding: 8px;               /* Espacio interno */
    background-color: #007bff;  /* Fondo azul */
    color: white;               /* Texto blanco */
    border: none;               /* Sin borde */
    border-radius: 6px;         /* Bordes redondeados */
    cursor: pointer;            /* Cursor de mano */
}

.rol-subtitulo {
    text-align: center;
    color: #28a745;
    font-size: 14px;
}

.stats-container {
    display: flex;
    gap: 10px;
}

.stat-item {
    flex: 1;
    text-align: center;
    background-color: #e9ecef;
    padding: 10px;
    border-radius: 8px;
}

.stat-number {
    font-size: 24px;
    font-weight: bold;
    color: #007bff;
}

.stat-label {
    font-size: 12px;
    color: #6c757d;
}

🧠 Método para aprender y memorizar

Técnica 1: La regla de "3-7-20"

  • 3 conceptos por día (no más, para no saturar)

  • 7 repeticiones de cada concepto (escritas a mano)

  • 20 minutos de práctica diaria

Técnica 2: Asociaciones visuales (mnemotecnia)

PropiedadAsociación para recordar
display: flex"Los hijos se vuelven flexibles como goma"
flex: 1"El 1 significa una porción del pastel"
flex-direction: column"Columna = apilar como ladrillos"
justify-content: center"Justificar = alinear como en Word"
align-items: stretch"Estirar como chicle"
gap: 20px"Gap = hueco entre dientes"
flex-shrink: 0"Shrink 0 = no se encoge, terco como una mula"

Técnica 3: El método de "caja de herramientas mental"

Divide el CSS en 5 cajas que debes memorizar:

text
📦 CAJA 1: RESET
   - margin:0, padding:0, box-sizing:border-box

📦 CAJA 2: CONTENEDOR PADRE
   - display:flex, justify-content:center, gap:20px

📦 CAJA 3: TARJETA
   - display:flex, flex-direction:column, width:300px

📦 CAJA 4: ESTRUCTURA INTERNA
   - header: height fijo + flex-shrink:0
   - body: flex:1
   - footer: height fijo

📦 CAJA 5: ESTILOS VISUALES
   - background, border-radius, box-shadow, padding

Técnica 4: Práctica de "copia y modifica"

Día 1: Escribe el reset y body (5 min)
Día 2: Añade .card-container1 con flex (5 min)
Día 3: Añade .card-tarjeta1 (5 min)
Día 4: Añade header y footer con alturas fijas (5 min)
Día 5: Añade .card-body con flex:1 (5 min)
Día 6: Añade botones y estilos visuales (5 min)
Día 7: Construye desde cero sin mirar (15 min)

Técnica 5: Preguntas de auto-evaluación

Cada día responde estas 3 preguntas:

  1. ¿Qué pasa si quito flex:1 del body? (Los footers quedan desalineados)

  2. ¿Qué pasa si cambias flex-direction a row? (Header, body, footer se ponen horizontales)

  3. ¿Por qué usamos flex-shrink:0 en header/footer? (Para que mantengan su altura aunque el body crezca)

Diagrama mental para recordar la estructura

text
CONTAINER (flex, center, gap)
    │
    ├── TARJETA (flex columna, 300px)
    │       ├── HEADER (fijo, no shrink)
    │       ├── BODY (flex:1 ← CLAVE!)
    │       └── FOOTER (fijo)
    │
    ├── TARJETA (igual)
    └── TARJETA (igual)

El truco final: escribe en papel

La memoria muscular es poderosa. Escribe este esquema a mano 5 veces:

text
flex container
├── display: flex
├── justify-content: center  
├── gap: 20px
└── align-items: stretch

flex item (card)
├── display: flex
├── flex-direction: column
├── width: 300px
└── hijo body: flex: 1

Repite esto cada mañana por 7 días y lo recordarás para siempre. 

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> <!-- Define la codificación UTF-8 para caracteres especiales como ñ, tildes -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Hace la página responsive en móviles -->
    <title>Document</title> <!-- Título que aparece en la pestaña del navegador -->
</head>
<style>
    /* ============================================================
       RESET UNIVERSAL - Elimina márgenes y paddings por defecto
       ============================================================ */
    * {
        margin: 0;                    /* Elimina el margen exterior de TODOS los elementos HTML */
        padding: 0;                  /* Elimina el relleno interior de TODOS los elementos HTML */
        box-sizing: border-box;      /* Hace que el ancho/alto incluyan padding y border, no solo el contenido */
        /* Ejemplo: si un div tiene width:100px y padding:10px, el ancho TOTAL sigue siendo 100px */
    }
    
    /* ============================================================
       ESTILOS DEL CUERPO DE LA PÁGINA
       ============================================================ */
    body {
        background-color: #f0f0f0;   /* Color gris claro de fondo para toda la página */
    }

    /* ============================================================
       CONTENEDOR PRINCIPAL DE TARJETAS (Flexbox)
       ============================================================ */
    .card-container1 {
        display: flex;               /* Activa Flexbox para organizar las tarjetas horizontalmente */
        justify-content: center;    /* Centra todas las tarjetas horizontalmente dentro del contenedor */
        margin-top: 20px;           /* Margen superior de 20px separa el contenedor del borde superior de la página */
        gap: 20px;                  /* Espacio de 20px ENTRE cada tarjeta (no en los bordes externos) */
        align-items: stretch;       /* Hace que TODAS las tarjetas tengan la MISMA altura (la del más alto) */
        /* stretch es el valor por defecto, pero lo escribimos para que quede claro */
    }

    /* ============================================================
       TARJETA INDIVIDUAL (cada una de las cards)
       ============================================================ */
    .card-tarjeta1 {
        background-color: white;    /* Fondo blanco para que contraste con el fondo gris del body */
        display: flex;              /* Activa Flexbox DENTRO de la tarjeta para organizar header/body/footer */
        flex-direction: column;    /* Organiza los hijos en columna (vertical: header arriba, body medio, footer abajo) */
        border-radius: 12px;        /* Bordes redondeados de 12px en las 4 esquinas */
        box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); /* Sombra: derecha 5px, abajo 5px, difuminado 5px, negro 10% opaco */
        width: 300px;               /* Ancho fijo de 300px para todas las tarjetas (se mantiene uniforme) */
        /* border: 5px solid bisque; */ /* Línea comentada: si la activas, verías un borde color crema para depurar */
    }

    /* ============================================================
       CABECERA DE LA TARJETA (parte superior)
       ============================================================ */
    .card-header {
        background-color: #f8f9fa;  /* Fondo gris muy claro (casi blanco) para la cabecera */
        text-align: center;         /* Centra el texto horizontalmente dentro de la cabecera */
        padding: 5px;               /* Espacio interno de 5px alrededor del contenido de la cabecera */
        border-bottom: 1px solid #dee2e6; /* Línea divisoria inferior gris de 1px separa header de body */
        height: 40px;               /* Altura fija de 40px para la cabecera (tamaño constante) */
        flex-shrink: 0;             /* EVITA que el header se encoja cuando falte espacio. Mantiene su altura original de 40px */
        /* Sin flex-shrink:0, si el contenido es muy grande, el header podría reducir su altura */
    }

    /* ============================================================
       CUERPO PRINCIPAL DE LA TARJETA (área que se expande)
       ============================================================ */
    .card-body {
        padding: 10px;              /* Espacio interno de 10px (se aplica primero) */
        flex: 1;                    /* ¡PROPIEDAD CLAVE! Hace que el body ocupe TODO el espacio disponible */
        /* Equivale a: flex-grow: 1, flex-shrink: 1, flex-basis: 0% */
        /* Esto significa que el body se estira para llenar el espacio entre header y footer */
        padding: 40px;              /* ESTA LÍNEA SOBRESCRIBE la anterior: cambia el padding a 40px */
        /* El padding final es 40px en lugar de 10px (la última declaración gana en CSS) */
    }

    /* ============================================================
       PIE DE TARJETA (parte inferior donde va el botón)
       ============================================================ */
    .card-footer {
        background-color: #f8f9fa;  /* Mismo color gris claro que el header para mantener consistencia */
        border-top: 1px solid #dee2e6; /* Línea divisoria superior gris de 1px separa body de footer */
        padding: 5px;               /* Espacio interno de 5px alrededor del contenido del footer */
        height: 40px;               /* Altura fija de 40px para el pie (igual que el header) */
    }

    /* ============================================================
       ESTILOS PARA ENLACES <a> (hipervínculos)
       ============================================================ */
    a {
        text-decoration: none;      /* Elimina el subrayado predeterminado que los navegadores ponen a los enlaces */
        color: black;               /* Cambia el color del enlace a negro (por defecto es azul con subrayado) */
    }

    /* ============================================================
       NOTA: Faltan estilos para:
       - .btn-ingresar (botón de ingreso)
       - .rol-subtitulo (subtítulo del rol)
       - .stats-container (contenedor de estadísticas)
       - .stat-item, .stat-number, .stat-label (elementos de estadísticas)
       
       Estos estilos NO ESTÁN DEFINIDOS en el CSS original.
       El navegador les aplicará estilos por defecto.
       
       Para que funcione correctamente, debes agregarlos.
       ============================================================ */
</style>
<body>

    <div class="card-container1">
        <!-- Tarjeta para Secretaria -->
        <div class="card-tarjeta1">
            <div class="card-header">
                <h3>Secretaria</h3> <!-- Título de la cabecera -->
            </div>
            <div class="card-body">
                <div class="rol-subtitulo">Inicie Sesión</div> <!-- Subtítulo sin estilos definidos -->
            </div>
            <div class="card-footer">
                <!-- Botón con estructura incorrecta: button contiene un a -->
                <button> 
                    <a href="login-doctor.php" class="btn-ingresar">Ingresar</a>
                </button>
                <!-- Problema: un <button> no debe contener un <a> (semánticamente incorrecto) -->
            </div>
        </div>

        <!-- Tarjeta de ejemplo simple (segunda tarjeta) -->
        <div class="card-tarjeta1">
            <div class="card-header">
                sotelo <!-- Texto simple -->
            </div>
            <div class="card-body">
                saul <!-- Texto simple -->
            </div>
            <div class="card-footer">
                suastegui <!-- Texto simple -->
            </div>
        </div>

        <!-- Tarjeta para Doctor -->
        <div class="card-tarjeta1">
            <div class="card-header">
                <h3>Doctor</h3>
            </div>
            <div class="card-body">
                <div class="rol-subtitulo">Inicie Sesión</div>
            </div>
            <div class="card-footer">
                <!-- Botón correcto con evento onclick -->
                <button class="btn-ingresar" onclick="alert('Acceso Doctor')">Ingresar</button>
            </div>
        </div>

        <!-- Tarjeta para Estadísticas -->
        <div class="card-tarjeta1">
            <div class="card-header">
                <h3>Estadísticas</h3>
            </div>
            <div class="card-body">
                <div class="stats-container">
                    <div class="stat-item">
                        <div class="stat-number">44</div>
                        <div class="stat-label">User Registrations</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-number">65</div>
                        <div class="stat-label">Unique Visitors</div>
                    </div>
                </div>
            </div>
            <div class="card-footer">
                <button class="btn-ingresar" onclick="alert('Acceso General')">Ingresar</button>
            </div>
        </div>

    </div>
    
</body>
</html>


Comentarios

Publicar un comentario

Entradas más populares de este blog

Tutorial de CSS: De Cero a Estilizar tu Primera Página Web

1. ¿Qué es CSS? CSS son las siglas de  Cascading Style Sheets  (Hojas de Estilo en Cascada). Es un lenguaje que usamos para describir la  presentación  de un documento escrito en HTML. Mientras que HTML se encarga de la estructura y el contenido (títulos, párrafos, imágenes), CSS se encarga de cómo se ve ese contenido (colores, fuentes, tamaños, posición). 2. ¿Cómo se integra CSS con HTML? Hay tres formas principales de incluir CSS en tu proyecto: CSS en línea (Inline):  Se aplica directamente a una etiqueta HTML usando el atributo  style . Es el método menos recomendado porque mezcla contenido con presentación y es difícil de mantener. html < p style = " color : blue ; font-size : 18px ; " > Este es un párrafo azul. </ p > CSS interno (Internal):  Se escribe dentro de la etiqueta  <style>  en la sección  <head>  del documento HTML. Es útil para páginas individuales o para hacer pruebas rápidas. html <...
Leer más

layouts

   "Explica el siguiente código HTML y CSS poniendo especial énfasis en: La maquetación de cajas : cómo se estructuran visualmente cada uno de los elementos (body, tarjeta, imagen, textos, botón). El flujo natural de las cajas : cómo se comportan los elementos en el flujo por defecto (elementos de bloque vs. en línea) y cómo se van posicionando unos respecto a otros. La agrupación de elementos : cómo se relacionan visualmente los elementos que están dentro de un mismo contenedor. La jerarquía padre-hijo : cómo afectan las propiedades del elemento padre a sus hijos directos e indirectos (herencia, contención, y cómo el espacio del padre condiciona el espacio de los hijos). f Tutorial: Creando una Plantilla de Registro HTML/CSS Objetivo del Proyecto Vamos a crear la estructura básica de una página web que contiene: Un menú de navegación con 4 opciones. Un formulario de registro de usuario. Estilos CSS para que todo se vea ordenado y profesional. Paso 1: Entendiendo la Estructura...
Leer más

Proyecto Práctico: Tarjeta de Perfil

"Explica el siguiente código HTML y CSS poniendo especial énfasis en: La maquetación de cajas : cómo se estructuran visualmente cada uno de los elementos (body, tarjeta, imagen, textos, botón). El flujo natural de las cajas : cómo se comportan los elementos en el flujo por defecto (elementos de bloque vs. en línea) y cómo se van posicionando unos respecto a otros. La agrupación de elementos : cómo se relacionan visualmente los elementos que están dentro de un mismo contenedor. La jerarquía padre-hijo : cómo afectan las propiedades del elemento padre a sus hijos directos e indirectos (herencia, contención, y cómo el espacio del padre condiciona el espacio de los hijos).    Creando una Tarjeta de Perfil con HTML y CSS Descripción del Proyecto Vamos a crear una tarjeta de perfil profesional que contiene: Foto de perfil circular Nombre de la persona Descripción breve Ubicación Botón interactivo con efectos Al final, tendremos una tarjeta moderna y responsive que se centra en la pa...
Leer más