Autor Tema: HTML y CSS. list-style. Shorthand de las listas. Ejercicio resuelto CU01048D  (Leído 1853 veces)

Chompy129

  • Intermedio
  • ***
  • Mensajes: 130
  • Programar es divertido. :)
    • Ver Perfil
Ejercicio CU01048D del curso de fundamentos de desarrollo web con CSS.

Listas CSS. list-style-type, list-style-position (outside, inside), list-style-image. Shorthand list-style. (CU01048D)

Aquí les dejo el ejercicio:

Código HTML
Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Listas</title>
<link rel="stylesheet" type="text/css" href="Listas.css">
</head>
<body>
<ul>
<li class="lipr">Esta es una parte de esta lista. Una muy pero muy simple lista. Con algunos detalles.</li>
<li class="lipr">Esta es una parte de esta lista. Una muy pero muy simple lista. Con algunos detalles.</li>
<li class="lipr">Esta es una parte de esta lista. Una muy pero muy simple lista. Con algunos detalles.</li>
<br>
<li class="lise">Esta es una parte de esta lista. Una muy pero muy simple lista. Con algunos detalles.</li>
<li class="lise">Esta es una parte de esta lista. Una muy pero muy simple lista. Con algunos detalles.</li>
<li class="lise">Esta es una parte de esta lista. Una muy pero muy simple lista. Con algunos detalles.</li>
<br>
<li class="litr">Esta es una parte de esta lista. Una muy pero muy simple lista. Con algunos detalles.</li>
<li class="litr">Esta es una parte de esta lista. Una muy pero muy simple lista. Con algunos detalles.</li>
<li class="litr">Esta es una parte de esta lista. Una muy pero muy simple lista. Con algunos detalles.</li>
<br>
<li class="licu">Esta es una parte de esta lista. Una muy pero muy simple lista. Con algunos detalles.</li>
<li class="licu">Esta es una parte de esta lista. Una muy pero muy simple lista. Con algunos detalles.</li>
<li class="licu">Esta es una parte de esta lista. Una muy pero muy simple lista. Con algunos detalles.</li>
<br>
<li class="liqu" value="1">Esta es una parte de esta lista. Una muy pero muy simple lista. Con algunos detalles.</li>
<li class="liqu">Esta es una parte de esta lista. Una muy pero muy simple lista. Con algunos detalles.</li>
<li class="liqu">Esta es una parte de esta lista. Una muy pero muy simple lista. Con algunos detalles.</li>
<br>
<li class="lisex" value="1">Esta es una parte de esta lista. Una muy pero muy simple lista. Con algunos detalles.</li>
<li class="lisex">Esta es una parte de esta lista. Una muy pero muy simple lista. Con algunos detalles.</li>
<li class="lisex">Esta es una parte de esta lista. Una muy pero muy simple lista. Con algunos detalles.</li>
<br>
<li class="lisep">Esta es una parte de esta lista. Una muy pero muy simple lista. Con algunos detalles.</li>
<li class="lisep">Esta es una parte de esta lista. Una muy pero muy simple lista. Con algunos detalles.</li>
<li class="lisep">Esta es una parte de esta lista. Una muy pero muy simple lista. Con algunos detalles.</li>
<br>
<li class="lioc">Esta es una parte de esta lista. Una muy pero muy simple lista. Con algunos detalles.</li>
<li class="lioc">Esta es una parte de esta lista. Una muy pero muy simple lista. Con algunos detalles.</li>
<li class="lioc">Esta es una parte de esta lista. Una muy pero muy simple lista. Con algunos detalles.</li>
<br>
<li class="lino">Esta es una parte de esta lista. Una muy pero muy simple lista. Con algunos detalles.</li>
<li class="lino">Esta es una parte de esta lista. Una muy pero muy simple lista. Con algunos detalles.</li>
<li class="lino">Esta es una parte de esta lista. Una muy pero muy simple lista. Con algunos detalles.</li>
</ul>
</body>
</html>

Código CSS
Código: [Seleccionar]
/*DATOS GENERALES*/
*{font-family: arial;}

/*Lista*/
ul{width: 400px;
   background-color: #FA0;
   border: 3px solid #000;}
/*Elementos de la lista*/

li:nth-child(odd){font-weight: bold;}

.lipr{list-style-type: disc; list-style-position: outside;}

.lise{list-style-type: circle; list-style-position: inside;}

.litr{list-style: square inside;}

.licu{list-style-type: none;}

.liqu{list-style: decimal outside;}

.lisex{list-style: decimal-leading-zero outside;}

.lisep{list-style: lower-roman inside;}

.lioc{list-style: upper-alpha inside;}

.lino{list-style: disc outside url(https://lh6.googleusercontent.com/-l7zUK30iIgw/UlfKjx_P3BI/AAAAAAAAAjI/sh8EjTxxZ3I/s38/CU01047D_2.png);}
« Última modificación: 29 de Septiembre 2016, 19:35 por Alex Rodríguez »

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:HTML y CSS. list-style. Shorthand de las listas. Ejercicio CU01048D
« Respuesta #1 en: 23 de Septiembre 2016, 14:20 »
Buenas Chompy129

Poco que decir, ejercicio bien resuelto.

Saludos.

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".