Lista1) Diseñar una página web con la misma apariencia
En la última lista aplicar estilos para que al pasar el ratón por las opciones, cambie el aspecto.
Lista2) Diseño de un menú de navegación básico
-
Escribir el siguiente y código y observar en el navegador.
-
Realizar modificaciones para ver los efectos.
|
Lista2.html |
-
<!DOCTYPE HTML>
-
<html>
-
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
-
<title>Creación de Menú de navegación</title>
-
<style type="text/css">
-
/*Colocar los elementos en línea*/
-
nav li {
-
display: inline;
-
}
-
-
-
/*Aplicar estilo a los enlaces*/
-
nav li a {
-
font-family: Arial;
-
font-size:11px;
-
text-decoration: none;
-
padding: 10px;
-
background-color: #2175bc;
-
color: #fff;
-
-webkit-border-radius: 14px 4px 14px 4px;
-
border-radius: 14px 4px 14px 4px;
-
}
-
-
/*Crear efecto al pasar el ratón*/
-
li a:hover {
-
background-color: #2586d7;
-
margin-top:-2px;
-
padding-bottom:12px;
-
}
-
</style>
</head>
-
-
<body>
-
<nav>
-
<ul>
<li><a href="#">Lenguajes de Marcas</a></li>
-
<li><a href="#">Bases de Datos</a></li>
-
<li><a href="#">Redes Locales</a></li>
-
<li><a href="#">Sistemas Operativos</a></li>
-
</ul>
-
</nav>
-
-
</body>
-
</html>
|
Actividad