AgerNic.com
WEB DEVELOPER SITE, HTML, CSS, PHP, SQL
HTML Tutorial

Diseño de sitio web CSS Layout


Next Page >>
HTML images

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:

Encabezamiento - Header
Menú de Navegación - Navigation Menu
Contenido - Content
Contenido principal - Main Content
Contenido - Content
Footer

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.

Ejemplo

<!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.

Ejemplo

<!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:

Ejemplo

<!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:

Ejemplo
<!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

Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


1
Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


Send forgot password by mail or message ...
PHP MySQL simple login system...
Check for duplicate username live or ema...
How to create simple search engine using...
Diseño de sitio web CSS Layout...
Diseño de caja flexible CSS3...
Botones en CSS...
ID y Clase, Diferencias entre Class e Id...
Esquina redondeada CSS...
Tamaño de caja css box-sizing: border-b...
Alineación CSS...
Altura y Anchura CSS...
Bordes CSS...
Margen CSS...
Relleno CSS...
Modelo de caja CSS...
Tablas CSS...
Listas CSS...
Enlaces CSS...
Texto CSS...