Desarrollo de Aplicaciones Ejercicios CSS

¡La universidad para todos!
¡La Universidad para todos!
Tema: Ejercicios Con CSS

Docente: Ing. Chauca Castillo Eduardo
Escuela Profesional Periodo académico: 2018-1

INGENIERÍA DE SISTEMAS E INFORMÁTICA Semestre:VII
Unidad:
Ejercicios - Cómo se usa 1

Enunciado
A partir de la página web que se te proporciona, debes emplear

el atributo style para crear una página web que tenga el mismo
aspecto que la siguiente imagen:
Tienes que tener en cuenta los siguientes requisitos:
• El texto principal:
o El color del texto es azul: #00F.
o El color de fondo del texto es verde claro: #CFC.
° El tipo de letra es la secuencia: Georgia, Cambria, serif.
o El tamaño del texto: 16px.
• El encabezado de nivel 1:
o El color del texto es rojo claro: #F00.
o El tipo de letra es la secuencia: Verdana, Calibri, sans-serif
• El encabezado de nivel 2:
o El color del texto es rojo claro: #A00.
o El tipo de letra es la secuencia: Verdana, Calibri, sans-serif
• El color de los campos de los datos del libro es verde oscuro: #060.
• El texto "Internet" y la "Web" cuando actúan como sustantivos:
o Texto en negrita.
• El texto "Hypertext Markup Language", "Cascading Style Sheets" y los
acrónimos "HTML" y "CSS":
o El color del texto es blanco: #FFF.
o El color de fondo del texto es negro: #000.
o Texto en cursiva.
Consejo: puedes utilizar las etiquetas de HTML <em> y <strong>.
Consejo: puedes utilizar la etiqueta de HTML <span> para aplicar un estilo

CSS a cualquier parte del texto.
Solucion
Solucion <!DOCTYPE html>

<html>
<head>
<meta charset="utf-8" />
<title>HTML & CSS: Curso práctico avanzado</title>
</head>
<body style="color: #00F; background-color: #CFC; font-family: Georgia,
Cambria, serif; font-size: 16px;">
<hl style="color: #F00; font-family: Verdana, Calibri, sans-serif;
font-size: 32px;">HTML & CSS: Curso práctico avanzado</hl>
<h2 style="color: #A00; font-family: Verdana, Calibri, sans-serif;

font-size: 24px;">Datos del libro</h2>
<ul>
<li><span style="color: #060;">Titulo:</span> HTML & CSS: Curso
práctico avanzado</li>
<li><span style="color: #060;">Autor:</span> Sergio Lujan Mora</li>
<li><span style="color: #060;">Editorial:</span> Publicaciones
Altaria</li>
<li><span style="color: #060;">Año de publicación:</span> 2015</li>
<li><span style="color: #060;">ISBN:</span> 978-84-944049-4-8</li>
</ul>

font-size: 24px;">Descripción del libro</h2>
<P>
Aunque los inicios de <strong><span style="font-size:
20px;">Internet</span></strong> se remontan a los años sesenta, no ha
sido hasta los años noventa cuando, gracias a la <strong><span
style="font-size: 20px;">Web</span></strong>, se ha extendido su uso
por todo el mundo. En pocos años, la <strong><span style="font-size:
20px;">Web</span></strong> ha evolucionado enormemente: se ha pasado de
páginas sencillas, con pocas imágenes y contenidos estáticos que eran
visitadas por unos pocos usuarios a páginas complejas, con contenidos
dinámicos que provienen de bases de datos y que son visitadas por miles
de usuarios al mismo tiempo.
</p>
<P>
Todas las páginas están internamente construidas con la misma
tecnología, con el Lenguaje de marcas de hipertexto (<em><span
style="color: #FFF; background-color: #000;">Hypertext Markup Language,
HTML</span></em>) y con las Hojas de estilo en cascada (<em><span
style="color: #FFF; background-color: #000;">Cascading Style Sheets,
CSS</span></em>).
</p>
<p>
Este libro es adecuado para cualquiera que tenga interés en aprender a
desarrollar sus propias páginas web. No son necesarios conocimientos
previos para aprender con este libro, lo único que es necesario es
saber utilizar un ordenador y saber navegar por la <strong><span
style="font-size: 20px;">Web</span></strong>.
</p>

