Diseño del sitio web CSS
Diseño del sitio web
Un sitio web a menudo se divide en encabezados, menús, contenido y un pie de página:
Hay toneladas de diferentes diseños de diseño para elegir. Sin embargo, la estructura anterior es una de las más comunes y la veremos más de cerca en este tutorial.
Encabezamiento
Un encabezado generalmente se encuentra en la parte superior del sitio web (o justo debajo del menú de navegación superior). A menudo contiene un logotipo o el nombre del sitio web:
Ejemplo
.header {
background-color: #F1F1F1;
text-align:
center;
padding: 20px;
}
Resultado
Header
Barra de navegación
Una barra de navegación contiene una lista de enlaces para ayudar a los visitantes a navegar por su sitio web:
Ejemplo
/* The navbar container */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Navbar links */
.topnav a {
float:
left;
display: block;
color:
#f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Links - change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
Resultado
Contenido
El diseño de esta sección a menudo depende de los usuarios objetivo. El diseño más común es uno (o combinarlos) de los siguientes:
- 1 columna (a menudo se usa para navegadores móviles)
- 2 columnas (a menudo se usa para tabletas y computadoras portátiles)
- Diseño de 3 columnas (solo se usa para escritorios)
1 columna:
2 columnas:
3 columnas:
Crearemos un diseño de 3 columnas y lo cambiaremos a un diseño de 1 columna en pantallas más pequeñas:
Ejemplo
/* Create three equal columns that float next to each other */
.column {
float: left;
width: 33.33%;
}
/* Clear floats after the
columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive
layout - makes the three columns stack on top of each other instead of next
to each other on smaller screens (600px wide or less) */
@media screen and (max-width:
600px) {
.column
{
width: 100%;
}
}
Resultado
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
Sugerencia: para crear un diseño de 2 columnas, cambie el ancho al 50 %. Para crear un diseño de 4 columnas, use 25%, etc.
Consejo: ¿Te preguntas cómo funciona la regla @media? Obtenga más información al respecto en nuestro capítulo Consultas de medios de CSS .
Sugerencia: una forma más moderna de crear diseños de columnas es usar CSS Flexbox. Sin embargo, no es compatible con Internet Explorer 10 y versiones anteriores. Si necesita compatibilidad con IE6-10, use flotantes (como se muestra arriba).
Para obtener más información sobre el Módulo de diseño de caja flexible, lea nuestro capítulo CSS Flexbox .
Columnas desiguales
El contenido principal es la parte más grande e importante de su sitio.
Es común con anchos de columna desiguales , por lo que la mayor parte del espacio se reserva para el contenido principal. El contenido lateral (si lo hay) se usa a menudo como una navegación alternativa o para especificar información relevante para el contenido principal. Cambia los anchos a tu gusto, solo recuerda que debe sumar 100% en total:
Ejemplo
.column {
float: left;
}
/* Left and right column */
.column.side {
width: 25%;
}
/* Middle column */
.column.middle
{
width: 50%;
}
/* Responsive layout - makes
the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column.side, .column.middle
{
width: 100%;
}
}
Resultado
Side
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
Main Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
Side
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
Pie de página
El pie de página se coloca en la parte inferior de su página. A menudo contiene información como derechos de autor e información de contacto:
Ejemplo
.footer {
background-color: #F1F1F1;
text-align:
center;
padding: 10px;
}
Resultado
Diseño de sitio web receptivo
Al usar parte del código CSS anterior, hemos creado un diseño de sitio web receptivo, que varía entre dos columnas y columnas de ancho completo según el ancho de la pantalla:
¿Alguna vez has oído hablar de W3Schools Spaces ? Aquí puede crear su sitio web desde cero o utilizar una plantilla y alojarlo de forma gratuita.
Comience gratis ❯* No se requiere tarjeta de crédito