Nadanadadenadanada

DAW – Deseño de Interfaces Web UD2 – A2 – Tarefas
UD 2 – A2
CSS Flotante
Índice
Tarefa 2.10. Elementos flotantes CSS ....................................................................................... 2

Tarefa 2.11. Citas flotantes ......................................................................................................... 4
Tarefa 2.12. Efemérides flotantes ............................................................................................... 7
Tarefa 2.13. Frutas Flexbox ........................................................................................................ 9
Tarefa 2.14. Galería responsiva Flexbox.................................................................................. 15
Tarefa 2.15. Sitio responsivo Flexbox ...................................................................................... 18
Páxina 1 de 20
Tarefa 2.10. Elementos flotantes CSS

Modifica a páxina “tarefa2-10a.html”, “tarefa2-10b.html” e “tarefa2-10c.html” para cumprir os requisitos de
flotabilidade:
 tarefa2-10a.html: tanto o menú de navegación coma os contidos estarán a flotar cara a esquerda, ocupando o
25% o primeiro e 37.5% os segundos.
 tarefa2-10b.html: tanto o menú de navegación coma os contidos estarán a flotar cara a dereita, ocupando o 25%
o primeiro e 37.5% os segundos. ¡Ollo á orde dos contidos!
 tarefa2-10c.html: tanto o menú de navegación coma os contidos estarán a flotar cara a esquerda, ocupando o
30% o primeiro e 60% o segundo.
 Aínda que flote, o menú de navegación non deberá en línea cos bloques de contido.
 Deberás empregar Flexbox para evitar que o alto dos distintos elementos do menú de navegación sexas
diferentes.
Páxina 2 de 20
O código html base é o seguinte:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../../css/tarefas/tarefa2-10a.css">
<title>Tarefa 2.10</title>
</head>
<body>
<header>
<h1>Chania</h1>
</header>
<section>
<nav>
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</nav>
<article>
<h1>The City 1</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city
can be divided in two parts, the old town and the modern city.</p>
<p>You will learn more about web layout and responsive web pages in a later
chapter.</p>
</article>
<article>
<h1>The City 2</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city
can be divided in two parts, the old town and the modern city.</p>
<p>You will learn more about web layout and responsive web pages in a later
chapter.</p>
</article>
</section>
<footer>
<p>Footer Text</p>
</footer>
</body>
</html>
Páxina 3 de 20
Tarefa 2.11. Citas flotantes

Crea a páxina “tarefa2-11a.html” que teña o seguinte aspecto mediante elementos flotantes float:
 Cada cita ten a letra inicial diferente ao resto do parágrafo. Pódese empregar unha etiqueta <span> ou o
pseudo-elemento ::first-letter, para facer que flote á esquerda.
 Os cadros das citas teñen todos o mesmo tamaño (16rem ancho e alto), un borde discontinuo, padding e
margin de 10px. Ademais, axustaranse en número automaticamente ao ancho da pantalla.
 O texto da páxina será da familia “sans-serif”. Tamaño 4rem no título, 1.5rem nas citas, 5rem na primeira
letra das citas e 1.5 rem no pé de páxina. O entreliñado das citas é do 150%.
 O pé de páxina ten dos parágrafos que flotan en direccións opostas.
 Proba a quitarlle o alto aos artigos para que teña o seguinte aspecto:
Páxina 4 de 20
 Crea a páxina “tarefa2-11b.html” na que haxa sempre 4 artigos por línea, mantendo 20px de separación entre as
caixas das citas. Quizás teñas que modificar algo o código html:
 Crea a páxina “tarefa2-11c.html” na que as caixas se adapten ao contido que teñan, pero tendo todas as mesmas