font-size: 24px;">Contenido del libro</h2>
<P>
El contenido de este libro se estructura en tres apartados bien
diferenciados:
</p>
<ul>
<li>En la primera parte del libro se trabajan conceptos generales que
son necesarios para poder desarrollar páginas web; se explican
conceptos de estructura física y estructura lógica (o estructura de
navegación) de un sitio web. Se detalla cómo influye la estructura
física en las <em><span style="color: #FFF; background-color:
#000;">URL</span></em> o direcciones que se emplean a la hora de crear
los enlaces de un sitio web. Pasando por el concepto de "estándar web",
un término general que se emplea para refererirse a los estándares que
define su funcionamiento como <em><span style="color: #FFF; background-
color: #000;">HTML</span></em> y <em><span style="color: #FFF;
background-color: #000;">CSS</span></em>, empleados para el desarrollo
de las páginas web en el lado del cliente.</li>
<li>En la segunda parte se trabaja <em><span style="color: #FFF;

background-color: #000;">HTML</span></em>. Partiendo de la estructura
básica de una página web, se explican las etiquetas de <em><span
style="color: #FFF; background-color: #000;">HTML</span></em> que se
utilizan para definir el texto, los enlaces, las listas, las tablas,
los formularios y los elementos multimedia.</li>
<li>En la tercera y última parte se explica <em>>span style="color:

#FFF; background-color: #000;">CSS</span></em>, el lenguaje que se
emplea para definir el formato y la presentación de una página web. Se
explica cómo utilizar el color, cómo definir la presentación del texto,
de las tablas y de los formularios; cómo realizar transformaciones y
transiciones con el fin de diseñar una página web.</li>
</ul>
</body>
</html>
Ejercicios - Selectores 1
Enunciado
A partir de la página web que se te proporciona, debes añadir los selectores a
las reglas CSS para aplicar los estilos deseados y crear una página web que
tenga el mismo aspecto que la siguiente imagen:
Cada regla CSS incluye un comentario en el que se explica los elementos a

