UD2.2.4 - Tarefas - Css Posicionamento PDF

DAW – Deseño de Interfaces Web UD2 – A2 – Tarefas
UD 2 – A2
CSS Flotante
Índice
Tarefa 2.16. Posicionamento Absoluto de caixas ...................................................................... 2

Tarefa 2.17. Posicionamento Absoluto de Murphy ..................................................................... 6
Tarefa 2.18. Texto sobre unha imaxe ......................................................................................... 9
Tarefa 2.19. Encabezado sticky e imaxe fixa. .......................................................................... 12
Páxina 1 de 12
Tarefa 2.16. Posicionamento Absoluto de caixas

Modifica as propiedades de posicionamento absoluto (en incremento de 50px) para que as seccións da “tarefa2-16.html”
teñan o seguinte aspecto:
 Sección 1:
 Sección 2:
 Sección 3:
 Sección 4:
O código html base é o seguinte:
<body>
<main>
Páxina 2 de 12
<section class="e1">
<p id="p1">1</p>
<p id="p2">2</p>
<p id="p3">3</p>
<p id="p4">4</p>
</section>
<br/>
<p id="p1">1</p>
<p id="p2">2</p>
<p id="p3">3</p>
<p id="p4">4</p>
</section>
<br/>
<p id="p1">1</p>
<p id="p2">2</p>
<p id="p3">3</p>
<p id="p4">4</p>
</section>
<br/>
<p id="p1">1</p>
<p id="p2">2</p>
<p id="p3">3</p>
<p id="p4">4</p>
</section>
</main>
</body>
O código css base é o seguinte:
/* NO MODIFICAR */
* {
box-sizing: border-box;
}
section {
position: absolute;
width: 500px;
height: 300px;
background-color: lightgray;
}
section.e1 { top: 0px; }
p { margin: 0; padding-left: 5px; font-family: sans-serif; font-size: 300%; }
/* MODIFICAR PROPIEDADES DE POSITION: top, bottom, left, right */
/* EJERCICIO 1 */
section.e1 #p1{
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 50px;
background-color: red;
}
section.e1 #p2{
position: absolute;
bottom: 0;
right: 0;
width: 200px;
height: 50px;
background-color: blue;
}
Páxina 3 de 12
section.e1 #p3{
position: absolute;
bottom: 0;
left: 0;
width: 200px;
height: 100px;
background-color: green;
}
section.e1 #p4{
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 100px;
background-color: yellow;
}
/* EJERCICIO 2 */
section.e2 #p1{
position: absolute;
top: 0;
left: 0;
width: 250px;
height: 150px;
}
section.e2 #p2{
position: absolute;
bottom: 0;
right: 0;
width: 150px;
height: 200px;
}
section.e2 #p3{
position: absolute;
bottom: 0;
left: 0;
width: 150px;
height: 150px;
}
section.e2 #p4{
position: absolute;
top: 0;
right: 0;
width: 250px;
height: 100px;
}
/* EJERCICIO 3 */
section.e3 #p1{
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 200px;
}
section.e3 #p2{
position: absolute;
bottom: 0;
right: 0;
width: 100px;
height: 200px;
}
section.e3 #p3{
position: absolute;
bottom: 0;
Páxina 4 de 12
left: 0;
width: 100px;
height: 200px;
}
section.e3 #p4{
position: absolute;
top: 0;
right: 0;
width: 100px;
height: 200px;
}
/* EJERCICIO 4 */
section.e4 #p1{
position: absolute;
top: 0;
left: 0;
width: 400px;
height: 75px;
}
section.e4 #p2{
position: absolute;
bottom: 0;
right: 0;
width: 400px;
height: 75px;
}
section.e4 #p3{
position: absolute;
bottom: 0;
left: 0;
width: 100px;
height: 250px;
}
section.e4 #p4{
position: absolute;
top: 0;
right: 0;
width: 100px;
height: 250px;
}
Páxina 5 de 12
Tarefa 2.17. Posicionamento Absoluto de Murphy

Modifica as propiedades de posicionamento absoluto para que a páxina “tarefa2-17.html” teña o seguinte aspecto:
20%
35%
20% 10%
60%
50%
10%
10%
30%
40%
25%
30%
10%
Ao situar o rato sobre un parágrafo, superporase ao resto. Isto se consegue empregando a propiedade z-index e a pseudo-
clase p:hover:
<body>
<header>
<h2>Ejercicio 2.17</h2>
<h1>Leyes de Murphy</h1>
<p>Cambia el zoom y el tamaño de la pantalla para ver los cambios.</p>
</header>
<p id="m1">Cualquier cosa que pueda ir mal, ... irá mal.</p>
<p id="m2">Todo aquello que comienza bien, acaba mal. Todo aquello que comienza mal, acaba
peor.</p>
Páxina 6 de 12
<p id="m3">Si sabes que una cosa puede ir mal y tomas todas las precauciones, irá mal otra
cosa.</p>
<p id="m4">No hay nada que vaya tan mal que no pueda ir peor.</p>
<p id="m5">Todo va mal a la vez.</p>
<p id="m6">Murphy era un optimista</p>

