Autor: Juan Pablo Fuentes

Formador de programación y bases de datos

Posición fija y absoluta

<h1 id="fijo">Esto está fijo</h1>
<h1 id="absoluto">Esto es absoluto</h1>
<h1>Hola que tal</h1>
<h1>Hola que tal</h1>
<h1>Hola que tal</h1>
<h1>Hola que tal</h1>
<h1>Hola que tal</h1>
<h1>Hola que tal</h1>
<h1>Hola que tal</h1>
<h1>Hola que tal</h1>
<h1>Hola que tal</h1>
<h1>Hola que tal</h1>
<h1>Hola que tal</h1>
<h1>Hola que tal</h1>
<h1>Hola que tal</h1>
<h1>Hola que tal</h1>
<h1>Hola que tal</h1>
<h1>Hola que tal</h1>
#fijo{
 position:fixed;
 width:200px;
 border:solid 2px red;
 right:100px;
 top:10px;
}
#absoluto{
 position:absolute;
 width:200px;
 border: 2px solid red;
 right:100px;
 top:10px;
}

 

Ejemplo estilos listas inline-block

<ul>
<li><iframe name="iframe1" src="http://trifulcas.com"></iframe></li>
<li><iframe name="iframe2" src="http://sport.com"></iframe></li>
<li><iframe name="iframe3" src="http://bcn.com"></iframe></li>
</ul>
<ul>
<li><a href="http://sport.com" target="iframe1">Sport</a></li>
<li><a href="http://trifulcas.com" target="iframe2">Trifulcas</a></li>
<li><a href="http://sport.com" target="iframe3">Sport</a></li>
</ul>
iframe{
 border:0;
}
li{
 display:inline-block;
 width:200px;
 border: solid 1px grey;
}
li iframe{
 width:200px;
}

Layout semántico

html

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="divs.css">

</head>

<body>

<header><h1>El mundo de los perros</h1>
</header>
<main>
<aside>
<ul>
<li><a href="#">Galería</a></li>
<li><a href="#">Artículos</a></li>
<li><a href="#">Tienda</a></li>
<!--
<li><a href="#">Contacto</a></li>
-->
</aside>
<section><br/>
<h1>Bienvenido a la página sobre el mejor amigo del hombre</h1>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing 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 cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</section>
</main>
<footer >(C) Netmind 2017</footer>
</body>

</html>

css

header{
 background-color:#173e43;
 height:200px;
 padding:20px;
}
header h1{
 color:rgba(255,0,0,.6);
 font-size:80px;
}
aside{
 background-color:#fae596 ;
 height:600px;
 width:20%;
 float:right;
}
section{
 background-color:#dddfd4;
 height:600px;
}
footer{
 background-color:#3fb0ac;
 height:100px;
}

Mini layout

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>

<body>

<div style=”background-color:blue;height:200px”>título
</div>
<div>
<div style=”background-color:orange;height:600px;width:20%;float:right”>Barra</div>
<div style=”background-color:#BBBBBB;height:600px”>Contenido</div>
</div>
<div style=”background-color:blue;height:100px”>Pie</div>
</body>

</html>