Diseño de cajas usando Flex box
Ejemplos codigo html, css y javascript. Formato web y etiquetas HTML5.
Mostrando entradas con la etiqueta cajas. Mostrar todas las entradas
Mostrando entradas con la etiqueta cajas. Mostrar todas las entradas
miércoles, 28 de abril de 2021
sábado, 24 de septiembre de 2016
09 CSS Posicionamiento
Vemos en este video como posicionar distintos parrafos de nuestra web, metiendolos en "cajas", como se visualiza el parrafo si la caja donde esta contenido es de menor dimension al contenido en si, tambien vemos como sobreponemos unos encima de otros y los desplazamos a la posicion que deseamos.
El codigo HTML es:
El codigo CSS es:
Espero os sea util, no dejeis de practicar y probar opciones. Gracias.
El codigo HTML es:
<!doctype html>
<html lang="ES">
<head>
<link rel="stylesheet" type="text/css" href="css/posicionamiento.css">
<title>
Poscionamiento
</title>
</head>
<body>
<header>
<nav>
</nav>
</header>
<section>
<article>
<hgroup>
<h1>Titulo Principal</h1>
<h2>Titulo Secundario</h2>
</hgroup>
</article>
<p id="parrafo1">Parrafo 1 dkfjkasdjflkjalkfjlajdflajdslfjladsjlfjdsalfjlsajlfjaljdkjkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkflajldkfjlakjdflkjslkdjflsjdlkfjsldjfljsdalkjflajdljflkjdlkfjlkajfj</p>
<p id="parrafo2">Parrafo 2 dkfjkasdjflkjalkfjlajdflajdslfjladsjlfjdsalfjlsajkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkjlfjaljdflajldkfjlakjdflkjslkdjflsjdlkfjsldjfljsdalkjflajdljflkjdlkfjlkajfj</p>
<p id="parrafo3">Parrafo 3 dkfjkasdjflkjalkfjlajdflajdslfjladsjlfjdsalfjkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkjlsajlfjaljdflajldkfjlakjdflkjslkdjflsjdlkfjsldjfljsdalkjflajdljflkjdlkfjlkajfj</p>
</section>
<aside>
</aside>
<footer>
<h4>Pie de pagina</h4>
</footer>
</body>
</html>
El codigo CSS es:
/*www.ticoticotaa.es*/
/*@2016*/
*{
}
#parrafo1{
margin-bottom:15px;
width:100px;
height:100px;
color:green;
background-color:gray;
overflow:auto;
z-index:2;
position:relative;
}
#parrafo2{
width:200px;
height:100px;
margin-top:-40px;
margin-left:50px;
color:blue;
background-color:yellow;
overflow:scroll;
z-index:1;
position:relative;
}
#parrafo3{
width:200px;
background-color:gray;
overflow:visible;
color:red;
}
Espero os sea util, no dejeis de practicar y probar opciones. Gracias.
Suscribirse a:
Entradas (Atom)