Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: LuisM en 27 de Septiembre 2017, 20:29
-
Hola a todos !! Dejo el código del ejercicio propuesto CU00718B del tutorial de programación HTML en pdf. Desde ya muchas gracias.
Saludos, Luis
EJERCICIO
Crea una lista ordenada cuyos elementos sean Doctores, Ayudantes y Auxiliares. Dentro de Doctores define una lista no ordenada cuyos elementos sean: Juana Pérez, Alberto Márquez, Raúl Moreno. Dentro de Ayudantes define una lista no ordenada cuyos elementos sean: Noelia Suárez, Abel Rebollo. Dentro de Auxiliares crea una lista no ordenada cuyos elementos sean Silvia Estévez, Angela González y Cuarthemoc Adanez. Separa cada lista con un elemento hr de color azul, 10 pixeles de grosor y que ocupe el 50% del ancho disponible.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo del uso de listas - aprenderaprogramar.com</title>
</head>
<body>
<ol>
<li> Doctores </li>
<ul style="list-style-type:disc">
<li> Juana Pérez </li>
<li> Alberto Márquez </li>
<li> Raúl Moreno </li>
</ul>
<hr style="height:10px; background-color: blue; width:50%;" />
<li> Ayudantes </li>
<ul style="list-style-type:circle">
<li> Noelia Suárez </li>
<li> Abel Rebollo </li>
</ul>
<hr style="height:10px; background-color: blue; width:50%;" />
<li> Auxiliares </li>
<ul style="list-style-type:square">
<li> Silvia Estévez </li>
<li> Angela González </li>
<li> Cuarthemoc Adanez </li>
</ul>
</ol>
</body>
</html>
-
Hola LuisM, tu ejercicio esta bien, pero tus lineas separadores "hr" estan centrada:
(https://i.imgur.com/VbApldT.png)
para anular el margen que hay en la parte izquierda, pon este código en tu estilos css del hr: margin-left: 0;.
Quedariá de la siguiente manera:<hr style="height:10px; background-color: blue; width:50%; margin-left: 0;" />
Y con eso la linea se pone bien en la parte izquierda:
(https://i.imgur.com/3lGPvve.png)
Un saludo. :D
-
Muchísimas gracias Jorge !!! :) Ya lo cambié y quedó mejor.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo del uso de listas - aprenderaprogramar.com</title>
</head>
<body>
<ol>
<li> Doctores </li>
<ul style="list-style-type:disc">
<li> Juana Pérez </li>
<li> Alberto Márquez </li>
<li> Raúl Moreno </li>
</ul>
<hr style="height:10px; background-color: blue; width:50%; margin-left:0" />
<li> Ayudantes </li>
<ul style="list-style-type:circle">
<li> Noelia Suárez </li>
<li> Abel Rebollo </li>
</ul>
<hr style="height:10px; background-color: blue; width:50%; margin-left:0" />
<li> Auxiliares </li>
<ul style="list-style-type:square">
<li> Silvia Estévez </li>
<li> Angela González </li>
<li> Cuarthemoc Adanez </li>
</ul>
</ol>
</body>
</html>