Autor Tema: CSS y HTML eliminar símbolos listas viñetas menús horizontales vertical CU01049D  (Leído 36964 veces)

Pandemia

  • Avanzado
  • ****
  • APR2.COM
  • Mensajes: 255
    • Ver Perfil
Buenas noches amigos aquí os dejo el ejercicio con la solución al final de este a ver qué os parece la explicaciones que doy, dejo la cita con la pregunta para la referencia y ahí van los códigos; gracias de antemano.

saludos.

Citar

Analiza el código HTML y CSS que mostramos a continuación y realiza una interpretación descriptiva del código, explicando el significado de cada una de sus partes (Nota: como referencia, puedes ver cómo se ha hecho la interpretación descriptiva del código de ejemplo que hemos visto anteriormente).


Y ahora el html....

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">
<head>
<title>portal web aprenderaprogramar.com</title>
<meta charset="utf-8">
<style type="text/css">
/*curso css aprenderaprogramar.com*/
#nav-menu ul {
font-family: sans-serif;
list-style: none;
padding: 0;
margin: 0;
}
#nav-menu li {
float: left;
margin: 0 0.15em;
border: 5px groove #FFAA33;
}

#nav-menu li a {
background-color: #FFC0CB;
height: 2em;
line-height: 2em;
float: left;
width: 9em;
display: block;
border: 0.1em solid #dcdce9;
color: #0d2474;
text-decoration: none;
text-align: center;
}

#nav-menu li a:hover{background-color: #FF6347;}

</style>
</head>
<body>

<div id="nav-menu">

<ul id="navlist">

<li id="active"><a href="http://aprenderaprogramar.com"id="current">Inicio</a></li>
<li><a href="http://aprenderaprogramar.com">Cursos</a></li>
<li><a href="http://aprenderaprogramar.com">Libros</a></li>
<li><a href="http://aprenderaprogramar.com">Dibulgación</a></li>
<li><a href="http://aprenderaprogramar.com">Humor</a></li>

</ul>

</div>

</body>

</html>

<!--

#nav-menu ul => Aquí lo importante es que eliminamos los simbolos de viñeta mediante la propiedad list-style: none; definimos el tipo de fuente para la lista de la familia sans-serif,
el margen y el relleno , de la misma, lo quitan con valores 0.

#nav-menu li => Para los elementos de la lista los elmentos flotan hacia la dcha con float: left, con margen superior e inferior igual a 0, e izquierda y derecha 0.15em. También se establece
un borde de 5px de grosor, de tipo groove con color #FFAA33.

#nav-menu li a => Para los enlaces de las lista establecen un color de fondo  #FFC0CB, que tengan una altura de 2em y un interlineado, o altura de linea de 2em, gracias a la propiedad line-height,
los elementos flotan hacia la derecha gracias a la propiedad float: left, le dan una anchura de 9em y una altura de 2em, y que se vean como bloques, un borde de 0.1em de grosor de tipo solido y
color#dcdce9, el color de los enlaces #0d2474, le quitamos la linea subrayada que viene por defecto en los enlaces co la propiedad text-decoration: none, y centramos el texto de estos con
text-align: center.

#nav-menu li a:hover => Cuando pasemos el ratón por encima de los enlaces, el fondo estos cabiaran de color  #FF6347.

--> 



#nav-menu ul => Aquí lo importante es que eliminamos los simbolos de viñeta mediante la propiedad list-style: none; definimos el tipo de fuente para la lista de la familia sans-serif, el margen y el relleno , de la misma, lo quitan con valores 0.

#nav-menu li => Para los elementos de la lista los elmentos flotan hacia la dcha con float: left, con margen superior e inferior igual a 0, e izquierda y derecha 0.15em. También se establece un borde de 5px de grosor, de tipo groove con color #FFAA33.

#nav-menu li a => Para los enlaces de las lista establecen un color de fondo  #FFC0CB, que tengan una altura de 2em y un interlineado, o altura de linea de 2em, gracias a la propiedad line-height, los elementos flotan hacia la derecha gracias a la propiedad float: left, le dan una anchra de 9em y una altura de 2em, y que se vean como bloques, un borde de 0.1em de grosor de tipo solido y color#dcdce9, el color de los enlaces #0d2474, le quitamos la linea subrayada que viene por defecto en los enlaces co la propiedad text-decoration: none, y centramos el texto de estos con text-align: center.

#nav-menu li a:hover => Cuando pasemos el ratón por encima de los enlaces, el fondo estos cabiaran de color  #FF6347.
« Última modificación: 30 de Marzo 2016, 11:30 por César Krall »

Dimitar Stefanov

  • Experto
  • *****
  • Mensajes: 598
    • Ver Perfil
Buenas tardes, Pandemia.

Creo que has hecho una perfecta interpretación de las propiedades CSS.

Saludos.

Pandemia

  • Avanzado
  • ****
  • APR2.COM
  • Mensajes: 255
    • Ver Perfil
Gracias, esto me anima ha seguir adelante....

Gracias por tu tiempo.
Saludos

Dimitar Stefanov

  • Experto
  • *****
  • Mensajes: 598
    • Ver Perfil
Y tanto que tienes que seguir.

Piensa que todos hemos empezado desde cero :)

Saludos.

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".