Imágenes de fondo

<div id="prueba">

</div>

<div id="test">

</div>
<div id="test2">

</div>

<ul>
<li><h1>Hola que tal estamos</h1></li>
<li><h1>Hola que tal estamos</h1></li>
<li><h1>Hola que tal estamos</h1></li>
<li><h1>Hola que tal estamos</h1></li>
</ul>

#prueba{
width:500px;
height:400px;
border: solid 2px grey;
background-image:url("img/smile.png"),url("img/textura.jpg");
background-position:right BOTTOM, left top;
background-repeat:no-repeat;
background-size: auto,cover;
}

#test{
width:500px;
height:200px;
border: solid 2px blue;
background-image:url("img/perro.jpg");
background-size: cover;
background-repeat:no-repeat;
}
#test2{
width:200px;
height:500px;
border: solid 2px blue;
background-image:url("img/perro.jpg");
background-size: cover;
background-repeat:no-repeat;
background-position:right bottom;
}
li{
display:inline-block;
width:150px;
height:150px;
border: solid 4px orange;
background-image:url("img/perro.jpg");
background-size: cover;
background-repeat:no-repeat;
}

li:nth-child(2){
background-image:url("img/smile.png");
}

Pseudoclases y pseudoelementos

<div id="cabecera">
<h1>Hola que tal</h1>
<p>Yo estoy muy bien gracias</p>
</div>
<p>Hola</p><p>Hola</p><p>Hola</p><p>Hola</p><p>Hola</p><p>Hola</p>

h1:hover{
color:red;
}
h1::before{
content:”- “;
}
h1::selection{
background-color:yellow;
}
h1:hover + p{
display:block;
}

h1 + p{
display:none;
}
p:before{
content:url(“img/smile.png”);
}
p::after{
content:” (–) “;
}

Más sobre posiciones

<h1>Pruebas posiciones</h1>
<div class="relative">Elemento con posición relativa
 
 <div id="rb">Hola que tal estamos yo estoy muy bien</div>
 <div id="lb"></div>
 <div id="lt"></div>
 <div id="rt"></div>
 <div id="center"><p>A</p></div>
</div>
.relative {
 position: relative;
 width: 400px;
 height: 200px;
 border: 3px solid #73AD21;
} 
#rb,#lb,#rt,#lt,#center{
 position:absolute;
 width:50px;
 height:50px;
 border:solid 2px blue;
 margin:0;
}
#rb{
 right:0;
 bottom:0;
 border:solid 2px blue;
}
#lb{
 left:0;
 bottom:0;
 border:solid 2px green;
}
#rt{
 right:0;
 top:0;
 border:solid 2px yellow;
}
#lt{
 left:0;
 top:0;
 border:solid 2px red;
}
#center{
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 margin: auto;
 border:dotted 2px black;
 text-align:center;
}

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>