enero 2018 – Página 3 – Trifulcas

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:” (–) “;
}

Lenguajes web en lado del servidor

https://w3techs.com/technologies/overview/programming_language/all

https://w3techs.com/technologies/overview/javascript_library/all

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;
}

Película mp4