Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: Chompy129 en 23 de Septiembre 2016, 04:29
-
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
<!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
/*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);}
-
Buenas Chompy129
Poco que decir, ejercicio bien resuelto.
Saludos.