Revisión: práctica de laboratorio.
- Analizar el siguiente código.
- Dé un nombre de archivo para el mismo. Justifique su respuesta.
- Marcar las secciones básicas de una página escrita en html.
- Marcar las reglas de estilo creadas. Clasificarlas.
<!doctype html>
<html lang='es'>
<head>
<meta charset='utf-8'>
<style type="text/css">
body{
background-color: #009900; //verde
}
nav{
width: auto;
background: #009900; //verde
padding: 8px 0;
}
nav ul {
list-style-type: none;
position: relative;
display: block;
font-size: 12px;
font-family: Verdana, Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
zoom: 1.2;
}
nav li {
display: block;
float: left;
margin: 0;
padding: 0;
border-bottom: 1px solid #7ab900 ;
}
nav li a {
float: left;
color: #ffffff;
text-decoration: none;
height: 24px;
padding: 9px 15px 0;
font-weight: normal;
}
nav li:hover, nav:active { //La pseudo-clase :active de CSS cubre el caso en el que un elemento está siendo activado por el usuario. Cuando se interactúa con el ratón, se corresponde al momento en el que el usuario presiona el botón del ratón hasta el momento en el que lo suelta.
text-decoration: none;
border-bottom: 2px solid #7ab900;
border-radius: 5px;
}
nav li:hover a {
color: #99ff66;
zoom: 1.21;
border-top: 2px solid #7ab900 ;
border-radius: 5px;
}
nav #inicio a {
color: #99ff66;
font-weight: bold;
}
</style>
<title>Menu</title>
</head>
<body>
<nav>
<ul>
<li id='inicio'><a href='#'><span>Inicio</span></a></li>
<li><a href='#'><span>Servicios</span></a></li>
<li><a href='#'><span>Productos</span></a></li>
<li><a href='#'><span>Empresa</span></a></li>
</ul>
</nav>
</body>
</html>
Explique la sig. línea de código:
<li id='inicio'><a href='#'><span>Inicio</span></a></li>
- Explique las sig. reglas de estilo.
nav li:hover, nav:active {
text-decoration: none;
border-bottom: 3px solid #7ab900;
}
nav #inicio a {
color: #99ff66;
font-weight: bold;
}
border-bottom: 3px solid #7ab900;
}
nav #inicio a {
color: #99ff66;
font-weight: bold;
}
0 comentarios:
Publicar un comentario
Ingresa tu consulta