Professional Documents
Culture Documents
UD2.2.4 - Tarefas - Css Posicionamento PDF
UD2.2.4 - Tarefas - Css Posicionamento PDF
UD 2 – A2
CSS Flotante
Índice
Páxina 1 de 12
DAW – Deseño de Interfaces Web UD2 – A2 – Tarefas
Sección 1:
Sección 2:
Sección 3:
Sección 4:
<body>
<main>
Páxina 2 de 12
DAW – Deseño de Interfaces Web UD2 – A2 – Tarefas
<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/>
<section class="e2">
<p id="p1">1</p>
<p id="p2">2</p>
<p id="p3">3</p>
<p id="p4">4</p>
</section>
<br/>
<section class="e3">
<p id="p1">1</p>
<p id="p2">2</p>
<p id="p3">3</p>
<p id="p4">4</p>
</section>
<br/>
<section class="e4">
<p id="p1">1</p>
<p id="p2">2</p>
<p id="p3">3</p>
<p id="p4">4</p>
</section>
</main>
</body>
/* NO MODIFICAR */
* {
box-sizing: border-box;
}
section {
position: absolute;
width: 500px;
height: 300px;
background-color: lightgray;
}
section.e1 { top: 0px; }
section.e2 { top: 350px; }
section.e3 { top: 700px; }
section.e4 { top: 1050px; }
/* 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
DAW – Deseño de Interfaces Web UD2 – A2 – Tarefas
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;
background-color: blue;
}
section.e2 #p2{
position: absolute;
bottom: 0;
right: 0;
width: 150px;
height: 200px;
background-color: green;
}
section.e2 #p3{
position: absolute;
bottom: 0;
left: 0;
width: 150px;
height: 150px;
background-color: yellow;
}
section.e2 #p4{
position: absolute;
top: 0;
right: 0;
width: 250px;
height: 100px;
background-color: red;
}
/* EJERCICIO 3 */
section.e3 #p1{
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 200px;
background-color: green;
}
section.e3 #p2{
position: absolute;
bottom: 0;
right: 0;
width: 100px;
height: 200px;
background-color: yellow;
}
section.e3 #p3{
position: absolute;
bottom: 0;
Páxina 4 de 12
DAW – Deseño de Interfaces Web UD2 – A2 – Tarefas
left: 0;
width: 100px;
height: 200px;
background-color: red;
}
section.e3 #p4{
position: absolute;
top: 0;
right: 0;
width: 100px;
height: 200px;
background-color: blue;
}
/* EJERCICIO 4 */
section.e4 #p1{
position: absolute;
top: 0;
left: 0;
width: 400px;
height: 75px;
background-color: yellow;
}
section.e4 #p2{
position: absolute;
bottom: 0;
right: 0;
width: 400px;
height: 75px;
background-color: red;
}
section.e4 #p3{
position: absolute;
bottom: 0;
left: 0;
width: 100px;
height: 250px;
background-color: blue;
}
section.e4 #p4{
position: absolute;
top: 0;
right: 0;
width: 100px;
height: 250px;
background-color: green;
}
Páxina 5 de 12
DAW – Deseño de Interfaces Web UD2 – A2 – Tarefas
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
DAW – Deseño de Interfaces Web UD2 – A2 – Tarefas
<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>
* {
box-sizing: border-box;
}
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;
border: hsl(120, 40%, 35%) 4px solid;
background-color: hsl(120, 100%, 75%);
text-align: center;
font-size: 2rem;
}
p#m3 {
padding: 1rem;
border: hsl(60, 64%, 55%) 4px solid;
background-color: hsl(60, 100%, 75%);
text-align: left;
Páxina 7 de 12
DAW – Deseño de Interfaces Web UD2 – A2 – Tarefas
font-size: 2rem;
}
p#m4 {
padding: 1rem;
border: hsl(180, 25%, 70%) 4px solid;
background-color: hsl(180, 100%, 90%);
text-align: right;
font-size: 2rem;
}
p#m5 {
padding: 1rem;
border: hsl(300, 15%, 70%) 4px solid;
background-color: hsl(300, 100%, 95%);
text-align: left;
font-size: 2rem;
}
p#m6 {
padding: 1rem;
border: hsl(0, 15%, 45%) 4px solid;
background-color: hsl(0, 100%, 85%);
text-align: right;
font-size: 2rem;
}
Páxina 8 de 12
DAW – Deseño de Interfaces Web UD2 – A2 – Tarefas
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º
<body>
Páxina 9 de 12
DAW – Deseño de Interfaces Web UD2 – A2 – Tarefas
<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>
* {
box-sizing: border-box;
}
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
DAW – Deseño de Interfaces Web UD2 – A2 – Tarefas
.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
DAW – Deseño de Interfaces Web UD2 – A2 – Tarefas
Páxina 12 de 12