Buenas buenas!!!!!
Dejo mis soluciones a la entrega CU01032D del programa formativo en desarrollo web con CSS desde cero. Espero que estén bien...
Saludos!!!!
CU01032Da.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Posicionamiento en CSS - Curso aprenderaprogramar.com</title>
<meta name="author" content="Hugo A. Segura" />
<meta name="description" content="Posicionamiento CSS" />
<meta name="keywords" content="curso, aprender a programar, html, css, propiedad position, top, right, bottom, left,(CU01032D)" />
<meta charset="utf-8" />
<meta name="robots" content="index, follow" />
<link rel="stylesheet" type="text/css" href="CU01032Da.css"/>
</head>
<body>
<div class="encabezado">
<h1>Resolución ejercicio (CU01032D)</h1>
<h2>Entrega número 32 - Ejercicio 1</h2>
</div>
<div id="divPadre">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</div>
</body>
</html>
CU01032Da.css
/* Estilos aplicados al ejercicio entrega nº 32
aprenderaprogramar.com (CU01032D)*/
*{
font-family: Arial, sans-serif;
}
body{
background-color: beige;
}
/* estilos para los titulos*/
.encabezado{
text-align: center;
}
.encabezado h1{
margin: 0px;
}
/*propiedades comunes para los div*/
#divPadre{
border-style: double;
}
#div1,#div2,#div3{
width: 300px;
height: 300px;
margin: 40px;
padding: 30px;
position: relative;
}
/*propiedades especifica de los div*/
#div1{
background-color: #0000FF;
left: 200px;
top: 100px;
}
#div2{
background-color: #287233;
right: 50px;
bottom: 50px;
}
#div3{
background-color: #FF0000;
left: 450px;
bottom: 300px;
}
CU01032Db.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Posicionamiento en CSS - Curso aprenderaprogramar.com</title>
<meta name="author" content="Hugo A. Segura" />
<meta name="description" content="Posicionamiento CSS" />
<meta name="keywords" content="curso, aprender a programar, html, css, propiedad position, top, right, bottom, left,(CU01032D)" />
<meta charset="utf-8" />
<meta name="robots" content="index, follow" />
<link rel="stylesheet" type="text/css" href="CU01032Db.css"/>
</head>
<body>
<div class="encabezado">
<h1>Resolución ejercicio (CU01032D)</h1>
<h2>Entrega número 32 - Ejercicio 2</h2>
</div>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
CU01032Db.css
/* Estilos aplicados al ejercicio entrega nº 32
aprenderaprogramar.com (CU01032D)*/
*{
font-family: Arial, sans-serif;
}
body{
background-color: beige;
}
/* estilos para los titulos*/
.encabezado{
text-align: center;
}
.encabezado h1{
margin: 0px;
}
#div1,#div2,#div3{position: absolute}
#div1{
width: 600px;
height: 600px;
background: yellow;
}
#div2{
width: 400px;
height: 400px;
background: green;
}
#div3{
width: 100px;
height: 100px;
background: blue;
}
CU01032Dc.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Posicionamiento en CSS - Curso aprenderaprogramar.com</title>
<meta name="author" content="Hugo A. Segura" />
<meta name="description" content="Posicionamiento CSS" />
<meta name="keywords" content="curso, aprender a programar, html, css, propiedad position, top, right, bottom, left,(CU01032D)" />
<meta charset="utf-8" />
<meta name="robots" content="index, follow" />
<link rel="stylesheet" type="text/css" href="CU01032Dc.css"/>
</head>
<body>
<div id="mensaje">
Esta página web utiliza cookies. Si continua navegando acepta el uso de cookies.
</div>
<br/><br/><br/><br/><br/><br/>
<div class="encabezado">
<h1>Resolución ejercicio (CU01032D)</h1>
<h2>Entrega número 32 - Ejercicio 3</h2>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec condimentum aliquet enim sed imperdiet. Praesent quis quam et massa gravida placerat nec et nulla. In porttitor dui velit, et gravida metus ultrices ac. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris nec tellus convallis, ornare felis at, aliquet mauris. Praesent orci lorem, pharetra quis placerat condimentum, bibendum eu enim. Sed vitae magna vel urna ultrices consectetur. Pellentesque eu urna odio. Mauris id scelerisque dui, eget congue orci. Maecenas malesuada ac libero eu condimentum.</p>
<p>Duis vehicula, nisl et egestas placerat, mauris orci semper ante, sed cursus justo tortor vitae nulla. Donec vitae augue venenatis enim iaculis pellentesque a eu risus. Nullam convallis aliquet orci quis vulputate. Suspendisse nisi nibh, sodales ut tellus ac, pulvinar rutrum nunc. Nunc et orci eu diam tincidunt egestas. Ut ut ex ex. Cras molestie vel augue vitae imperdiet. Phasellus fermentum varius volutpat. Sed congue lorem ac tortor porta venenatis. In eu luctus diam, eleifend consectetur tortor. Suspendisse dolor augue, gravida nec tincidunt in, auctor nec velit. Morbi euismod eu arcu vel tristique. Nulla at luctus dolor.</p>
<p>Sed id urna iaculis, lacinia enim sit amet, rutrum est. Morbi at erat est. Duis non mauris pretium, egestas felis in, ultrices lorem. Vivamus eget ligula sit amet ante tempus aliquam. Nunc vehicula augue neque, in vestibulum mauris interdum id. Nulla laoreet leo quam, et tincidunt nibh consectetur nec. Sed suscipit neque mi.</p>
<p>Phasellus imperdiet purus non neque molestie, sit amet volutpat diam elementum. Curabitur placerat sollicitudin lorem tincidunt efficitur. Etiam rhoncus purus eu eleifend placerat. Nam et nulla pulvinar, euismod est tincidunt, sollicitudin nulla. Donec dui nisl, pharetra id dictum eu, tempus sit amet est. Quisque vel elit vitae erat gravida sagittis eu sit amet ex. Vivamus cursus orci odio, in aliquam massa tempus sit amet. Etiam sed erat nec neque hendrerit egestas. Curabitur sit amet odio sem. Ut suscipit ultricies sagittis. Praesent vestibulum metus sit amet massa laoreet, eget cursus nunc porttitor. Vivamus sit amet pretium odio. Aenean cursus condimentum auctor. Vestibulum eleifend fermentum pretium.</p>
<p>Praesent consectetur vel risus at fringilla. Nullam faucibus blandit lacus, vel vulputate metus lacinia quis. Suspendisse quis elit pharetra sapien semper tempus. Sed bibendum vel dolor et pharetra. Curabitur nec tortor at dui blandit tempor. Sed malesuada accumsan augue, accumsan blandit nibh dignissim id. Fusce ex metus, vulputate id tortor in, vehicula vestibulum odio.</p>
<p>Sed volutpat hendrerit magna, sed imperdiet nunc hendrerit vel. Etiam tempor dolor vitae odio pretium vehicula. Donec in diam lobortis, pharetra tellus quis, semper nibh. Aenean in porta ante, sit amet gravida erat. Morbi bibendum viverra purus. Pellentesque venenatis in ante eget mollis. Aenean et urna id nibh scelerisque blandit. Donec ultricies tempus velit, eu eleifend ex pellentesque a. Praesent consequat tellus turpis, et feugiat libero vulputate eu. Nam ac felis porttitor, ultricies purus nec, sollicitudin mi. Duis pharetra, ipsum vel porta tristique, eros nisi convallis nulla, pellentesque congue erat ex et lacus. Mauris ac laoreet justo. Nulla quis imperdiet lacus, ut porta felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pellentesque diam orci, vel condimentum leo maximus sit amet. Aenean in tempor sapien.</p>
<p>Ut magna arcu, bibendum at pretium a, fringilla eget orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce quis purus sed ex eleifend elementum. Etiam imperdiet tortor non risus pretium, ut fringilla velit dignissim. Nulla in facilisis erat, sit amet blandit tortor. Donec non porttitor felis. Mauris pellentesque eu odio nec feugiat. Aliquam vulputate magna nec dui pretium, id faucibus lorem vehicula. Nulla fringilla tellus in porta semper. Nulla tristique, augue a elementum auctor, arcu felis rutrum orci, quis congue ex dolor quis ligula. Aenean convallis est est, vel fringilla velit feugiat id. Quisque semper faucibus purus, nec mattis orci dignissim eget. Curabitur vitae nisi pharetra, porta urna sit amet, lacinia ipsum.</p>
<p>Cras varius eu risus sit amet semper. Integer lobortis elit at faucibus consectetur. Morbi venenatis tortor id consequat varius. Aliquam rutrum mi sed lectus ullamcorper, efficitur commodo risus faucibus. Duis maximus convallis nulla et porttitor. Phasellus sed quam neque. Vivamus nec erat nisl. Integer cursus enim lacus, ac posuere libero congue at. Vivamus vitae metus ornare enim egestas dapibus efficitur vitae nibh. Cras maximus, massa at vehicula pulvinar, nibh arcu sagittis ex, vitae lacinia ipsum libero et nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras dapibus est orci, sit amet pulvinar diam blandit ut. Sed faucibus ex vel convallis ultricies.</p>
<p>Curabitur quis pharetra odio, eget ornare neque. Aenean luctus neque libero, eget tempor nibh imperdiet et. Aenean nec ornare mauris. Duis accumsan aliquet arcu, eu vulputate ligula pharetra quis. Vestibulum est diam, volutpat pulvinar urna ut, bibendum placerat ex. Nullam laoreet magna placerat maximus egestas. Ut ullamcorper scelerisque lorem hendrerit scelerisque. Mauris non aliquam sapien, sit amet finibus sapien. Quisque in metus non lorem tristique venenatis at nec sem. Vivamus accumsan porttitor justo, consequat pellentesque ipsum varius a. Maecenas suscipit id nulla eget posuere. Mauris at velit ut nisi vehicula faucibus id et tellus. Fusce efficitur finibus enim in dignissim. Morbi sagittis est sit amet lacus interdum molestie. Aliquam eget nibh et leo dapibus suscipit. In tempus fermentum ex sit amet pretium</p>
<p>Donec a libero in dolor porttitor condimentum. Aenean ultricies pellentesque condimentum. Maecenas interdum egestas erat vitae bibendum. Duis id ligula vitae diam euismod feugiat et quis leo. Nulla elementum ante mauris, eget gravida orci fermentum ut. In hac habitasse platea dictumst. Suspendisse potenti.</p>
</div>
</div>
<div id="generado">
El texto tiene 10 párrafos, 913 palabras y los generé en la página <a href="http://es.lipsum.com/" title="Lorem Ipsum" target="_blank">Lorem Ipsum</a>
</div>
</body>
</html>
CU01032Dc.css
/* Estilos aplicados al ejercicio entrega nº 32
aprenderaprogramar.com (CU01032D)*/
*{
font-family: Arial, sans-serif;
}
body{
background-color: beige;
}
#mensaje{
height: 100px;
width: 100%;
background-color: yellow;
font-weight: bold;
text-align:center;
position: fixed;
top:0;
left: 0;
}
.encabezado{
text-align: center;
}
.encabezado h1{
margin: 0px;
}
.encabezado div{text-align: justify;}
#generado {
font-weight: bold;
text-align: left;
}
Tema: Posicionamiento CSS cómo dejar mensaje fijado aviso cookies con HTML CU01032D# (Leído 2454 veces)
RSS -
WAP2