dimensións (empregar flexbox):
<!DOCTYPE html>
<html lang="es">
<head>
<link rel="stylesheet" href="../../css/tarefas/tarefa2-11a.css">
<title>Ejercicio 2.11</title>
</head>
<body>
<header>
<h1>Óscar Wilde</h1>
</header>
<nav>
</nav>
Páxina 5 de 20
<main>
<section>
<article>
<cite>A veces podemos pasarnos años sin vivir en absoluto y, de pronto, toda
nuestra vida se concentra en un solo instante.</cite>
</article>
<article>
<cite>A menudo mantengo largas conversaciones conmigo mismo, y soy tan
inteligente que a veces no entiendo ni una palabra de lo que digo.</cite>
</article>
<article>
<cite>Uno debería estar siempre enamorado. Por eso jamás deberíamos
casarnos.</cite>
</article>
<article>
<cite>Lo menos frecuente en este mundo es vivir. La mayoría de la gente existe,
eso es todo.</cite>
</article>
<article>
<cite>No hay nada como el amor de una mujer casada. Es una cosa de la que
ningún marido tiene la menor idea.</cite>
</article>
<article>
<cite>El trabajo es el refugio de los que no tienen nada que hacer.</cite>
</article>
<article>
<cite>La mejor manera de hacer buenos a los niños es hacerlos felices.</cite>
</article>
<article>
<cite>La educación es algo admirable. Sin embargo, es bueno recordar que nada
que valga la pena se puede enseñar.</cite>
</article>
<article>
<cite>Para la mayoría de nosotros la verdadera vida es la vida que no
llevamos.</cite>
</article>
<article>
<cite>Los viejos lo creen todo; los adultos lo sospechan todo; mientras que los
jóvenes lo saben todo.</cite>
</article>
<article>
<cite>Un tonto nunca se repone de un éxito.</cite>
</article>
<article>
<cite>Cualquiera puede hacer una cosa, el mérito está en hacer creer al mundo
que uno lo ha hecho.</cite>
</article>
<article>
<cite>La moda es siempre un esperpento tal que nos vemos obligados a cambiarla
cada seis meses.</cite>
</article>
<article>
<cite>Sólo podemos dar una opinión imparcial sobre las cosas que no nos
interesan. Sin duda por eso mismo las opiniones imparciales carecen de valor.</cite>
</article>
<article>
<cite>Que un hombre muera por una causa no significa nada en cuanto al valor de
la causa.</cite>
</article>
</section>
</main>
<footer>
<p>Tu nombre<p>
<p>Deseño de Interfaces Web<p>
</footer>
</body>
</html>
Páxina 6 de 20
Tarefa 2.12. Efemérides flotantes

Crea a páxina “tarefa2-12.html” que teña o seguinte aspecto mediante elementos flotantes:
 Cada efeméride será un artigo que vai dentro dunha sección, segundo a súa época histórica.
 Tanto os artigos coma as seccións son flotantes para a esquerda.
 As seccións terán un ancho de 30rem, e cada artigo ocupará arredor do 46% do ancho da sección.
 A fonte será “sans-serif”, cun tamaño de 2rem para h1, 1.3 para h2 e 1rem para h3.