</body>
</html>
* {
}
body {
margin: 0;
padding: 0;
font-family: Arial;
background-color: darkgrey;
}
header {
margin: 0;
padding: 0 0 2rem 0;
text-align: center;
background-color: ghostwhite;
}
h1 {
margin: 0;
padding: 0.5rem;
font-size: 2rem;
}
h2 {
margin: 0;
padding: 0.5rem;
font-size: 1rem;
}
p {
margin: 0;
padding: 0.5rem;
font-size: 1rem;
}
p#m1 {
padding: 1rem;
border: hsl(40, 40%, 35%) 2px solid;
background-color: hsl(40, 100%, 75%);
text-align: center;
font-size: 2rem;
}
p#m2 {
padding: 1rem;
text-align: center;
font-size: 2rem;
}
p#m3 {
padding: 1rem;
text-align: left;
Páxina 7 de 12
font-size: 2rem;
}
p#m4 {
padding: 1rem;
text-align: right;
font-size: 2rem;
}
p#m5 {
padding: 1rem;
text-align: left;
font-size: 2rem;
}
p#m6 {
padding: 1rem;
text-align: right;
font-size: 2rem;
}
Páxina 8 de 12
Tarefa 2.18. Texto sobre unha imaxe

Modifica as propiedades de posicionamento absoluto para que a páxina “tarefa2-18.html” teña o seguinte aspecto:
Para o seu deseño, proponse empregar caixas de (10vw X 10vw) e aplicar transformacións 2D (translate e rotate) para
centralas e rotalas. Para o centrado proponse empregar a técnica de posición absoluta + transformación.
2.5vw
-45º 45º
2.5vw
-90º 90º
-135º 135º
Recoméndanse consultar as seguintes ligazóns
 Centrado Horizontal e Vertical: https://www.w3schools.com/css/css_align.asp

 Transformacións 2D: https://www.w3schools.com/css/css3_2dtransforms.asp
<body>
Páxina 9 de 12
<header>
<h1>Ejercicio 2.18</h1>
<p>Modifica el zoom y el tamaño de la ventana para ver el efecto</p>
</header>
<main>
<div class="container">
<img src="../../images/tarefas/imagen.jpg" alt="">
<div class="cube t-l">Top<br/>Left</div>
<div class="cube t">Top</div>
<div class="cube t-r">Top<br/>Right</div>
<div class="cube c-l">Center<br/>Left</div>
<div class="c">Center</div>
<div class="cube c-r">Center<br/>Right</div>
<div class="cube b-l">Bottom<br/>Left</div>
<div class="cube b">Bottom</div>
<div class="cube b-r">Bottom<br/>Right</div>
</div>
</main>
</body>
* {
}
body {
margin: 0;
padding: 0;
font-family: Arial;
background-color: black;
}
header {
padding: 3rem 0 2rem 0;
text-align: center;
background-color: ghostwhite;
}
h1 {
margin: 0;
padding: 0.5rem;
font-size: 2rem;
}
.container {
margin-top: 50px;
margin-left: 20%;
width: 60%;
font-size: 2vw;
color: white;
}
img {
width: 100%;
height: auto;
opacity: 1;
border: 3px solid white;
}
.cube {
width: 10vw;
height: 10vw;
text-align: center;
/* background-color:grey; */
}
.t-l {
top: 2.5vw;
left: 2.5vw;
}
.t {
top: 2.5vw;
}
Páxina 10 de 12
.t-r {
top: 2.5vw;
right: 2.5vw;
}
.c-l {
top: 50%;
left: 2.5vw;
}
.c {
}
.c-r {
top: 50%;
right: 2.5vw;
}
.b-l {
bottom: 2.5vw;
left: 2.5vw;
}
.b {
bottom: 2.5vw;
}
.b-r {
bottom: 2.5vw;
right: 2.5vw;
}
Páxina 11 de 12
Tarefa 2.19. Encabezado sticky e imaxe fixa.

Copia e modifica a páxina do exercicio anterior en “tarefa2-19.html” para que teña o seguinte aspecto:
 Encabezado “sticky” a 1rem do borde superior da páxina.

 Triplicar a imaxe co texto para poder facer scroll na páxina.
 A imaxe en miniatura (15%), co título “Miniatura” a 1vw, e en posición fixa a 2% da esquerda e de abaixo.
Páxina 12 de 12

UD2.2.4 - Tarefas - Css Posicionamento PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

UD2.2.4 - Tarefas - Css Posicionamento PDF

Uploaded by

Copyright:

Available Formats

DAW – Deseño de Interfaces Web UD2 – A2 – Tarefas

Tarefa 2.16. Posicionamento Absoluto de caixas ...................................................................... 2

Tarefa 2.16. Posicionamento Absoluto de caixas

O código html base é o seguinte:

O código css base é o seguinte:

p { margin: 0; padding-left: 5px; font-family: sans-serif; font-size: 300%; }

/* MODIFICAR PROPIEDADES DE POSITION: top, bottom, left, right */

Tarefa 2.17. Posicionamento Absoluto de Murphy

O código html base é o seguinte:

<p id="m5">Todo va mal a la vez.</p>

<p id="m6">Murphy era un optimista</p>

O código css base é o seguinte:

Tarefa 2.18. Texto sobre unha imaxe

Recoméndanse consultar as seguintes ligazóns

 Centrado Horizontal e Vertical: https://www.w3schools.com/css/css_align.asp

O código html base é o seguinte:

O código css base é o seguinte:

Tarefa 2.19. Encabezado sticky e imaxe fixa.

 Encabezado “sticky” a 1rem do borde superior da páxina.

You might also like