Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: Pandemia en 31 de Marzo 2016, 23:08
-
Buenas noches amigos aquí os dejo el ejercicio haber que os parece, lo he echo lo mejor posible y creo que esta bastante bien, pero seguro que alguna cosita se me a escapado.
Gracias de antemano por vuestro tiempo.
Saludos.
Ahí van los códigos...
HTML principal.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Cursor CSS. Efectos hover puntero de ratón.</title>
<meta name="description" content="portal web aprenderaprogramar.com">
<meta name="keywords" content="tipos de cursores con efectos hover en css">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estilos30.css">
</head>
<body>
<div id="box1">
<p>La comunicación es un proceso esencial en nuestras vidas, ya que somos seres sociales que necesitamos tener relación con
nuestro entorno y con la gente que nos rodea. Pensad por un momento lo que sería nuestras vidas sin poder comunicarnos.
¿Cómo viviríamos? <a href="http://aprenderaprogramar.com">¿Cambiaría nuestra forma de comportarnos?</a> Con toda seguridad, sí, todo seria muy distinto. Tened en cuenta
que nos comunicamos continuamente y muchas veces no nos damos ni cuenta de ello. Y una de las formas que tenemos de comunicarnos
(aunque no la única)<a href="http://virtualnauta.com"> es a través de nuestra lengua</a>. Podemos emplear una comunicación no verbal pero la comunicación verbal
(la que emplea la palabra) es fundamental en nuestras vidas: hablamos, intercambiamos informaciones, sentimientos, ideas,
expresamos nuestras dudas y nuestras alegrías... <a href="http://www.virtualbox.org">Y manejamos continuamente textos orales y escritos</a>. El texto constituye
la unidad máxima de comunicación y transmite un mensaje completo. Pero los textos no son todos iguales, ni muchísimo menos.
Los textos pueden ir desde una sola palabra a a una obra completa. Y, claro, cada texto responde a una finalidad diferente
(un texto que pretende instruir será diferente de otro que busca convencer, por ejemplo).</p>
</div>
<div id="box2">
<a href="CU01054DA.html"><img src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQtdMBuv-NJ9PTamR75ErhxNhV3S0l9CY2G6Mdzw4IEg57atfBs"></a>
</div>
</body>
</html>
Ahora el HTML DOCUMENTO DOS (CU01054DA.html) en mi caso.
<!DOCTYPE html>
<html lang="es">
<head>
<title>la foto</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estilos30.css">
</head>
<body>
<img src="http://i.picasion.com/resize81/838eb697b10373752169508a0bfc77d9.jpg">
</body>
</html>
Y ahora el CSS...
/*ejercicio CU01054D cursor css. Efectos hover en el puntero del ratón: move, no-drop, resize, all-scroll, pointer, not-allowed,
crosshair, progress, wait*/
div{
float: left;
margin: 25px;
width: 200px;
height: 300px;
border: 5px solid violeta;
text-align: justify;
}
#box1 a {
cursor:help;
}
#box2 img {
cursor:zoom-in;
}
-
Hola Pandemia,
te recomiendo que antes de ponerte a escribir el código CSS, te imagines mentalmente o dibujes como debería quedar lo que tienes que codificar.
Primero hay un error no hay un color que sea 'violeta' hay uno que se llama 'blueviolet'.Con esto verás como se muestra tu web y podrás añadir más CSS para que quede bien.
Además en el segundo div, la imagen deberías definir sus dimensiones bien en el código CSS o bien dentro de la etiqueta <img>.
Saludos!!!
-
Tienes toda la razón del mundo es que ni he caído en lo del color violeta, que había que ponerlo en su nombre blueviolet, y lo del ancho y alto ya está solucionado y ademas le he puesto al div 1 un scroll para que se vea mejor ; como no darte las gracias estoy aprendiendo mucho gracias a ti. :)
aquí van los códigos nuevos...
<!DOCTYPE html>
<html lang="es">
<head>
<title>Cursor CSS. Efectos hover puntero de ratón.</title>
<meta name="description" content="portal web aprenderaprogramar.com">
<meta name="keywords" content="tipos de cursores con efectos hover en css">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estilos30.css">
</head>
<body>
<div id="box1">
<p>La comunicación es un proceso esencial en nuestras vidas, ya que somos seres sociales que necesitamos tener relación con
nuestro entorno y con la gente que nos rodea. Pensad por un momento lo que sería nuestras vidas sin poder comunicarnos.
¿Cómo viviríamos? <a href="http://aprenderaprogramar.com">¿Cambiaría nuestra forma de comportarnos?</a> Con toda seguridad, sí, todo seria muy distinto. Tened en cuenta
que nos comunicamos continuamente y muchas veces no nos damos ni cuenta de ello. Y una de las formas que tenemos de comunicarnos
(aunque no la única)<a href="http://virtualnauta.com"> es a través de nuestra lengua</a>. Podemos emplear una comunicación no verbal pero la comunicación verbal
(la que emplea la palabra) es fundamental en nuestras vidas: hablamos, intercambiamos informaciones, sentimientos, ideas,
expresamos nuestras dudas y nuestras alegrías... <a href="http://www.virtualbox.org">Y manejamos continuamente textos orales y escritos</a>. El texto constituye
la unidad máxima de comunicación y transmite un mensaje completo. Pero los textos no son todos iguales, ni muchísimo menos.
Los textos pueden ir desde una sola palabra a a una obra completa. Y, claro, cada texto responde a una finalidad diferente
(un texto que pretende instruir será diferente de otro que busca convencer, por ejemplo).</p>
</div>
<div id="box2">
<a href="CU01054DA.html"><img src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQtdMBuv-NJ9PTamR75ErhxNhV3S0l9CY2G6Mdzw4IEg57atfBs"></a>
</div>
</body>
</html>
El segundo html ...
<!DOCTYPE html>
<html lang="es">
<head>
<title>la foto</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estilos30.css">
</head>
<body>
<img src="http://i.picasion.com/resize81/838eb697b10373752169508a0bfc77d9.jpg">
</body>
</html>
Y ahora el css...
/*ejercicio CU01054D cursor css. Efectos hover en el puntero del ratón: move, no-drop, resize, all-scroll, pointer, not-allowed,
crosshair, progress, wait*/
div{
float: left;
margin: 25px;
width: 200px;
height: 300px;
border: 5px solid blueviolet;
text-align: justify;
}
#box1{
overflow: scroll;
}
#box1 a {
cursor:help;
}
#box2 img {
cursor:zoom-in;
width: 200px;
height: 300px;
}