Buenos días amigos aquí os dejo el ejercicio CU01048D del curso de programador web CSS desde cero para que la echéis un vistazo a ver que os parece; decir que en el ultimo li en el css list-style-image también e puesto para que la imagen se viese bien list-style-position inside aunque no lo pedía el ejercicio.
Bueno como siempre dar las gracias por vuestro tiempo porque entre todos hacéis una labor increible, a mi me estáis ayudando mucho y os lo agradezco, porque cada vez me gusta mas lo que estoy haciendo.
saludos...
Hay van los códigos...
<!DOCTYPE html>
<html lang="es">
<head>
<meta name="description" content="portal web aprenderaprogramar,com"/>
<meta name="keywords" content="Estilos de listas css list-style-type list-style-position list-style-image"/>
<meta charset="utf-8"/>
<title>Estilos de listas CSS </title>
<link rel="stylesheet" type="text/css" href="estilos23.css"/>
</head>
<body>
<div>
<ul>
<li>Componente 1</li>
<li>Componente 2</li>
<li>Componente 3</li>
<li>Componente 4</li>
<li>Componente 5</li>
<li>Componente 6</li>
<li>Componente 7</li>
<li>Componente 8</li>
<li>Componente 9</li>
<li>Componente 10</li>
<li>Componente 11</li>
<li>Componente 12</li>
<li>Componente 13</li>
<li>Componente 14</li>
<li>Componente 15</li>
<li>Componente 16</li>
<li>Componente 17</li>
<li>Componente 18</li>
<li>Componente 19</li>
<li>Componente 20</li>
<li>Componente 21</li>
<li>Componente 22</li>
<li>Componente 23</li>
<li>Componente 24</li>
<li>Componente 25</li>
<li>Componente 26</li>
<li>Componente 27</li>
</ul>
</div>
</body>
</html>
Y ahora el CSS....
/*Ejercicio CU01048D curso CSS estilos de listas css, list-style-type, list-style-position, list-style-image, propiedades shortand
list-style*/
li:first-child, li:nth-child(2), li:nth-child(3){
list-style-type: disc;
list-style-position: outside;
}
li:nth-child(4), li:nth-child(5), li:nth-child(6){
list-style-type: circle;
list-style-position: inside;
}
li:nth-child(7), li:nth-child:(8), li:nth-child(9){
list-style: square inside;
}
li:nth-child(10), li:nth-child(11), li:nth-child(12){
list-style: none;
}
li:nth-child(13), li:nth-child(14), li:nth-child(15){
list-style: decimal outside;
}
li:nth-child(16), li:nth-child(17), li:nth-child(18){
list-style: decimal-leading-zero outside;
}
li:nth-child(19), li:nth-child(20), li:nth-child(21){
list-style: lower-roman inside;
}
li:nth-child(22), li:nth-child(23), li:nth-child(24){
list-style: upper-alpha inside;
}
li:nth-child(25), li:nth-child(26), li:nth-child(27){
list-style-image: url(https://www.aprenderaprogramar.com/foros/avatars/APR2.COM_Varios/AprApr_1.jpg);
list-style-position: inside;
}
Tema: HTML y CSS estilos de listas viñeta css list-style-type li:first-child CU01048D# (Leído 2941 veces)
RSS -
WAP2