los que debe aplicarse.
Código base
Solución
Solucion
<!DOCTYPE html>
<html>
<head>
<title>Ejercicio de selectores</title>
<style>
/* Todos los elementos de la pagina */
{
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
/* Todos los párrafos de la pagina */
{
color: #555;
}
/* Todos los párrafos contenidos en #primero */
#primero p
{
color: #369;
}
/* Todos los enlaces la pagina */

a
{
color: #C30;
}
/* Los elementos <em> contenidos en #primero */
#primero em
{
color: #0000BB;
background-color: #FFFFCC;
}
/* Todos los elementos <em> con la clase "especial" en toda la pagina
*/
em.especial
{
color: #FFFF00;
background: #000000;
}
/* Todos los elementos <span> contenidos en la clase "normal" */
.normal span
{
font-weight: bold;
}
</style>
</head>
<body>
<div id="primero">
<P>
<a href="http://publicacionesaltaria.com/es/tienda/112-html-css-curso-
practico. html">HTML & CSS: Curso práctico avanzado</a>
</p>
<p>
Aunque los inicios de <a
href="https://es.wikipedia.org/wiki/Internet">Internet</a> se remontan
a los años sesenta, no ha sido hasta los años noventa cuando, gracias a
la Web, se ha extendido su uso por todo el mundo. En pocos años, la Web
ha evolucionado enormemente: se ha pasado de páginas sencillas, con
pocas imágenes y contenidos estáticos que eran visitadas por unos pocos
usuarios a <em>páginas complejas, con contenidos dinámicos que
provienen de bases de datos y que son visitadas por miles de usuarios
al mismo tiempo</em>.
</p>
</div>
<p>
Aunque los inicios de <a
href="https://es.wikipedia.org/wiki/Internet">Internet</a> se remontan
a los años sesenta, no ha sido hasta los años noventa cuando, gracias a
la Web, se ha extendido su uso por todo el mundo. En pocos años, la Web
ha evolucionado enormemente: se ha pasado de páginas sencillas, con
pocas imágenes y contenidos estáticos que eran visitadas por unos pocos
usuarios a <em>páginas complejas, con contenidos dinámicos que
provienen de bases de datos y que son visitadas por miles de usuarios
al mismo tiempo</em>.
</p>
</div>
<div id="segundo" class="normal">
<P>
tecnología, con el <em class="especial">Lenguaje de marcas de
hipertexto</em> (<span>Hypertext Markup Language</span>, <a
href="https://es.wikipedia.org/wiki/HTML">HTML</a>) y con las <em
class="especial">Hojas de estilo en cascada</em> (<span>Cascading Style
Sheets</span>, <a href="https://es.wikipedia.org/wiki/CSS">CSS</a>).
</p>
<div id="segundo" class="normal">

<P>
tecnología, con el <em class="especial">Lenguaje de marcas de
hipertexto</em> (<span>Hypertext Markup Language</span>, <a
href="https://es.wikipedia.org/wiki/HTML">HTML</a>) y con las <em
class="especial">Hojas de estilo en cascada</em> (<span>Cascading Style
Sheets</span>, <a href="https://es.wikipedia.org/wiki/CSS">CSS</a>).
</p>
<p>
Este libro es <em>adecuado para cualquiera que tenga interés en
aprender a desarrollar sus propias páginas web</em>. No son necesarios
conocimientos previos para aprender con este libro, lo único que es
necesario es saber utilizar un ordenador y saber navegar por la Web.
</p>
</div>
</body>
</html>
Ejercicios - Selectores 2
Enunciado
A partir de la página web que se te proporciona, debes escribir las reglas
CSS necesarias para lograr una página web que tenga el mismo aspecto
que la siguiente imagen:
Puedes modificar el código HTML proporcionado para añadir los

identificadores y clases que necesites.
En la tabla se indican los nombres de los colores que debes

emplear.
Debes intentar utilizar el mínimo número posible de reglas y

selectores de CSS.
Código base
Solución
Solución <!DOCTYPE html>

<html>
<head>
<title>Ejercicio de selectores</title>
<style>
/* También se podría haber hecho con clases */
#filal {color: teal;}
#fila2 {color: red;}
#fila3 {color: blue;}
#fila4 {color: orange;}
#fila5 {color: purple;}
#fila6 {color: olive;}
#fila7 {color: fuchsia;}
#fila8 {color: green;}
/* Segunda columna */
td + td {background-color: red;}
/* Tercera columna */
td + td + td {background-color: green;}
/* Cuarta columna */
td + td + td + td {background-color: blue;}
</style>
</head>
<body>
<table border="l">
<tr id="filal"><td>teal</td><td>teal</td><td>teal</td><td>teal</td>
</tr>
<tr id="fila2"><td>red</td><td>red</td><td>red</td><td>red</td></tr>
<tr id="fila3"><td>blue</td><td>blue</td><td>blue</td><td>blue</td>
</tr>
<tr id="fila4"><td>orange</td><td>orange</td><td>orange</td>
<td>orange</td></tr>
<tr id="fila5"><td>purple</td><td>purple</td><td>purple</td>
<td>purple</td></tr>
<tr id="fila6"><td>olive</td><td>olive</td><td>olive</td><td>olive</td>
</tr>
<tr id="fila7"><td>fuchsia</td><td>fuchsia</td><td>fuchsia</td>
<td>fuchsia</td></tr>
<tr id="fila8"><td>green</td><td>green</td><td>green</td><td>green</td>
</tr>
</table>
</body>
</html>
Ejercicios - Estilo lista 1

Enunciado

Código base
Solución

<html>
<head>
<title>Ejemplo de listas</title>
<style>
.lista-sin {
list-style-type: none;
}
.lista-circulos {
list-style-type: circle;
}
.lista-cuadrados {
list-style-type: square;
}
.lista-romanos {
list-style-type: lower-roman;
}
.lista-griegos {
list-style-type: lower-greek;
}
</style>
</head>
<body>
<p>Lista sin elemento gráfico:</p>
<ul class="lista-sin">
<li>Elemento K/li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
<p>Lista con círculos:</p>

<ul class="lista-circulos">
<li>Elemento K/li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
<p>Lista con cuadrados:</p>

<ul class="lista-cuadrados">
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
<p>Lista con números romanos:</p>

<ol class="lista-romanos">
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ol>
<p>Lista con letras griegas:</p>

<ol class="lista-griegos">
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ol>
</body>
</html>
Ejercicios - Estilo lista 2

Enunciado
Crea una página web con un menú etiquetado con una lista que
tenga el mismo aspecto que la siguiente imagen:
En la imagen se muestra el efecto que se debe configurar cuando el

cursor del ratón se sitúe encima de un elemento del menú o cuando un
elemento del menú reciba el foco del teclado: se debe mostrar un borde
sólido de color rojo.
Solución
Solución
<!DOCTYPE html>
<html>
<head>
<title>Página web con menú</title>
<style>
ul {
text-align: center;
/* Suficiente anchura para que quepa "Presentación" */
width: 120px;
padding: 0;
}
li {
background-color: #00F;
color: #FFF;
/* El borde blanco separa los elementos */
border: 2px solid #FFF;
li a {
color: #FFF;
text-decoration: none;
/* Necesario para que el enlace ocupe todo el ancho del elemento de
la lista */
display: block;
width: 100%;
}
/* Efecto cuando se sitúa el ratón encima de un elemento de la lista o

cuando recibe el foco del teclado */
li a:hover, li a:focus {
/* ¿Qué pasa si se utiliza la propiedad border */
outline: 2px solid #F00;
}
</style>
</head>
<body>
<hl>Universidad de Alicante</hl>
<ul>
<li><a href="">Presentación</a></li>
<li><a href="">Estudios</a></li>
<li><a href="">Alumnos</a></li>
<li><a href="">Deportes</a></li>
<li><a href="">Servicios</a></li>
</ul>
</body>
</html>
Ejercicios - Modelo caja 1

Enunciado
que la siguiente imagen
Los bordes que debes definir son:

•Encabezado nivel 1: borde inferior con una anchura de 2px, sólido y de
color azul (#00F).
•Encabezado nivel 2: borde completo con una anchura de 2px, sólido y de
color gris (#AAA).
•Lista con los datos del libro: borde superior e inferior con una anchura de
4px, punteado y de color rojo (#F00).
•Lista con el contenido del libro: borde completo con una anchura de 2px,
con guiones y de color verde (#0F0).

Código
Solución
<!DOCTYPE html>
<html>
<head>
<style>
hi {
border-bottom: 2px solid #00F;
}
h2 {
border: 2px solid #AAA;
}
#datos {
border-top: 4px dotted #F00;
border-bottom: 4px dotted #F00;
}
#contenido {
border: 2px dashed #0F0;
}
</style>
</head>
<body>
<h1>HTML & CSS: Curso práctico avanzado</hl>
<h2>Datos del libro</h2>
<ul id="datos">
<li>Titulo: HTML & CSS: Curso práctico avanzado</li>
<li>Autor: Sergio Lujan Mora</li>
<li>Editorial: Publicaciones Altaria</li>
<li>Año de publicación: 2015</li>
<li>ISBN: 978-84-944049-4-8</li>
</ul>
<h2>Descripción del libro</h2>

<p>
Aunque los inicios de Internet se remontan a los años sesenta, no ha sido hasta los
años noventa cuando, gracias a la Web, se ha extendido su uso por todo el mundo.
En pocos años, la Web ha evolucionado enormemente: se ha pasado de páginas
sencillas, con pocas imágenes y contenidos estáticos que eran visitadas por unos
pocos usuarios a páginas complejas, con contenidos dinámicos que provienen de
bases de datos y que son visitadas por miles de usuarios al mismo tiempo.
</p>
<P>
Todas las páginas están internamente construidas con la misma tecnología, con el
Lenguaje de marcas de hipertexto (Hypertext Markup Language, HTML) y con las
Hojas de estilo en cascada (Cascading Style Sheets, CSS).
</p>
<P>
Este libro es adecuado para cualquiera que tenga interés en aprender a desarrollar
sus propias páginas web. No son necesarios conocimientos previos para aprender
con este libro, lo único que es necesario es saber utilizar un ordenador y saber
navegar por la Web.
</p>
<h2>Contenido del libro</h2>

<P>
diferenciados:
</p>
<ul id="contenido">
física en las URL o direcciones que se emplean a la hora de crear los
enlaces de un sitio web. Pasando por el concepto de "estándar web", un
término general que se emplea para refererirse a los estándares que
define su funcionamiento como HTML y CSS, empleados para el desarrollo
<li>En la segunda parte se trabaja HTML. Partiendo de la estructura

básica de una página web, se explican las etiquetas de HTML que se
<li>En la tercera y última parte se explica CSS, el lenguaje que se

</ul>
</body>
</html>
Ejercicios - Modelo caja 2

Enunciado
A partir de la página web que se te proporciona, debes escribir las
reglas CSS necesarias para lograr una página web que tenga el
mismo aspecto que la siguiente imagen:
Los bordes que debes definir son:

• Encabezado nivel 1: borde completo con una anchura de 2px, sólido y de
color azul (#00F).
• Encabezado nivel 2: borde completo con una anchura de 2px, sólido y de
color gris (#AAA).
• Listas: borde completo con una anchura de 2px, solido y de color verde
(#0F0).
En la siguiente imagen se indican las dimensiones que deben tener ciertas partes
de la página:
• A: relleno izquierdo y derecho de 10px.

• B: relleno de 10 px.
• C: margen superior e inferior de 30px.
• D: relleno de 5 px.
• E: margen superior e inferior de 15px.
• F: margen entre los elementos de la lista de 15 px.
Código base
Solución

<html>
<head>
<style>
body {
padding-left: 10px;
padding-right: 10px;
}
h1 {
border: 2px solid #00F;
padding: 10px;
margin-top: 30px;
margin-bottom: 30px;
}
h2 {
border: 2px solid #AAA;
padding: 5px;
margin-top: 15px;
margin-bottom: 15px;
ul {
border: 2px solid #0F0;
}
li {
ma rgin-bottom: 0;
li + li {
margin-top: 15px;
}
</style>
</head>
<body>
<hi>HTML & CSS: Curso práctico avanzado</hl>
<ul id="datos">
<li>Titulo: HTML & CSS: Curso práctico avanzado</li>
<li>ISBN: 978-84-944049-4-8</li>
</ul>

<P>
Aunque los inicios de Internet se remontan a los años sesenta, no ha sido hasta los
años noventa cuando, gracias a la Web, se ha extendido su uso por todo el mundo.
En pocos años, la Web ha evolucionado enormemente: se ha pasado de páginas
sencillas, con pocas imágenes y contenidos estáticos que eran visitadas por unos
pocos usuarios a páginas complejas, con contenidos dinámicos que provienen de
bases de datos y que son visitadas por miles de usuarios al mismo tiempo.
</p>
<P>
Todas las páginas están internamente construidas con la misma tecnología, con el
Lenguaje de marcas de hipertexto (Hypertext Markup Language, HTML) y con
las Hojas de estilo en cascada (Cascading Style Sheets, CSS).
</p>
<P>
Este libro es adecuado para cualquiera que tenga interés en aprender a desarrollar
sus propias páginas web. No son necesarios conocimientos previos para aprender
con este libro, lo único que es necesario es saber utilizar un ordenador y saber
navegar por la Web.
</p>

<P>
diferenciados:
</p>
<ul id="contenido">


</ul>
</body>
</html>
Ejercicios - Maquetación diseño fijo

Enunciado
Las características del diseño de esta página son:

• Un diseño fijo centrado con un ancho de 960 px.
• El encabezado de nivel 1 centrado.
• El contenido principal de la página se organiza en dos columnas, una
de 260 px de ancho y la otra el espacio restante de 700 px.
• La lista que explica el contenido del libro se muestra como un texto a
tres columnas del mismo ancho.

identificadores y clases que necesites. También puedes añadir etiquetas
<div> para definir elementos contenedores en la página.
Código
base
Solución
<!DOCTYPE html>
<html>
<head>
<title>HTML & CSS: Curso
<style>
body {
width: 960px;
margin: 0 auto;
}
h1{
text-align: center;
#datos, #principal {
float: left;
padding: 0;
margin: 0;
práctico avanzado</title>
}
#datos {
width: 260px;
}
#principal {
width: 700px;
}
#contenido {
padding: 0;
}
#contenido li {
float: left;
width: 33%;
}
</style>
</head>
<body>
<hi>HTML & CSS: Curso práctico avanzado</hl>
<div id="datos">
<ul>
<li>Título: HTML & CSS: Curso práctico avanzado</li>
<1i>ISBN: 978-84-944049-4-8</li>
</ul>
</div>
<div id="principal">
<P>
Aunque los inicios de Internet se remontan a los años sesenta, no ha
sido hasta los años noventa cuando, gracias a la Web, se ha extendido
su uso por todo el mundo. En pocos años, la Web ha evolucionado
enormemente: se ha pasado de páginas sencillas, con pocas imágenes y
contenidos estáticos que eran visitadas por unos pocos usuarios a
páginas complejas, con contenidos dinámicos que provienen de bases de
datos y que son visitadas por miles de usuarios al mismo tiempo.
</p>
<p>
tecnología, con el Lenguaje de marcas de hipertexto (Hypertext Markup
Language, HTML) y con las Hojas de estilo en cascada (Cascading Style
Sheets, CSS).
</p>
<P>
Este libro es adecuado para cualquiera que tenga interés en aprender a
desarrollar sus propias páginas web. No son necesarios conocimientos
previos para aprender con este libro, lo único que es necesario es
saber utilizar un ordenador y saber navegar por la Web.
</p>
<P>
diferenciados:
</p>
<ul id="contenido">


</ul>
</div>
</body>
</html>
Ejercicios - Maquetación formulario 1

Enunciado
Crea una página web con un formulario que tenga el mismo aspecto
En la imagen animada se muestra:

• El efecto que se debe configurar cuando el cursor del ratón se sitúe
encima de un control del formulario: se debe destacar con un fondo de
color rojo.
• El efecto que se debe configurar cuando un control del formulario
reciba el foco del teclado: se debe destacar con un fondo de color
amarillo.
Además:
• Contenido de la página centrado.
• Título y subtítulo: tipo de letra Georgia, serif.
• Tipo de letra principal: Arial, Helvetica, sans-serif
• Leyendas (legend) y etiquetas: negrita.
Consejo: existen muchas formas de resolver este ejercicio, lo normal es que

tu solución no se parezca a la solución que te proporcionamos.
Solución
<!DOCTYPE html>
<html lang="es">
<head>
<title>Registro - iDESWEB</title>
<style>
body {
width: 90%;
margin: 0 auto;
}
header {
text-align: center;
}
h1, h2 {
font-family: Georgia, serif;
}
h1 {
font-size: 3em;
}
fieldset {
margin: lem auto;
}
legend {
font-size: 1.2em;
font-weight: bold;
text-transform: uppercase;
}
label {
font-weight: bold;
display: block;
}
input:focus, select: focus {
background-color: yellow;
}
input:hover, select: hover {
background-color: red;
}
#boton-crear {
font-size: 2em;
padding: 0.5em;
.inline {
display: inline;
}
.centrado {
text-align: center;
}
</style>
</head>
<body>
<header>
<hl>iDESWEB</hl>
<h2>Formulario de registro</h2>
</header>
<form action="" method="post">
<fieldset>
<legend>¿Quien eres?</legend>
<P>
<p>
<label for="nombre">Nombre</label>
<input type="text" name="nombre" id="nombre" />
<label for="apellidos">Apellidos</label>
<input type="text" name="apellidos" id="apellidos" />
</p>
<P>
<label for="nombre">Correo electrónico</label>
<input type="text" name="correo" id="correo" />
</p>
<P>
<label for="dia">Fecha de nacimiento</label>
<select name="dia" id="dia">
<option>Dia</option>
</select>
<select name="mes" id="mes">

<option>Mes</option>
</select>
<select name="anyo" id="anyo">

<option>Año</option>
</select>
</p>
</fieldset>
<fieldset>
<legend>¿De dónde eres?</legend>
<P>
<label for="ciudad">Ciudad</label>
<input type="text" name="ciudad" id="ciudad" />
</p>
<P>
<label for="cp">Código postal</label>
<input type="text" name="cp" id="cp" />
</p>
<P>
<label for="pais">Pais</label>
<select name="pais" id="pais">
<option>Pais</option>
</select>
</p>
</fieldset>
<fieldset>
<legend>¿Cómo quieres iniciar sesión?</legend>
<P>
<label for="nomusu">Nombre de usuario</label>
<input type="text" name="nomusu" id="nomusu" />
</p>
<P>
<label for="contrasenya">Contraseña</label>
<input type="password" name="contrasenya" id="contrasenya" />
</p>
<P>
<label for="repcontrasenya">Vuelve a escribir la contraseña</label
<input type="password" name="repcontrasenya" id="repcontrasenya" /
</p>
</fieldset>
<fieldset>
<legend>Condiciones de registro</legend>
<P>
<label>Deseo recibir ofertas de iDESWEB</label>
<input type="radio" name="ofertas" id="ofertasl" value="l" /> <label
for="ofertasl" class="inline">Una vez al día</label>
<input type="radio" name="ofertas" id="ofertas2" value="2" /> <label
for="ofertas2" class="inline">Una vez a la semana</label>
<input type="radio" name="ofertas" id="ofertas3" value="3" /> <label
for="ofertas3" class="inline">Una vez al mes</label>
</p>
<P>
<input type="checkbox" name="acepto" id="acepto" />
<label for="acepto" class="inline">Acepto el acuerdo de servicios, la
declaración de privacidad y la declaración de uso de cookies</label>
</p>
</fieldset>
<p class="centrado">
<input type="submit" value="Crear cuenta" id="boton-crear" />
</p>
<p class="centrado">
<input type="submit" value="Crear cuenta"
id="boton-crear" />
</p>
</form>
</body>
</html>
Ejercicios - Maquetación formulario 2

Enunciado
Crea una página web con un formulario que tenga el mismo
aspecto que la siguiente imagen:
En la imagen animada se muestra:

•El efecto que se debe configurar cuando el cursor del ratón se sitúe
encima de una línea del formulario.
•El efecto que se debe configurar cuando un control del formulario reciba
el foco del teclado.
Consejo: existen muchas formas de resolver este ejercicio, lo normal es que tu

solución no se parezca a la solución que te proporcionamos.
Solución
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de formulario maquetado</title>
<style type="text/css">
/* Características generales de la página */
body {
font-size: 14px;
font-family: Arial, sans-serif;
background: #AAA;
}
/* El contenedor define la zona principal de contenido */
#contenedor {
background: #FFF;
margin: lem auto;
padding: lem;
width: 768px;
}
/* El formulario esta definido como una lista */

ul {
list-style: none;
margin: 0;
padding: 0;
}
ul li {
border-top: lpx solid #CCC;
margin: lem 0;
padding: lem;
width: auto;
overflow: hidden;
}
/* El formulario se organiza en dos columnas, el título y los controles */
ul li label.titulo {
float: left;
width: 150px;
text-align: right;
}
ul li div.controles {
margin-left: 160px;
>
/* El último elemento del formulario es el botón "Registrarse" */
ul li.botones {
border-top: 2px solid #CCC;
clear: both;
float: none;
padding: lem 0;
text-align: right;
width: 100%;
}
ul li.botones input {
font-size: 18px;
}
/* El título de los elementos de la lista */
ul li label.titulo {
font-weight: bold;
}
ul li div span {
float: left;
padding: 0.3em 0;
}
ul li div span. completo {
width: 100%;
}
ul li div span. mitad {
width: 50%;
}
ul li div span. tercio {
width: 33%;
}
ul li div span. dos tercios {
width: 66%;
}
/* Como se define display: block, se muestra en la línea siguiente */

ul li div span label {
display: block;
font-size: 12px;
color: #333;
}
/* Configuración de los controles del formulario */
ul li input {
padding: 0.2em;
input#apellidol, input#apellido2, input#direccion, input#email {
width: 260px;
}
input#codigopostal {
width: 80px;
}
select#provincia {
width: 90px;
}
select#pais {
width: 150px;
}
input#telefonofijo, input#telefonomovil {
width: 135px;
}
/* Cambia el color cuando se sitúa el cursor del ratón */
ul li: hover {
background-color: #FF9;
}
ul li.botones:hover {
background-color: transparent;
}
/* Destaca el control cuando recibe el foco */
ul li input, ul li select {
border: 2px solid transparent;
border-bottom: 2px solid black;
}
ul li.botones input {
border: 2px solid #CCC;
}
ul li input:focus, ul li select:focus {
border: 2px solid #F00;
}
</style>
</head>
<body>
<div id="contenedor">
<hl>Formulario de registro</hl>
<form method="post" action="#">

<ul>
<li>
<label class="titulo" for="nombre">Nombre y apellidos</label>
<div class="controles">
<span class="completo">
<input id="nombre" name="nombre" value="" />
<label for="nombre">Nombre</label>
</span>
<input id="apellidol" name="apellidol" value="" />
<label for="apellidol">Primer apellido</label>
</span>
<input id="apellido2" name="apellido2" value="" />
<label for="apellido2">Segundo apellido</label>
</span>
</div>
</li>
<li>
<label class="titulo" for="direccion">Dirección</label>
<input id="direccion" name="direccion" value="" />
<label for="direccion">Calle, número, piso, puerta</label>
</span>
<span class="tercio">
<input id="codigopostal" name="codigopostal" value="" />
<label for="codigopostal">Código postal</label>
</span>
<span class="dostercios">
<input id="municipio" name="municipio" value="" />
<label for="municipio">Municipio</label>
</span>
<span class="tercio">
<select id="provincia" name="provincia">
<option value=""></option>
<option value="provincial">Provincia 1</option>
<option value="provincia2">Provincia 2</option>
<option value="provincia3">Provincia 3</option>
</select>
<label for="provincia">Provincia</label>
</span>
<span class="dostercios">
<select id="pais" name="pais">
<option value="“></option>
<option value="paisl">Pais l</option>
<option value="pais2">Pais 2</option>
<option value="pais3">Pais 3</option>
</select>
<label for="pais">Pais</label>
</span>
</div>
</li>
<li>
<label class="titulo" for="email">Email</label>
<input id="email" name="email" value="" />
</span>
</div>
</li>
<li>
<label class="titulo" for="telefonofijo">Teléfono</label>
<span class="mitad">
<input id="telefonofijo" name="telefonofijo" value="" />
<label for="telefonofijo">Fijo</label>
</span>
<span class="mitad">
<input id="telefonomovil" name="telefonomovil" value="" />
<label for="telefonomovil">Jvlóvil</label>
</span>
</div>
</li>
<li class="botones">
<input id="alta" type="submit" value="Registrarse" />
</li>
</ul>
</form>
</div>
</body>
</html>
Ejercicios - Selectores avanzados

Enunciado
En la imagen anterior se muestra lo que debe ocurrir al situar el

cursor del ratón sobre una de las filas de datos de la tabla: el color
de fondo de las celdas debe cambiar a amarillo (#FFFF66).
Nota: busca en Internet las imágenes necesarias para representar

los símbolos de las diferentes monedas. Las imágenes las debes
colocar como imágenes decorativas desde CSS.
Código base
Solución
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de selectores avanzados</title>
<style>
table {
text-align: center;
}
table, tr, th, td {
border: lpx solid #333;
line-height: 2em;
}
th {
background-color: #F5F5F5;
padding: 0 .5em;
}
td {
padding: 0 .3em;
}
th.euro {
background: #E6F3FF url(imagenes/euro.png) no-repeat left center;
padding: 0 .3em 0 1.2em;
}
th.dolar {
background: #E6F3FF url(imagenes/dolar.png) no-repeat left center;
}
th.libra {
background: #E6F3FF url(imagenes/libra.png) no-repeat left center;
}
th.yen {
background: #E6F3FF url(imagenes/yen.png) no-repeat left center;
}
tr:nth-child(n+l) td {
text-align: right;
}
tr:nth-child(2n) {
background-color: #FFFFCC;
}
tr:hover {
background: #FFFF66;
}
</style>
</head>
<body>
<table>
<tr>
<th>Cambio</th>
<th>Compra</th>
<th>Venta</th>
<th>Maximo</th>
<th>Minimo</th>
</tr>
<tr>
<th class="euro">Euro/Dolar</th>
<td>1.25</td>
<td>1.25</td>
<td>1.25</td>
<td>1.24</td>
</tr>
<tr>
<th class="dolar">Dolar/Yen</th>
<td>119.0K/td>
<td>119.05</td>
<td>119.82</td>
<td>119.82</td>
</tr>
<tr>
<th class="libra"> Libra/Dolar</th>
<td>1.86</td>
<td>1.86</td>
<td>1.86</td>
<td>1.85</td>
</tr>
<tr>
<th class="yen">Yen/Euro</th>
<td>0.67</td>
<td>0.67</td>
<td>0.66</td>
<td>0.67</td>
</tr>
</table>
</body>
</html>
¡Gracias!

Desarrollo de Aplicaciones Ejercicios CSS

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Desarrollo de Aplicaciones Ejercicios CSS

Загружено:

Авторское право:

Доступные форматы

¡La universidad para todos!

¡La Universidad para todos!

Tema: Ejercicios Con CSS

Escuela Profesional Periodo académico: 2018-1

Ejercicios - Cómo se usa 1

A partir de la página web que se te proporciona, debes emplear

Tienes que tener en cuenta los siguientes requisitos:

Consejo: puedes utilizar la etiqueta de HTML <span> para aplicar un estilo

Solucion <!DOCTYPE html>

<h2 style="color: #A00; font-family: Verdana, Calibri, sans-serif;

<h2 style="color: #A00; font-family: Verdana, Calibri, sans-serif;

<h2 style="color: #A00; font-family: Verdana, Calibri, sans-serif;

<li>En la segunda parte se trabaja <em><span style="color: #FFF;

<li>En la tercera y última parte se explica <em>>span style="color:

Cada regla CSS incluye un comentario en el que se explica los elementos a

/* Todos los enlaces la pagina */

<div id="segundo" class="normal">

Puedes modificar el código HTML proporcionado para añadir los

En la tabla se indican los nombres de los colores que debes

Debes intentar utilizar el mínimo número posible de reglas y

Solución <!DOCTYPE html>

Ejercicios - Estilo lista 1

Puedes modificar el código HTML proporcionado para añadir los

Solución <!DOCTYPE html>

<p>Lista con círculos:</p>

<p>Lista con cuadrados:</p>

<p>Lista con números romanos:</p>

<p>Lista con letras griegas:</p>

Ejercicios - Estilo lista 2

En la imagen se muestra el efecto que se debe configurar cuando el

/* Efecto cuando se sitúa el ratón encima de un elemento de la lista o

Ejercicios - Modelo caja 1

Los bordes que debes definir son:

Puedes modificar el código HTML proporcionado para añadir los

<h2>Datos del libro</h2>

<h2>Descripción del libro</h2>

<h2>Contenido del libro</h2>

<li>En la segunda parte se trabaja HTML. Partiendo de la estructura

<li>En la tercera y última parte se explica CSS, el lenguaje que se

Ejercicios - Modelo caja 2

Los bordes que debes definir son:

• A: relleno izquierdo y derecho de 10px.

Solución <!DOCTYPE html>

<h2>Descripción del libro</h2>

<h2>Contenido del libro</h2>

<li>En la segunda parte se trabaja HTML. Partiendo de la estructura

<li>En la tercera y última parte se explica CSS, el lenguaje que se

Ejercicios - Maquetación diseño fijo

Las características del diseño de esta página son:

Puedes modificar el código HTML proporcionado para añadir los

<h2>Contenido del libro</h2>

<li>En la segunda parte se trabaja HTML. Partiendo de la estructura

<li>En la tercera y última parte se explica CSS, el lenguaje que se

Ejercicios - Maquetación formulario 1

En la imagen animada se muestra:

Consejo: existen muchas formas de resolver este ejercicio, lo normal es que

<select name="mes" id="mes">

<select name="anyo" id="anyo">

Ejercicios - Maquetación formulario 2

En la imagen animada se muestra:

Consejo: existen muchas formas de resolver este ejercicio, lo normal es que tu

/* El formulario esta definido como una lista */

/* Como se define display: block, se muestra en la línea siguiente */

<form method="post" action="#">