Mi código del ejercicios cu01047D resuelto del curso CSS desde cero.
Código HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="description" content="Portal web aprenderaprogramar.com" />
<meta name="keywords" content="aprender, programar, cursos, libros" />
<link rel="stylesheet" type="text/css" href="estilos79.css"/>
<title>Portal web</title>
</head>
<body>
<div>
<h1>Portal web aprenderaprogramar.com</h1>
<h2>Didáctica y divulgación de la programación</h2>
</div>
<br/>
<div>
<div>
<div>Menú</div>
<hr/>
<ul>
<li><div class="a"></div><a href="#">Inicio</a></li>
<li><div class="a"></div><a href="libros.html">Libros de programación</a></li>
<li><div class="a"></div><a href="cursos.html">Cursos de programación</a></li>
<li><div class="a"></div><a href="humor.html">Humor informático</a></li>
</ul>
</div>
<div>
<div>
<p>Aprender a programar es un objetivo que se plantea mucha gente y que no todos alcanzan.</P>
<p>Hay que tener claro que <a href="https://www.aprenderaprogramar.com">aprender programación</a><span class="b"></span> no es tarea de un día ni de una semana: aprender programción requiere al menos varios meses y, si hablamos de programación a nivel profesional, varios años. No queremos con esto desanimar a nadie: en un plazo de unos pocos días podemos estar haciendo nuestros primeros programas.</P>
<p>Puedes seguir uno de <a href="https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=57&Itemid=86">nuestros cursos</a><span class="b"></span> entre los varios disponibles. Cuando haya que utilizar un editor de textos recomendamos el uso de uno potente y sencillo como Notepad++, aunque son válidos otras alternativas como Crimson Editor.</p>
<a href="https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=205&catid=57:herramientas-informaticas&Itemid=179"><img src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++, un útil editor de texto"></a>
<img src="http://www.crimsoneditor.com/images/logo.jpg" alt="Crimson" title="Crimson, un editor de texto alternativo">
</div>
</div>
<br/>
<div>
<form method="get" action="accion.html">
Si quieres contactar con nosotros envíanos este formulario:<br/><br/>
Nombre:<input type="text" name="nombre"/><br/><br/>
Apellidos:<input type="text" name="apellidos"/><br/><br/>
Dirección:<input type="text" name="direccion"/><br/><br/>
Correo electrónico:<input type="text" name="correo"/><br/><br/>
Mensaje:<textarea name="mensaje" cols=30 rows=2></textarea><br/><br/>
<input type="submit" value="Enviar"/>
<input type="reset" value="Cancelar"/>
</form>
</div>
<br/><br/><br/>
<div>
<img src="http://lh5.ggpht.com/_PeVwghrmOec/TMkzEonRrcI/AAAAAAAAAHc/IxL8g0fTYtk/an_oliva_png.png" alt="logo apr" title="Logo aprenderaprogramar.com">
Copyright 2006-2038 aprenderaprogramar.com
</div>
</div>
</body>
</html>
Código CSS: "estilos79.css"
* {
font-family: sans-serif;
}
li {
list-style-type: none;
}
li a:link {
color: #B22222;
text-decoration: none;
font-weight: bold;
}
.a {
display: inline-block;
background-image: url(3.png);
width: 38px;
height:38px;
position: relative;
top: 10px;
}
.a:hover {
background-image: url(2.png)
}
.b {
display: inline-block;
width: 38px;
height: 38px;
background-image: url(2.png);
position: relative;
top: 10px;
}
.b:hover {
background-image: url(3.png);
}
a:link {
text-decoration: none;
font-weight: bold;
color: blue;
}
a:visited {
color: green;
}
a:hover {
color: #6D006D;
}
PD: He resuelto el ejercicios metiendo dos elementos en el código HTML y luego los he dado propiedades en la hoja de estilo. No sé si es la manera más correcta, pero el efecto visual es el mismo a al que se exegía en el ejercicio.
Tema: CSS cambiar el color de los link en página web y elminar subrayado CU01047D (Leído 3221 veces)
RSS -
WAP2