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.
Tema: Listas HTML diferente estilo gráfico css, list-style-type, list-style CU01048D (Leído 2108 veces)
RSS -
WAP2