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.
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....
<!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.
Tema: CSS y HTML eliminar símbolos listas viñetas menús horizontales vertical CU01049D (Leído 51728 veces)
RSS -
WAP2