Un sitio web se puede dividir en varias secciones que comprenden encabezado, menús, contenido y pie de página, según los cuales hay muchos diseños de diseño diferentes disponibles para el desarrollador. Se pueden crear diferentes diseños usando la etiqueta div y usar la propiedad CSS para darle estilo.
La estructura más común del diseño del sitio web se muestra a continuación:
Aviso: la sección de encabezado contiene un logotipo del sitio web, una barra de búsqueda y un perfil de usuario. El menú de navegación contiene enlaces a varias categorías de artículos disponibles y la sección de contenido se divide en 3 partes (columnas) con barras laterales izquierda y derecha que contienen enlaces a otros artículos y anuncios, mientras que la sección de contenido principal es la que contiene este artículo, luego en la parte inferior hay una sección de pie de página que contiene direcciones, enlaces, contactos, etc.
Sección de encabezado: la sección de encabezado generalmente se coloca en la parte superior del sitio web o justo debajo de un menú de navegación superior. A menudo se compone del nombre del sitio web o del logotipo del sitio web.
Ejemplo:
html
<!-- This code describes the header section
of website layout -->
<!DOCTYPE html>
<html>
<head>
<title>
Website Layouts
</title>
<style>
.header {
background-color: green;
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<div class = "header">
<h2 style = "color:white;">
GeeksforGeeks
</h2>
</div>
<br>
<center style="font-size:200%;">
Remaining Section
</center>
</body>
</html>
Producción:
Menú de navegación: una barra/menú de navegación es básicamente una lista de enlaces que permite a los visitantes navegar cómodamente por el sitio web con fácil acceso.
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
Website Layout
</title>
<style>
/* CSS property for header section */
.header {
background-color: green;
padding: 15px;
text-align: center;
}
/* CSS property for navigation menu */
.nav_menu {
overflow: hidden;
background-color: #333;
}
.nav_menu a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.nav_menu a:hover {
background-color: white;
color: green;
}
</style>
</head>
<body>
<!-- header of website layout -->
<div class = "header">
<h2 style = "color:white;font-size:200%;">
GeeksforGeeks
</h2>
</div>
<!-- navigation menu for website layout -->
<div class = "nav_menu">
<a href = "#">Algo</a>
<a href = "#">DS</a>
<a href = "#">Language</a>
</div><br>
<center style = "font-size:200%;">
Remaining Section
</center>
</body>
</html>
Producción:
Sección de contenido: La sección de contenido es el cuerpo principal del sitio web. El usuario puede dividir la sección de contenido en un diseño de n columnas.
Los diseños más comunes son:
- Diseño de 1 columna: se utiliza principalmente para el diseño móvil.
- Diseño de 2 columnas: el diseño de este sitio web se usa principalmente para tabletas o computadoras portátiles.
- Diseño de 3 columnas: el diseño de este sitio web se usa principalmente para computadoras de escritorio.
El usuario también puede crear un diseño receptivo donde el diseño se cambiará según el tamaño de la pantalla. Considere el siguiente ejemplo en el que si el ancho de la pantalla es superior a 600 px, habrá un diseño de 3 columnas y si el ancho de la pantalla está entre 400 px y 600 px, habrá un diseño de 2 columnas y si el tamaño de la pantalla es inferior a 400 px, entonces 1 columna. se mostrará el diseño.
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
Website Layout
</title>
<style>
* {
box-sizing: border-box;
}
/* CSS property for header section */
.header {
background-color: green;
padding: 15px;
text-align: center;
}
/* CSS property for navigation menu */
.nav_menu {
overflow: hidden;
background-color: #333;
}
.nav_menu a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.nav_menu a:hover {
background-color: white;
color: green;
}
/* CSS property for content section */
.columnA, .columnB, .columnC {
float: left;
width: 31%;
padding: 15px;
text-align:justify;
}
h2 {
color:green;
text-align:center;
}
/* Media query to set website layout
according to screen size */
@media screen and (max-width:600px) {
.columnA, .columnB, .columnC {
width: 50%;
}
}
@media screen and (max-width:400px) {
.columnA, .columnB, .columnC {
width: 100%;
}
}
</style>
</head>
<body>
<!-- header of website layout -->
<div class = "header">
<h2 style = "color:white;font-size:200%">
GeeksforGeeks
</h2>
</div>
<!-- navigation menu of website layout -->
<div class = "nav_menu">
<a href = "#">Algo</a>
<a href = "#">DS</a>
<a href = "#">Language</a>
</div>
<!-- Content section of website layout -->
<div class = "row">
<div class = "columnA">
<h2>Column A</h2>
<p>Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.</p>
</div>
<div class = "columnB">
<h2>Column B</h2>
<p>Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.</p>
</div>
<div class = "columnC">
<h2>Column C</h2>
<p>Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.</p>
</div>
</div>
</body>
</html>
Salida:
el ancho del tamaño de la pantalla es mayor que 700 px:
El ancho del tamaño de la pantalla es mayor de 400 px y menor de 600 px:
El ancho del tamaño de la pantalla es inferior a 400 px:
Sección de pie de página: se coloca una sección de pie de página en la parte inferior de la página web y generalmente consta de información como información de contacto, derechos de autor, Acerca de nosotros, etc.
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS Website Layout
</title>
<style>
/* Style for footer section */
.footer {
background-color: green;
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<center style = "font-size:200%;">
Upper section
</center>
<!-- footer Section -->
<div class = "footer">
<a href = "#">About</a><br>
<a href = "#">Career</a><br>
<a href = "#">Contact Us</a>
</div>
</body>
</html>
Producción:
Navegador compatible:
- Google Chrome
- explorador de Internet
- Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por piyushpilaniya98 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA