Diseño de sitio web CSS Layout
CSS Tutorial » Diseño de caja flexible CSS3
Un sitio web se puede dividir en varias secciones que comprenden encabezado, menús, contenido y pie de página en función de 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.
Un sitio web a menudo se divide en encabezados, menús, contenido y pie de página:
La estructura más común del diseño del sitio web se muestra a continuación:
Hay toneladas de diseños de diseño diferentes para elegir. Sin embargo, la estructura anterior es una de las más comunes y la veremos más de cerca en este tutorial.
Sección de encabezado Header Layout
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.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Diseño de sitio web CSS</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
}/*Estilo del encabezado */
.header {
background-color: #f1f1f1;
padding: 20px;
text-align: center;
margin: 6px;
}
</style>
</head>
<body><div class="header">
<h1>Header - Encabezado</h1>
</div></body>
</html>
Etiquetas: Diseño de sitio web CSS Layout, CSS Website Layout, plantillas de diseño css, generador de diseño css, tipos de diseño css, diseño de cuadrícula css, ejemplos de diseño de sitios web, códigos de diseño html para sitios web, diseño del sitio web html, plantillas de diseño html
Menú de Navegación
Una barra / menú de navegación es básicamente una lista de enlaces que permite al visitante navegar cómodamente por el sitio web con fácil acceso.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Diseño de sitio web CSS</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}body {
margin: 4px;
}/* Style the header */
.header {
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}/* Style the top navigation bar */
.topnav {
overflow: hidden;
background-color: #333;
margin-top: 6px;
}/* Style the topnav links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
text-decoration: none;
width: 40px;
padding-top: 14px;
padding-right: 16px;
padding-bottom: 14px;
padding-left: 16px;
}/* Change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
</style>
</head>
<body><div class="header">
<h1>Header - Encabezado</h1>
</div><div class="topnav">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div></body>
</html>
Contenido Layout
El diseño en esta sección, a menudo depende de los usuarios de destino. El diseño más común es uno (o combinarlos) de los siguientes:
- 1-column (usado a menudo para navegadores móviles)
- 2-column (usado a menudo para tabletas y computadoras portátiles)
- 3-column layout (solo se usa para computadoras de escritorio)
<!DOCTYPE html>
<html lang="es">
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}body {
margin: 4px;
}/* Style the header */
.header {
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}/* Style the top navigation bar */
.topnav {
overflow: hidden;
background-color: #333;
}/* Style the topnav links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
text-decoration: none;
width: 46px;
padding-top: 14px;
padding-right: 16px;
padding-bottom: 14px;
padding-left: 16px;
}/* Change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 31%;
padding: 1%;
}
.row {
content: "";
display: table;
clear: both;
margin-right: auto;
margin-left: auto;
}
/* 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 */
@media screen and (max-width:600px) {
.column {
width: 100%;
}
}
</style>
</head>
<body><div class="header">
<h1>Header</h1>
<p>Resize the browser window to see the responsive effect.</p>
</div><div class="topnav">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div><div class="row">
<div class="column">
<h2>Column</h2>
<p>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.</p>
</div>
<div class="column">
<h2>Column</h2>
<p>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.</p>
</div>
<div class="column">
<h2>Column</h2>
<p>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.</p>
</div>
</div></body>
</html>
Footer, Sección de 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:
<!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>
Etiquetas: Diseño de sitio web CSS Layout, CSS Website Layout, plantillas de diseño css, generador de diseño css, tipos de diseño css, diseño de cuadrícula css, ejemplos de diseño de sitios web, códigos de diseño html para sitios web, diseño del sitio web html, plantillas de diseño html
Diseño de sitio web CSS Layout - css.es
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.