Diseño de página web CSS

Diseño web

El diseño web tiene muchas formas, generalmente se divide en las siguientes partes:Área de encabezado, área de menú de navegación, área de contenido, área de pie de página。

Área de encabezado

El área de encabezado se encuentra en la parte superior de toda la página web y generalmente se utiliza para establecer el título de la página o el logotipo de la página:

Ejemplos de CSS3

.header { background-color: #F1F1F1; text-align: center; padding: 20px; }

Pruébalo »

Área de menú de navegación

La barra de menú de navegación contiene algunos enlaces que pueden guiar a los usuarios a navegar por otras páginas:

Ejemplos de CSS3

/*Barra de navegación*/ .topnav { overflow: hidden; background-color: #333; } /*Enlaces de navegación*/ .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; } /*Enlace: modificar color*/ .topnav a:hover { background-color: #ddd; color: black; }

Pruébalo »

Área de contenido

El área de contenido generalmente tiene tres formas:

  • 1 columna: generalmente se usa para dispositivos móviles
  • 2 columnas: generalmente se usa para tablets
  • 3 columnas: generalmente se usa para PC de escritorio

Crearemos un diseño de 3 columnas que se convertirá en un diseño de 1 columna en pantallas pequeñas (responsivo):

Ejemplos de CSS3

/*Crear tres columnas iguales*/ .column { float: left; width: 33.33%; } /*Limpiar flotadores después de las columnas*/ .row:after { content: ""; display: table; clear: both; } /*Diseño responsivo: cuando sea menor de 600 px, cambiar a diseño vertical*/ @media screen and (max-width: 600px) { .column { width: 100%; } }

Pruébalo »

Consejo:Para establecer dos columnas, puedes configurar el ancho (width) al 50%. Para crear 4 columnas, puedes configurarlo al 25%.

Consejo:Si deseas obtener más información sobre las reglas @media, puedes consultarConsultas de medios CSS3。

Consejo:Ahora la forma más avanzada es usar CSS Flexbox para crear el diseño de columnas, pero Internet Explorer 10 y versiones anteriores no admiten este método; IE6-10 puede usar el método de flotación.

Puedes ver más contenido sobre CSS Flexbox enCSS3 Caja flexible (Flex Box)。

Columnas desiguales

Las columnas desiguales generalmente colocan el área de contenido en la parte central, que es la más grande e importante; los lados izquierdo y derecho pueden usarse para contenido relacionado, como navegación. El ancho total de estas tres columnas es del 100%.

Ejemplos de CSS3

.column { float: left; } /*Ancho de las barras laterales izquierda y derecha*/ .column.side { width: 25%; } /*Ancho de la columna central*/ .column.middle { width: 50%; } /*Diseño responsivo: cuando el ancho sea menor de 600px, establece un diseño vertical*/ @media screen and (max-width: 600px) { .column.side, .column.middle { width: 100%; } }

Pruébalo »

Área de pie de página

El área de pie de página se encuentra en la parte inferior de la página web y generalmente contiene información de derechos de autor e información de contacto, etc.

Ejemplos de CSS3

.footer { background-color: #F1F1F1; text-align: center; padding: 10px; }

Pruébalo »

Diseño web responsivo

Con lo aprendido anteriormente, creemos una página responsiva; el diseño de la página se ajustará según el tamaño de la pantalla:

Ejemplos de CSS3

* { box-sizing: border-box; } body { font-family: Arial; padding: 10px; background: #f1f1f1; } /*Título del encabezado*/ .header { padding: 30px; text-align: center; background: white; } .header h1 { font-size: 50px; } /*Barra de navegación*/ .topnav { overflow: hidden; background-color: #333; } /*Enlaces de barra de navegación*/ .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; } /*Modificar color de enlaces*/ .topnav a:hover { background-color: #ddd; color: black; } /*Crear dos columnas*/ /* Left column */ .leftcolumn { float: left; width: 75%; } /*Barra lateral derecha*/ .rightcolumn { float: left; width: 25%; background-color: #f1f1f1; padding-left: 20px; } /*Sección de imagen*/ .fakeimg { background-color: #aaa; width: 100%; padding: 20px; } /*Efecto de tarjeta de artículo*/ .card { background-color: white; padding: 20px; margin-top: 20px; } /*Limpiar flotadores después de las columnas*/ .row:after { content: ""; display: table; clear: both; } /*Pie de página*/ .footer { padding: 20px; text-align: center; background: #ddd; margin-top: 20px; } /*Diseño responsivo: cuando el tamaño de pantalla sea menor de 800px, el diseño de dos columnas cambia a diseño vertical*/ @media screen and (max-width: 800px) { .leftcolumn, .rightcolumn { width: 100%; padding: 0; } } /*Diseño responsivo: cuando el tamaño de pantalla sea menor de 400px, la navegación y otros diseños cambian a diseño vertical*/ @media screen and (max-width: 400px) { .topnav a { float: none; width: 100%; } }

Pruébalo »
Otras extensiones