<!DOCTYPE html>
<html lang="es">
Páxina 7 de 20
<head>
<link rel="stylesheet" href="../../css/tarefas/tarefa2-12.css">
</head>
<body>
<header>
<h1>Sucedió un 14 de diciembre</h1>
</header>
<nav>
</nav>
<main>
<section>
<h2>Edad media</h2>
<article>
<h3>557</h3>
<p>Un violento terremoto destruye gran parte de Constantinopla.</p>
</article>
<article>
<h3>1287</h3>
<p>Graves inundaciones en el noroeste de Holanda provocan más de 50.000
muertos.</p>
</article>
</section>
<section>
<h2>Edad moderna</h2>
<article>
<h3>1542</h3>
<p>María Estuardo es proclamada Reina de Escocia.</p>
</article>
<article>
<h3>1782</h3>
<p>Los hermanos Montgolfier realizan el primer vuelo de prueba en globo.</p>
</article>
</section>
<section>
<h2>Edad contemporánea</h2>
<article>
<h3>1812</h3>
<p>El ejército napoleónico se retira derrotado de Rusia.</p>
</article>
<article>
<h3>1819</h3>
<p>Alabama se convierte en el 22º estado de EEUU.</p>
</article>
<article>
<h3>1900</h3>
<p>Max Planck presenta en una conferencia la hipótesis de que la energía
electromagnética sólo se puede emitir en cantidades discretas, no continuas.</p>
</article>
<article>
<h3>1911</h3>
<p>La expedición dirigida por Roald Amundsen alcanza el polo Sur.</p>
</article>
<article>
<h3>1947</h3>
<p>El estadio Santiago Bernabéu (del Real Madrid F.C.) acoge su primer partido
de fútbol.</p>
</article>
</section>
</main>
<footer class="clearfix">
<p class="f_left">Tu nombre<p>
<p class="f_right">Deseño de Interfaces Web<p>
</footer>
</body>
</html>
Páxina 8 de 20
Tarefa 2.13. Frutas Flexbox

Crea a páxina “tarefa2-13.html” que que aplique diferentes configuracións de caixas Flexbox.
Por defecto, o documento presentará o seguinte estilo:
 html: Fonte de tipo “sans-serif” e partido automático de palabras ao final de línea (hyphens).
 article: contedor de caixas Flexbox con salto de línea.
 Aplicarase unha margin de 10px ás caixas de cada exemplo e un padding de 5px.
 O texto que describe cada froita estará xustificado. Os nomes de froitas terán un 150% de tamaño, negriña, fondo
“lightgray” e centrados. As iconas de froitas son caracteres especiais unicode e estarán centrados e tamaño 400%.
 As caixas terán, polo xeral, un borde sólido con ancho 200px e marxe 10px.
 A continuación descríbese cada exemplo:
1. Exemplo 1
1.1. Caixas estándar
1.2. Caixas con xustificado de espazo ao redor
1.3. Caixas con aliñado centrado
1.4. Caixas de 250px de ancho e disposición interna de Flexbox invertido
Páxina 9 de 20
1.5. Caixas de 250px de ancho con aliñado centrado e disposición interna de Flexbox
1.6. Caixas de 250px de ancho con aliñado centrado e disposición interna de Flexbox (o segundo parágrafo ten
autoaliñado centrado e unha anchura do 100% para que ocupe todo o espazo posible e quede centrado)
2. Exemplo 2
2.1. Caixas estándar con anchura 200px. A froita ten un tamaño de 600% e aliñado centrado. Fíxate que hai un cambio
na orde das caixas
2.2. Caixas de 300px e unha primeira disposición interna de Flexbox en liña (div.ficha), e unha segunda disposición
interna Flexbox en columna para o título e a descripción (div.parte). A froita ten un tamaño de 600% e aliñado
centrado
2.3. Caixas de 300px e unha primeira disposición interna de Flexbox en clumna (div.ficha), e unha segunda disposición
interna Flexbox en fila para a froita e o título (div.parte)
Páxina 10 de 20
O código html base será o seguinte:

<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<header>
<h1>Frutas y verduras</h1>
</header>
<nav>
</nav>
<main>
<section>
<h2>Ejemplo 1-1</h2>
<article class="a11">
<div class="ficha">
<p class="p2">Fresa</p>
<p class="p3">La fresa es una fruta del bosque adecuada en regímenes dietéticos, dado que tiene escasa
concentración de glúcidos. Tiene un sabor muy agradable aunque ligeramente agrio (algunas pocas especies pueden tener sabor dulce).</p>
</div>
<div class="ficha">
<p class="p2">Cerezas</p>
<p class="p3">La cereza, también conocido como guinda, es fruto de varios árboles del género Prunus. La
cereza es una fruta rica en vitaminas A, B, C, E, K y PP, en hierro, calcio, magnesio, potasio y azufre. </p>
</div>
<div class="ficha">
<p class="p2">Pera</p>
<p class="p3">La pera comestible es el fruto del peral común (Pyrus communis). La pera es una fruta jugosa,
carnosa, y una de las más importantes producidas en las regiones templadas.</p>
</div>
<div class="ficha">
<p class="p2">Plátano</p>
<p class="p3">El plátano (también llamado banana, banano o guineo) es un fruto con cualidades variables en
tamaño, color y firmeza, alargado, generalmente curvado y carnoso, rico en almidón cubierto con una cáscara, que puede ser verde, amarilla,
roja, púrpura o marrón cuando está madura. Los frutos crecen en piñas que cuelgan de la parte superior de la planta.</p>
</div>
<div class="ficha">
<p class="p2">Sandía</p>
<p class="p3">La sandía es una fruta originaria de África, pero tiene una gran presencia y difusión en Asia.
Hoy en día se cultiva de manera extendida por todo el mundo debido a su fruto, un pepónide de enorme tamaño —el récord entre las verduras
fue una sandía de 120 kg.</p>
</div>
</article>
</section>
<section>
<div class="ficha">
</div>
<div class="ficha">
</div>
<div class="ficha">
</div>
<div class="ficha">
</div>
<div class="ficha">
</div>
</article>
</section>
<section>
<div class="ficha">
</div>
Páxina 11 de 20
<div class="ficha">
</div>
<div class="ficha">
</div>
<div class="ficha">
</div>
<div class="ficha">
</div>
</article>
</section>
<section>
<div class="ficha">

<p class="p1">🍓</p> 
</div>
<div class="ficha">
<p class="p1">🍒</p>
</div>
<div class="ficha">
<p class="p1">🍐</p>
</div>
<div class="ficha">
<p class="p1">🍌</p>
</div>
<div class="ficha">
<p class="p1">🍉</p>
</div>
</article>
</section>
<section>
<div class="ficha">
<p class="p1">🍓</p>
</div>
<div class="ficha">
</div>
<div class="ficha">
</div>
<div class="ficha">
</div>
<div class="ficha">
</div>
</article>
</section>
<section>
Páxina 12 de 20
<div class="ficha">
</div>
<div class="ficha">
</div>
<div class="ficha">
</div>
<div class="ficha">
</div>
<div class="ficha">
</div>
</article>
</section>
<section>
<div class="ficha uno">
</div>
<div class="ficha dos">

</div>
<div class="ficha tres">

</div>
<div class="ficha cuatro">

</div>
<div class="ficha cinco">

</div>
</article>
</section>
<section>
<div class="ficha">
<div class="parte">
<p class="p3">La fresa es una fruta del bosque adecuada en regímenes dietéticos, dado que tiene
escasa concentración de glúcidos. Tiene un sabor muy agradable aunque ligeramente agrio (algunas pocas especies pueden tener sabor
dulce).</p>
</div>
</div>
<div class="ficha">
<div class="parte">
<p class="p3">La cereza, también conocido como guinda, es fruto de varios árboles del género
Prunus. La cereza es una fruta rica en vitaminas A, B, C, E, K y PP, en hierro, calcio, magnesio, potasio y azufre. </p>
</div>
</div>
<div class="ficha">
<div class="parte">
<p class="p3">La pera comestible es el fruto del peral común (Pyrus communis). La pera es una fruta
jugosa, carnosa, y una de las más importantes producidas en las regiones templadas.</p>
</div>
</div>
<div class="ficha">
Páxina 13 de 20
<div class="parte">
<p class="p3">El plátano (también llamado banana, banano o guineo) es un fruto con cualidades
variables en tamaño, color y firmeza, alargado, generalmente curvado y carnoso, rico en almidón cubierto con una cáscara, que puede ser
verde, amarilla, roja, púrpura o marrón cuando está madura. Los frutos crecen en piñas que cuelgan de la parte superior de la planta.</p>
</div>
</div>
<div class="ficha">
<div class="parte">
<p>La sandía es una fruta originaria de África, pero tiene una gran presencia y difusión en Asia.
</div>
</div>
</article>
</section>
<section>
<div class="ficha">
<div class="parte">
</div>
</div>
<div class="ficha">
<div class="parte">
</div>
</div>
<div class="ficha">
<div class="parte">
</div>
</div>
<div class="ficha">
<div class="parte">
</div>
</div>
<div class="ficha">
<div class="parte">
</div>
<p>La sandía es una fruta originaria de África, pero tiene una gran presencia y difusión en Asia. Hoy en día
se cultiva de manera extendida por todo el mundo debido a su fruto, un pepónide de enorme tamaño —el récord entre las verduras fue una
sandía de 120 kg.</p>
</div>
</article>
</section>
</main>
<footer>
</footer>
</body>
</html>
Páxina 14 de 20
Tarefa 2.14. Galería responsiva Flexbox

