• Author / Uploaded
• Marcos Lava Triviños

Citation preview

---

tutorial html y css | posicionamiento de divs en el contenedor general (basico) html









css *{ margin:0px; padding:0px; } div #general{ margin:auto; margin-top:50px; windth:960px; height:800px; background-color:red; } div #ofertas{ float:right; windth:300px; height:500px; background-color:green; } div #novedades{

windth:64px; height:200px; background-color:blue; } div #body{ margin-top:20px; windth:640px; height:580px; background-color:porple; }

Estructuras De Maquetación Con Html5 Y Css 1/3 HTML









CSS *{ margin:0; padding:0; } Html{ background-color:black; } Body{ width:750px; height:750px; margin:auto; background-color:pink; } header{ width:750px; height:250px; background-color:yellow; } nav{ width:750px; height: 50px; background-color:blue; } main{ width:750px; height:400px; background-color:green; } footer{ width:750px; height: 50px; background-color:orange; }

section#banner{ width:500px; height: 250px; float:left; background-color:red; } section#logo{ width:250px; height: 125px; float:left; background-color:gray; } section#login{ width:250px; height: 125px; float:left; background-color:magenta; } aside#left{ width:150px; height: 400px; float:left; background-color:purple; } article{ width:500px; height: 400px; float:left; background-color:lightblue; } aside#right{ width:100px; height: 400px; float:left; background-color:red; }

Estructuras De Maquetación Con Html5 Y Css 2/3 HTML









CSS *{ margin:0; padding:0; } Html{ background-color:black; } Body{ width:1000px; height:800px; margin:auto; background-color:pink; } header{ width:1000px; height:200px; background-color:blue;

section#logo{ width:200px; height: 200px; float:left; background-color:gold; } section#banner{ width:800px; height: 200px; float:left; background-color:yellow; }

} nav{ width:1000px; height: 50px; background-color:gray;

article{ width:700px; height: 500px; float:left; background-color:lightblue;

} main{ width:1000px; height:500px; background-color:orange; } footer{ width:1000px; height: 50px; background-color:magenta; }

} aside{ width:300px; height: 500px; float:left; background-color:lightgreen; }

Estructuras De Maquetación Con Html5 Y Css 3/3 HTML













section.box{ CSS width:200px; *{ margin:0; padding:0; } height: 100px; Html{ float:left; background-color:black; background-color:lightblue; } } Body{ width:1000px; section#banner{ height:950px; width:800px; margin:auto; height: 300px; background-color:pink; float:left; } background-color:blue; nav{ } width:1000px; section#login{ height: 100px; width:200px; background-color:gray; height: 100px; } float:left; header{ background-color:red; width:1000px; } height:300px; background-color:blue; aside#left{ } width:200px; main{ height: 500px; width:1000px; float:left; height:500px; background-color:magenta; background-color:orange; } } aside#right{ footer{ width:300px; width:1000px; height: 500px; height: 50px; float:left; background-color:lightgreen; background-color:red; } }

section#logo{ width:200px; height: 100px; float:left; background-color:orange; } section#form{ width:200px; height: 100px; float:left; background-color:purple; } article{ width:500px; height: 500px; float:left; background-color:gold; }

Maquetación con DIV y CSS HTML

HEADER NAV

SECTION ARTICULO 1 ARTICULO 2 ARTICULO 3 ARTICULO 4

ASIDE

FOOTER

CSS *{ margin:0; padding:0; } #contenedor{ width:1200px; height:1000px; background-color:pink; margin:0.5em auto; padding: 0.5em; } #header{ height:20%; background-color:gray; border-radius: 1em; margin:1em; padding: 0.5em; } #nav{ height:10%; background-color:blue; border-radius: 1em; margin:1em; padding: 0.5em; } #contenido{ height:50%; background-color:lightgreen; margin:1em; padding: 0.5em; } #footer{ height:7%; background-color:lightblue; border-radius: 1em; margin:1em; padding: 0.5em; }

Contenedor (1200 x 1000)

#section{ height:95%; width: 67%; background-color:orange; border-radius: 1em; float: left; margin:0.5em; padding: 0.5em; } #aside{ height:95%; width: 27%; background-color:orange; border-radius: 1em; float: right; margin:0.5em; padding: 0.5em; }

.articulo{ height:20%; width: 96%; background-color:lightblue; border-radius: 1em; margin:1em; }

Estructura Básica Pagina Web HTML 5 Y CSS3 HTML

Bienvenidos a nuestra Pagina WEB

Menus

Contenido

Publicidad

Pie de pagina



CSS *{ margin:0; padding:0; } body{ background-color:black; color: White; } #contenedor{ width:960px; margin: auto; margin-top: 20px; margin-bottom: 20px; background-color:pink; } #contenido{ width: 700px; height:500px; float: left; background-color:blue; margin-top: 10px; margin-right: 10px; margin-bottom: 10px; } aside{ width: 250px; height:500px; background-color:green; margin-top: 10px; float: right; } footer{ background-color:lightblue; clear: both; }

header{ height:150px; background-color:gray; } nav{

header h1{ font-size: 50px; text-align: center; line-height: 150px; } nav h2{

background-color:orange; height:60px;

font-size: 40px; text-align: center; line-height: 60px;

} } #contenido h2{ font-size: 40px; text-align: center; line-height: 500px; } aside h2{ font-size: 40px; text-align: center; line-height: 500px; } footer h2{ font-size: 40px; text-align: center; padding: 20px; font-style: italic; }

Estructura Básica Pagina Web HTML 5 Y CSS3 - MENU HTML

• Home
• Acerca
• Servicios
• Contacto

CSS #menu{ background-color: black; } #menu ul{ list-style: none; margin: 0; padding: 0; } #menu ul li{ display: inline-block; } #menu ul li a{ color: white; display: block; padding: 20px 20px; text-decoration: none; } #menu ul li a:hover{ background-color: #42B881; } .item-r{ float: right; }

Estructura o layout HTML

Cabecera

Menu

principal

Secundario

Pie de pagina



CSS *{ margin:0; padding:0; } body{ background-color:black; color: White; } #contenedor{ width:960px; background-color:gray; margin: auto; margin-top: 20px; margin-bottom: 20px; } #cabecera { height:150px; background-color:orange; } #menu { #contenido #principal { height:200px; height:100%; float: left; width: 80%; width: 200px; float: left; background-color:blue; background-color:yellow; } } #contenido { height:500px; #contenido #secundario { float: left; height:100%; width: 760px; width: 20%; background-color:green; float: left; } background-color:pink; #pie { } height:80px; clear: both; background-color:lightblue; }