Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: EnigmaticNerd en 24 de Septiembre 2017, 00:10
-
Buenas tardes. Este es el enunciado del ejercicio CU01048D del tutorial pdf de programación web con CSS:
Crea una lista ul con 27 elementos li (puedes partir del menú que tenemos en el código HTML de base que venimos empleando a lo largo del curso si lo deseas). Sobre dicha lista aplica los siguientes estilos a los elementos de la lista: los tres primeros elementos tipo disc y outside sin usar la propiedad shorthand, los tres siguientes tipo circle e inside sin usar la propiedad shorthand, los tres siguientes tipo square e inside, los tres siguientes none, los tres siguientes decimal y outside, los tres siguientes decimal-leading-zero y outside, los tres siguientes lower-roman e inside, los tres siguientes upper-alpha e inside, y los tres últimos con una imagen mediante list-style-image.
Acá el código:
<!DOCTYPE html>
<html lang="es">
<head>
<title>
CU01048D
</title>
<meta name="author" content="EnigmaticNerd"/>
<meta name="description" content="Listas CSS - aprenderaprogramar.com"/>
<meta name="keywords" content="Css, cursos, diseño, listas, list-style-type, list-style-position, aprenderaprogramar.com"/>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="estilos/CU01048.css"/>
</head>
<body>
<ul>
<div>
<li>Ácido</li>
<li>Ácido</li>
<li>Ácido</li>
</div>
<div>
<li>Ácido</li>
<li>Ácido</li>
<li>Ácido</li>
</div>
<div>
<li>Ácido</li>
<li>Ácido</li>
<li>Ácido</li>
</div>
<div>
<li>Ácido</li>
<li>Ácido</li>
<li>Ácido</li>
</div>
<div>
<li>Ácido</li>
<li>Ácido</li>
<li>Ácido</li>
</div>
<div>
<li>Ácido</li>
<li>Ácido</li>
<li>Ácido</li>
</div>
<div>
<li>Ácido</li>
<li>Ácido</li>
<li>Ácido</li>
</div>
<div>
<li>Ácido</li>
<li>Ácido</li>
<li>Ácido</li>
</div>
<div>
<li>
<p>Ácido</p>
</li>
<li>
<p>Ácido</p>
</li>
<li>
<p>Ácido</p>
</li>
</div>
</ul>
</body>
</html>
Acá la hoja de estilos css:
/*Estilos para el ejercicio CU01048D*/
ul{
margin:0;
}
p{
position:relative;
bottom:12px;
padding-bottom:7px;
}
div:first-child :nth-child(-n+3){
list-style-type:disc;
list-style-position:outside;
}
div:nth-child(2) :nth-child(-n+3){
list-style-type:circle;
list-style-position:inside;
}
div:nth-child(3) :nth-child(-n+3){
list-style: square inside;
}
div:nth-child(4) :nth-child(-n+3){
list-style-type:none;
}
div:nth-child(5) :nth-child(-n+3){
list-style-type:decimal;
list-style-position:outside;
}
div:nth-child(6) :nth-child(-n+3){
list-style-type:decimal-leading-zero;
list-style-position:outside;
}
div:nth-child(7) :nth-child(-n+3){
list-style-type:lower-roman;
list-style-position:inside;
}
div:nth-child(8) :nth-child(-n+3){
list-style-type:upper-alpha;
list-style-position:inside;
}
div:last-child :nth-child(-n+3){
margin-top:25px;
list-style-type:katakana;
list-style-image:url(https://i.imgur.com/fyAjgIo.png);
}
Si tienen correcciones o sugerencias, se las agradeceré enormemente. Gracias.
-
Hola EnigmaticNerd, el ejercicio cumple con lo que se pedía aunque veo algo de complicación en definir div para después aplicarles estilos. Puede verse otra solución donde se define la lista de forma continuada sin separar div en https://www.aprenderaprogramar.com/foros/index.php?topic=4273.0
Saludos