Crea a páxina “tarefa2-14.html” que teña o seguinte aspecto mediante caixas Flexbox:
 section: Flexbox horizontal, sen wrap, que contén 4 <article> de 18% de ancho cada un.
 article: Flexbox vertical, sen wrap, que contén varias imaxes que se situarán unha debaixo da otra.
 footer: pódesen usar caixas flotantes ou Flexbox.
Engade regras de estilo (e logo coméntaas) para que a galería teña os seguintes aspectos:
Páxina 15 de 20
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<header>
<h2>Tarefa 2.14</h2>
<h1>Flexible Image Grid</h1>
<p>Resize the browser window to see the flexible effect.</p>
</header>
<nav>
</nav>
<main>
<section class="row">
<article class="column c1">
<img src="../../images/tarefas/tarefa2-14/wedding.jpg" style="width:100%">
<img src="../../images/tarefas/tarefa2-14/rocks.jpg" style="width:100%">
<img src="../../images/tarefas/tarefa2-14/paris.jpg" style="width:100%">
<img src="../../images/tarefas/tarefa2-14/nature.jpg" style="width:100%">
</article>
<img src="../../images/tarefas/tarefa2-14/underwater.jpg" style="width:100%">
</article>
<img src="../../images/tarefas/tarefa2-14/paris.jpg" style="width:100%">
<img src="../../images/tarefas/tarefa2-14/nature.jpg" style="width:100%">
</article>
<img src="../../images/tarefas/tarefa2-14/underwater.jpg" style="width:100%">
</article>
</section>
</main>
<footer class="clearfix">
<p class="f_left">Javier Seco Benso<p>
<p class="f_right">Deseño de Interfaces Web<p>
</footer>
</body>
</html>
O código css base será o seguinte:
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
background-color: ghostwhite;
}
header {
text-align: center;
padding: 15px;
}
footer {
clear: left;
padding: 2.5rem 10rem;
Páxina 16 de 20
background-color: white;
font-size: 0.8rem;
color: black;
padding: 2rem 4rem;
}
footer p {
margin: 0rem;
padding; 0rem;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.f_left {
float: left;
}
.f_right {
float: right;
}
Páxina 17 de 20
Tarefa 2.15. Sitio responsivo Flexbox

Crea a páxina “tarefa2-15.html” que teña o seguinte aspecto mediante caixas Flexbox:
 nav: mediante Flexbox, cada opción ocupará o 25% do ancho.

 div.row: Flexbox horizontal, con wrap, que contén <aside> 30% e <main> 70%.
 aside: a segunda sección contén un <div> onde se mostran as imaxes mediante Flexbox horizontal, con wrap. Cada
caixa ocupará o 50% do ancho, agás a terceira caixa que ocupa o 100%.
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<header>
<h1>Ejercicio 2.15</h1>
<p>With a <b>flexible</b> layout.</p>
</header>
<nav>
<a href="#">Link 1</a>
</nav>
<div class="row">
Páxina 18 de 20
<aside>
<section class="aside1">
<h2>About Me</h2>
<h5>Photo of me:</h5>
<figure>
<div class="fakeimg1">Image</div>
</figure>
<p>Some text about me in culpa qui officia deserunt mollit anim..</p>
</section>
<section class="aside2">
<h3>More Text</h3>
<p>Lorem ipsum dolor sit ame.</p>
<div class="aside2">
<figure class="fakeimg2">
<div class="fakeimg2">Image1</div>
</figure>
</figure >
<figure class="fakeimg2 big">
</figure>
</figure>
</figure>
</div>
</section>
</aside>
<main>
<section>
<article>
<header>
<hgroup>
<h2>TITLE HEADING</h2>
<h5>Title description, Dec 7, 2017</h5>
</hgroup>
</header>
<figure>
</figure>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco.</p>
</article>
<article>
<header>
<hgroup>
<h2>TITLE HEADING</h2>
<h5>Title description, Sep 2, 2017</h5>
</hgroup>
</header>
<figure>
</figure>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco.</p>
</article>
</section>
</main>
</div>
</main>
<footer>
<h2>Footer</h2>
</footer>
</body>
</html>
Páxina 19 de 20
O código css base será o seguinte:
* {
box-sizing: border-box;
}
/* Style the body */

body {
font-family: Arial;
margin: 0;
}
/* Header/logo Title */
body > header {
padding: 30px;
text-align: center;
background: #1abc9c;
color: white;
}
/* Style the navigation bar links */

nav a {
color: white;
padding: 14px 20px;
text-decoration: none;
text-align: center;
}
nav a:hover {
background-color: #ddd;
color: black;
}
/* Main column */
main {
flex: 70%;
background-color: white;
padding: 20px;
}
article {
margin-bottom: 40px;
}
/* Fake image, just for this example */

div.fakeimg1 {
background-color: #aaa;
width: 100%;
height:200px;
padding: 20px;
text-align: center;
}
div.fakeimg2 {
background-color: #aaa;
width: 100%;
height:60px;
padding: 20px;
text-align: center;
}
figure {
margin: 0;
padding: 0;
}
/* Footer */
footer {
padding: 20px;
text-align: center;
background: #ddd;
}
Páxina 20 de 20

Nadanadadenadanada

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

Nadanadadenadanada

Uploaded by

Copyright:

Available Formats

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

Tarefa 2.10. Elementos flotantes CSS ....................................................................................... 2

Tarefa 2.10. Elementos flotantes CSS

O código html base é o seguinte:

Tarefa 2.11. Citas flotantes

O código html base é o seguinte:

Tarefa 2.12. Efemérides flotantes

O código html base é o seguinte:

Tarefa 2.13. Frutas Flexbox

Por defecto, o documento presentará o seguinte estilo:

1.1. Caixas estándar

1.2. Caixas con xustificado de espazo ao redor

1.3. Caixas con aliñado centrado

1.4. Caixas de 250px de ancho e disposición interna de Flexbox invertido

O código html base será o seguinte:

<div class="ficha dos">

<div class="ficha tres">

<div class="ficha cuatro">

<div class="ficha cinco">

Tarefa 2.14. Galería responsiva Flexbox

Por defecto, o documento presentará o seguinte estilo:

O código html base será o seguinte:

O código css base será o seguinte:

Tarefa 2.15. Sitio responsivo Flexbox

Por defecto, o documento presentará o seguinte estilo:

 nav: mediante Flexbox, cada opción ocupará o 25% do ancho.

O código html base será o seguinte:

O código css base será o seguinte:

/* Style the body */

/* Style the navigation bar links */

/* Fake image, just for this example */

You might also like