Buenas noches. Resolución personal del ejercicio planteado CU01047D del tutorial pdf de programación web con CSS desde cero.
Acá el código:
<!DOCTYPE html>
<html>
<head>
<title>CU01047</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="estilos/CU01047.css"/>
</head>
<body>
<div name="cabecera">
<h1>Portal web aprenderaprogramar.com</h1>
<h2 class="a">Didáctica y divulgación de la programación</h2>
</div>
<div name="cuerpo">
<br/>
<!-- menu -->
<div>
<p>Menú</p>
<li><a href="#">Inicio</a></li>
<li><a href="libros.html" >Libros de programación</a> </li>
<li><a href="cursos.html" >Cursos de programación</a> </li>
<li><a href="humor.html" >Humor informático</a> </li>
</ul>
</div>
<!-- fin menu -->
<br/>
<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="http://aprenderaprogramar.com" target="_blank" title="Ir a aprenderaprogramar.com">aprender programación</a> no es tarea de un día ni de una semana:
aprender programació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" target="_blank" title="Ir a cursos de programación">nuestros cursos</a> 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álidas otras
alternativos como Crimson Editor.
</p>
<a href="http://www.crimsoneditor.com/english/download.html" target="_blank"><img src="https://upload.wikimedia.org/wikipedia/commons/0/0f/Notepad%2B%2B_Logo.png" title="Notepad" alt="Notepad++"/></a>
<a href="http://www.crimsoneditor.com/english/download.html" target="_blank"><img style="height: 120px;" href="https://notepad-plus-plus.org/download/v7.4.2.html" target="_blank" src="http://imag.malavida.com/mvimgbig/download-s/crimson-editor-115-0.jpg" title="Crimson" alt="Crimson editor"/></a>
<br/>
<br/>
<p>Si quieres contactar con nosotros envíanos este formulario relleno: </p>
<br/>
<form action="#" method="get">
<label for="nombre">Nombre:</label>
<input type="text" name="nombre" id="nombre"/>
<br/>
<label for="apellidos">Apellidos:</label>
<input type="text" name="apellidos" id="apellidos"/>
<br/>
<label for="direccion" name="direccion">Direccion:</label>
<input type="text" name="direccion" id="direccion"/>
<br/>
<label for="email">Correo electrónico:</label>
<input type="text" name="email" id="email"/>
<br/>
<label for="mensaje">Mensaje:</label>
<textarea name="mensaje" id="mensaje" rows="4" cols="50"></textarea>
<br/>
<br/>
<input type="submit" value="Enviar"/>
<input type="reset" value="Cancelar"/>
</form>
</div>
<div name="pie">
<br/>
<br/>
<br/>
<img src="http://lh5.ggpht.com/_PeVwghrmOec/TMkzEonRrcI/AAAAAAAAAHc/IxL8g0fTYtk/an_oliva_png.png" title="aprender" alt="aprenderaprogramar.com"/>
Copyright 2006-2038 aprenderaprogramar.com
</div>
</body>
</html>
Acá la hoja de estilos CSS:
/*Estilos para el ejercicio CU01047*/
*{
font-family: serif;
}
li{
list-style-type:none;
}
li a:link{
color:#B22222;
font-weight:bold;
text-decoration:none;
background-image:url("https://i.imgur.com/fyAjgIo.png");
background-repeat:no-repeat;
display:inline-block;
padding-left:40px;
line-height:2.5;
}
li a:hover{
background-image:url("https://i.imgur.com/v8CPNRw.png");
outline:2px dotted #94F;
}
p a:link{
color:blue;
font-weight:bold;
text-decoration:none;
background-image:url("https://i.imgur.com/v8CPNRw.png");
background-position:right;
padding-right:40px;
background-repeat:no-repeat;
display:inline-block;
line-height:2.2;
}
p a:visited{
color:#6D006D;
}
p a:hover{
color:#D71;
background-image:url("https://i.imgur.com/fyAjgIo.png");
}
Si tienen correcciones o sugerencias, se las agradeceré enormemente. Gracias.
Tema: Selectores CSS estilos links Pseudoclases efectos link hover visited CU01047D (Leído 2377 veces)
RSS -
WAP2