Se debe crear una carpeta principal y dentro de ella 3 subcarpetas: styles - imagenes - index.html
index.html
| <!DOCTYPE html> | |
| <html lang="es"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="keywords"content="pagina,html,css3,maquetacion"> | |
| <meta name="description" content="pagina web con styles css3"> | |
| <title> Pagina Web maquetacion</title> | |
| <link rel="stylesheet" type="text/css" href="css/styles.css"> | |
| </head> | |
| <body> | |
| <section id="contenedor"> | |
| <header> | |
| <h1><img src=""alt="logo.png"></h1> | |
| </header> | |
| <section id="banner"> | |
| </section> | |
| <section id="banner1"> | |
| <article id="banner11"></article> | |
| <article id="banner12"></article> | |
| <article id="banner13"> | |
| <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod | |
| tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, | |
| quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo | |
| consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse | |
| cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat </p></article> | |
| <div class="espacio"></div> | |
| </section> | |
| <footer> | |
| </footer> | |
| </section> | |
| </body> | |
| </html> |
/* AHORA NOS VAMOS A LOS ESTILOS ......*/
body
{
background: #1EB0D7;
font-family: Tahoma;
font-size: 11px;
width: 1200px;
margin: auto;
}
/*ESTILOS PARA LA IMAGEN DE ARRIBA*/
#logo
{
background: url(../img/trabajadores.png) no-repeat right;
background-size: 35%;
/*Agregaremos un padding*/
padding: 20em 0em 0em 0em;
text-transform: uppercase;
}
/*Estilo para la Etiqueta "a" incluida en H1*/
#logo h1 a
{
margin: 0em;
padding: 0em 0em 0em 0em;
letter-spacing: -.1em;
text-decoration: none;
font-size: 2em;
font-weight: bold;
color: #fff;
}
/*Estilo para el subtitulo "BIENVENIDO A NUESTRO SITIO"*/
#subtitulo
{
padding: 0em;
margin-top: -1em;
font-size: 2em;
/*AHORA SI COPILA...*/
font-weight: bold;
color: #BDF2FF;
}
/*Estilo para los elementos de la lista del menu*/
#menu li
{
/*AHORA LOS BOTONES SE VISUALIZAN EN BLOQUES*/
display: inline-block;
}
/*Estilo para los elementos de la lista del Menu*/
#menu li
{
display: block;
float: left;
margin-right: 0.12em;
padding: 1em 1.5em;
/*VA QUEDANDO...*/
/*COMO VEMOS, SE GENERO UN CUADRO PARA LOS BOTONES*/
background: #178EAE;
/*DAMOS UNA SOMBRITA A LOS BOTONES*/
box-shadow: inset 0px -2px 0px 0px rgba(0,0,0,0.25);
text-decoration: none;
/*UNA SOBRA PARA EL TEXTO COMO SE VISUALIZA*/
text-shadow: 1px 1px 0px #0C749C;
text-transform: uppercase;
font-size: .90em;
color: #FFF;
}
/*Estilo para la seccion que muestra el contenido*/
#seccion
{
width: 1150px;
padding: 20px 40px;
background: #FFF;
height: 290px;
}
/*Estilo para la imagen que se encuentra dentro de la seccion*/
#imagen
{
margin-top: 0em;
width: 330px;
height: 250px;
text-align: center;
}
/*Estilo para el titulo dentro de la seccion*/
#subtitulo2
{
font-family: tahoma, Geneva, sans-serif;
font-size: 25px;
color: #039;
}
/*Estilo para el texto del lado derecho*/
#ladoderecho
{
margin: -5px 20px 0px 0px;
float: right;
width: 65%;
/* EL TEXT-ALIGN TE JUSTIFICA EL TEXTO CUAL LO AUTOMIZA AL LUGAR
CORRESPONDIDO ES DECIR UN FLOAT RIGHT, AL LADO DERECHO*/
text-align: justify;
color: #666;
}
/*ESTILO para el texto del pie del documento */
#pie{
text-align: center;
}
/*Estilo para todos los parrafos del documento*/
p{
font-family: tahoma;
font-size: 11pt;
}
/*BUENO ESO ES TODO, ESPERO QUE LES HAYA GUSTADO
ESTE TUTORIAL BÁSICO SOBRE MAQUETAR EN HTML5 Y CSS3*/
*{margin: 0; padding: 0;}
html{background-image: url("../img/fondo.jpg");}
body{
width:900px;
height: auto;
margin: auto;
}
header{ width:900px; height: 550px;
margin: auto;
background-color: black;
}
section{ width:900px; height: 200px;
margin: auto;
background-color: blue;
}
main{ width:900px; height: 600;
margin: auto;
background-color: black;
}
div#login{width:600px; height:200px;
float: left;
background-color: gray ;
}
article{
width:700px;
height:900px;
float: left;
background-color: lightgray;
}
article#art1{
width:700px;
height:900px;
float: left;
background-color: lightgray;
}
aside#right{width:200px; height:900px;
float: left;
background-color: yellow;
}
/*slider*/
#slider{
position: relative;
width:900px;
height:350px;
float: left;
background-color: #000;
margin: 0 auto;
}
#slider > div{
position: absolute;
width: 100px;
height: 100px;
}
footer{
width:900px;
height: 150px;
float: left;
background-color: blue;
position: relative;
margin:auto;
}
<!DOCTYPE html> <head lang="es"> <meta charset='utf-8'> <title>Seguridad informatica</title> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <link rel="stylesheet" href="stylesheet2.css"> <link rel="stylesheet" href="main.css"> </head> <body> <header> <section> </section> </header> <main> <div id="header"> </div> <article id="art1"> </article> <aside id="right"> </aside> </main> </body> <footer> </footer> </html>
