También se entregó la nota definitiva del periodo 1, saqué 86.
A continuación, un ejercicio que realicé:
Algunas propiedades de display en CSS:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display</title>
</head>
<style>
pre{display: inline;}
.floating-box {
float: left;
width: 150px;
height: 75px;
margin: 10px;
border: 3px solid #73AD21;
}
.after-box {
clear: left;
border: 3px solid red;
}
</style>
<body>
<pre>Hola</pre>
<pre>como</pre>
<pre>asfsadgsdfsf.</pre>
<pre>adios</pre>
<pre>ok</pre>
<p style="display: list-item; margin-left: 2em">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p style="display: list-item; margin-left: 2em">Sed non sem quis tellus vulputate lobortis.</p>
<p style="display: list-item; margin-left: 2em">Vivamus fermentum, tortor id ornare ultrices, ligula ipsum tincidunt pede, et blandit sem pede suscipit pede.</p>
<!-- crea cajas que son de bloque y en línea de forma simultánea. Una caja de tipo inline-block se comporta como si fuera de bloque, pero respecto a los elementos que la rodean es una caja en línea. -->
<div class="floating-box">Caja flotante</div>
<div class="floating-box">Caja flotante</div>
<div class="floating-box">Caja flotante</div>
<div class="floating-box">Caja flotante</div>
<div class="floating-box">Caja flotante</div>
<div class="floating-box">Caja flotante</div>
<div class="floating-box">Caja flotante</div>
<div class="floating-box">Caja flotante</div>
<div class="after-box">Otra caja</div>
</body>
</html>
Publicar un comentario