Mostrar Mensajes

Esta sección te permite ver todos los posts escritos por este usuario. Ten en cuenta que sólo puedes ver los posts escritos en zonas a las que tienes acceso en este momento.


Temas - Dimitar Stefanov

Páginas: 1 ... 7 8 9 10 11 [12] 13 14
221
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript las variables que se declaran sin "var" son globales ámbito CU01127E
« en: 31 de Enero 2016, 00:37 »
Bueans tardes.

Tengo una duda sobre el siguiente código:

Código: [Seleccionar]
<html><head><title>Curso JavaScript</title><meta charset="utf-8"/>
<style type="text/css">
body {
text-align: center;
font-family: sans-serif;
}
div {
margin: 20px;
}
#contenedor {
width: 405px;
margin: auto;
}
#adelante, #atras {
padding: 15px;
width: 130px;
float: left;
color: white;
border-radius: 40px;
background: rgb(202, 60, 60);
}
#adelante:hover, #atras:hover {
background: rgb(66, 184, 221);
}
</style>
<script type="text/javascript">
var numeroImagenActual=9;
function moverImagen(movimiento){
if(numeroImagenActual==6&&movimiento=='atras'||numeroImagenActual==11&&movimiento=='adelante'){
alert('No es posible hacer ese movimiento');
}
if(numeroImagenActual==11&&movimiento=='atras'||numeroImagenActual==6&&movimiento=='adelante'){
valorNuevoNumeroImagen=9;
document.getElementById('imgCarrusel').src='http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_9_humor_informatico_foto.jpg';
document.getElementById('imgCarrusel').alt='Camiseta 9 aprenderaprogramar.com';
document.getElementById('imgCarrusel').title='Diálogo entre informáticos';
}
if(numeroImagenActual==9&&movimiento=='atras'){
valorNuevoNumeroImagen=6;
document.getElementById('imgCarrusel').src='http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_6_humor_informatico_foto.jpg';
document.getElementById('imgCarrusel').alt='Camiseta 6 aprenderaprogramar.com';
document.getElementById('imgCarrusel').title='Desbordado por los números';
}
if(numeroImagenActual==9&&movimiento=='adelante'){
valorNuevoNumeroImagen=11;
document.getElementById('imgCarrusel').src='http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_11_humor_informatico_foto.jpg';
document.getElementById('imgCarrusel').alt='Camiseta 11 aprenderaprogramar.com';
document.getElementById('imgCarrusel').title='Estudiando programacion';
}
numeroImagenActual=valorNuevoNumeroImagen;
document.getElementById('numeracion').firstChild.nodeValue='Camiseta '+numeroImagenActual;
}
</script>
</head>
<body>
<div>
<p>Pulsa adelante o atrás</p>
<h1 id="numeracion">Camiseta 9</h1>
<img id="imgCarrusel" src="http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_9_humor_informatico_foto.jpg" alt="Camiseta 9 aprenderaprogramar.com" title="Diálogo entre informáticos"/>
<div id="contenedor">
<div id="atras" onclick="moverImagen('atras')"><<< Atrás</div>
<div id="adelante" onclick="moverImagen('adelante')">Adelante >>></div>
</div>
</div>
</body>
</html>
Cómo en la function moverImagen() se sabe exactamente la variable  numeroImagenActual" qué valor tiene? Es verdad que en el principio de la function le damos un valor que es igual a 9, pero luego, conforme se vaya cambiando la imágen, cómo sabe el navegador que cuando la imagen es la sexta el valor de la variable "numeroImagenActual" también tiene que cambiar a 6?

Al final de la funtion es verdad que se hace una equiparación entre las variables "numeroImagenActual" y valorNuevoNumeroImagen (numeroImagenActual=valorNuevoNumeroImagen), pero esto sólo es para que el navegador imprima conforme se vaya cambiando la imagen.

Agradecería que alguien me explicara este tema, porque no lo entiendo.

Gracias antemano. Atentamente, dimiste.

222
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript qué ocurre si sumamos dos variables booleanas significado CU01115E
« en: 22 de Enero 2016, 01:46 »
Posible solución del ejercicio CU01115E del curso JavaScript desde cero.

Código HTML:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Curso JavaScript</title>
<script type="text/javascript">
function mostrarMensaje1(){
var lampara=true;
var chaqueta=false;
alert(lampara+chaqueta); //al tener valores numéricos 1(true) y 0(false), la suma será=1+0=1
alert(lampara.toString()+chaqueta.toString()); //mediante la función .toString requeremos los valores (en letras) de las variables. La suma será=true+false=truefalse
}
</script>
</head>
<body>
<div>
<p>Aquí un párrafo de texto situado antes de la imagen, dentro de un div contenedor</p>
<img onclick="mostrarMensaje1();" src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++, un útil editor de texto"/>
<p onclick="alert(Alerta JavaScript);" >Aquí otro párrafo de texto. JavaScript es un lenguaje utilizado para dotar de efectos dinámicos a las páginas web.</p>
</div>
</body>
</html>


Resultado de alert(lampara+chaqueta);

Al tener valores numéricos 1(true) y 0(false), la suma será=1+0=1


Resultado de    alert(lampara.toString()+chaqueta.toString());

Mediante la función toString() obtenemos los valores (en letras) de las variables. La suma en este caso al ser cadenas se interpreta como una concatenación y el resultado será=true+false=truefalse

Gracias.

223
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Código unicode para símbolo matemático número Pi \u03C0 Ejercicio CU01114E
« en: 22 de Enero 2016, 01:44 »
Solución del ejercicio CU01114E del curso JavaScript desde cero.

Código HTML :

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Portal web</title>
</head>
<body>
<script type="text/javascript">
var pi;
pi='\u03C0';
var \u03C0;
\u03C0=3.1416;
alert('El número '+pi+' vale '+\u03C0);
</script>
</body>
</html>
Gracias.

224
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript problema operaciones decimales no dan exactas Ejercicio CU01113E
« en: 22 de Enero 2016, 01:42 »
Códigos respuesta del ejercicio CU01113E del curso JavaScript desde cero.

Código HTML:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Portal web</title>
<script type="text/javascript" src="CU01113.js"></script>
</head>
<body>
<div>
<p>Aquí un párrafo de texto situado antes de la imagen, dentro de un div contenedor</p>
<img onclick="mostrarMensaje1();" src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++, un útil editor de texto"/>
<p style="background-color: yellow;" onclick="mostrarMensaje2();">Aquí otro párrafo de texto. JavaScript es un lenguaje utilizado para dotar de efectos dinámicos a las páginas web.</p>
</div>
</body>
</html>
Código JavaScript: "CU01113E.js"

Código: [Seleccionar]
function mostrarMensaje1(){
var bacterias=3.55;
var texto="bacterias en la probeta";
var numeroInfinito=Infinity;
alert('La variable bacterias vale:'+bacterias);
bacterias=3.55E5;
alert('La variable bacterias vale(multiplicamos por 1000000):'+bacterias);
bacterias=3.55E-5;
alert('La variable bacterias ahora es un número muy pequeño:'+bacterias);
alert('La variable bacterias ahora es(operación sin sentido):'+bacterias*texto);
bacterias=3.55e100000000000000000;
alert('La variable bacterias ahore es demasiado grande:'+bacterias);
bacterias=3.55E-100000000000000000;
alert('La variable bacterias ahora es demasiado pequeña:'+bacterias);
alert('Un número positivo dividido entre cero(indeterminación matemática) devuelve:'+(4/0));
alert('Un número negativo dividido entre cero(indeterminación matemática) devuelve:'+(-4/0));
alert('Cero dividido entre cero devuelve:'+(0/0));
alert('La variable numeroInfinito vale:'+numeroInfinito);
var diezCentimos=10;
var veinteCentimos=20;
var treintaCentimos=30;
alert('Esperamos 0.1 y lo obtenemos:'+((veinteCentimos-diezCentimos)/100));
alert('Esperamos 0.1 y no lo obtenemos:'+(treintaCentimos-veinteCentimos)/100);
}
Gracias.

225
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript qué ocurre al multiplicar variable booleana por un número CU01112E
« en: 22 de Enero 2016, 01:40 »
Códigos del ejercicio CU01112E del curso JavaScript desde cero:

Citar
Crea un código JavaScript donde se genere un error por un mal uso de la palabra clave var y comprueba la respuesta del navegador.

1er Código HTML:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Portal web</title>
<script type="text/javascript" src="CU01112E_1.js"></script>
</head>
<body>
<div>
<p>Aquí un párrafo de texto situado antes de la imagen, dentro de un div contenedor</p>
<img onclick="mostrarMensaje1()" src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++, un útil editor de texto">
<p style="background-color:yellow;" onclick="mostrarMensaje2()">Aquí otro párrafo de texto. JavaScript es un lenguaje utilizado para dotar de efectos dinámicos a las páginas web.
</p>
</div>
</body>
</html>
1er Código JavaScript: "CU01112E_1.js"

Código: [Seleccionar]
function mostrarMensaje1(){
alert('La variable precio vale:'+precio);
dato1=null;
alert('La variable dato1 vale:'+dato1);
var precio=22.55;
precio=precio+10;
alert('La variable vale:'+var precio);
alert('El dobre de precio es:'+(precio*2));
cantidad=10;
alert('El importe resultante de multiplicar precio por cantidad es:'+(precio*cantidad));
precio='muy caro';
alert('La variable precio vale ahora:'+precio);
alert('El doble de precio es ahora:'+(precio*2));
var precio=99.55;
alert('La variable precio ha sido declarada por segunda vez y ahora vale:'+precio);
var $descuento_aplicado=0.55;
alert('La variable $descuento_aplicado vale:'+$descuento_aplicado);
}

// No se ejecuta el JavaScript porque expresamente hemos utilizado la palabra var indebidamente.
Con este primer código no se ejecuta el JavaScript porque expresamente hemos utilizado la palabra var indebidamente.

Citar
SyntaxError: expected expression, got keyword 'var' nombreArchivo.html:13:27
ReferenceError: mostrarMensaje1 is not defined  nombreArchivo.html:1:1



2o Código HTML:


Citar
Crea una variable y asignale los contenidos true y false, e intenta multiplicarlas por un número (por ejemplo por 2). ¿Qué resultados obtienes? ¿A qué crees que se deben estos resultados?

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Portal web</title>
<script type="text/javascript" src="CU01112E_2.js"></script>
</head>
<body>
<div>
<p>Aquí un párrafo de texto situado antes de la imagen, dentro de un div contenedor</p>
<img onclick="mostrarMensaje1()" src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++, un útil editor de texto">
<p style="background-color:yellow;" onclick="mostrarMensaje2()">Aquí otro párrafo de texto. JavaScript es un lenguaje utilizado para dotar de efectos dinámicos a las páginas web.
</p>
</div>
</body>
</html> 
2o Código JavaScript: "CU01112E_2.js"

Código: [Seleccionar]
function mostrarMensaje1(){
alert('La variable precio vale:'+precio);
dato1=null;
alert('La variable dato1 vale:'+dato1);
var precio=22.55;
precio=false;
alert('La variable vale:'+precio);
alert('El dobre de precio es:'+(precio*2));
cantidad=10;
alert('El importe resultante de multiplicar precio por cantidad es:'+(precio*cantidad));
precio='muy caro';
alert('La variable precio vale ahora:'+precio);
alert('El doble de precio es ahora:'+(precio*2));
var precio=99.55;
alert('La variable precio ha sido declarada por segunda vez y ahora vale:'+precio);
var $descuento_aplicado=0.55;
alert('La variable $descuento_aplicado vale:'+$descuento_aplicado);
}

// Si a una variable se le pone true como valor dicha variable tomo como valor "1". En cambio, si a la variable le establecemos el valor boolean false, la misma tomo el valor de "0".
Si asignamos valor false a la variable precio al multiplicar precio por 2 el resultado que se muestra es 0, "El dobre de precio es :0". El motivo es que si a una variable se le pone true como valor dicha variable tomo como valor "1". En cambio, si a la variable le establecemos el valor boolean false, la misma tomo el valor de "0".

Gracias.

226
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / HTML y CSS crear animaciones cambiar propiedades estilos con keyframes CU01064D
« en: 22 de Enero 2016, 01:32 »
Códigos del ejercicio CU01064D del curso CSS desde cero.

Código HTML:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="estilos102.css"/>
<title>Portal web</title>
</head>
<body>
<div id="caja1">Hola</div>
</body>
</html>
Código CSS: "estilos102.css"

Código: [Seleccionar]
#caja1 {
    width: 300px;
    height: 200px;
    animation: anime 5s infinite;
position: absolute;
left: 0;
top: 0;
}
@keyframes anime {
   0%{ background: #f00;   font-size: 10px;  top: 10px;}

    25%{background: #a52a2a; font-size: 90px; left: 100px;}

    50%{ top: 56px;  background: #000; font-size: 90px; }

    100%{background: #a52a2a; font-size: 90px; left: 0; }
}

/* A) La animación se llama anime y tien 4 puntos claves.
B) Al principio tendra un fondo de color #f00 con un font-size de 10px y estará a 10px del borde de arriba. Llegada la animación a los 25% tendrá un fonde de color #a52a2a con un tamaño de fuente de 90px y estará a 100px del borde izquierdo. A la mitad de la animación estará a 56px de arriba, con un fonde de color #000 y con un tamaño de letra de 90px. Al final tendrá un fondo de color #a52a2a, con un tamaño de letra de 90px y estará pegado al borde de la izquierda.
C) Es lo mismo usar 0% que from y 100% que to.*/
Respuestas a las preguntas del ejercicio:

a) La animación se llama anime y tiene 4 puntos claves.

b) Al principio tendrá un fondo de color #f00 con un font-size de 10px y estará a 10px del borde de arriba. Llegada la animación a los 25% tendrá un fondo de color #a52a2a con un tamaño de fuente de 90px y estará a 100px del borde izquierdo. A la mitad de la animación estará a 56px de arriba, con un fondo de color #000 y con un tamaño de letra de 90px. Al final tendrá un fondo de color #a52a2a, con un tamaño de letra de 90px y estará pegado al borde de la izquierda.

c) Es lo mismo usar 0% que from y 100% que to

Gracias.

227
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / CSS y HTML animaciones efecto movimiento transition: all 2s ease-in-out CU01063D
« en: 22 de Enero 2016, 01:29 »
Códigos del ejercicio CU01063D del curso CSS desde cero.

Código HTML:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="estilos100.css"/>
<title>Portal web</title>
</head>
<body>
<div id="transEj1" style="border: solid 2px; background-color: yellow; width:200px">
<div>
<div id="rotateX"><img  src="http://i.imgur.com/afC0L.jpg" alt="Notepad++"/></div>
<div id="rotateY"><img src="http://i.imgur.com/afC0L.jpg" alt="Notepad++"/></div>
<div id="rotateZ"><img src="http://i.imgur.com/afC0L.jpg" alt="Notepad++"/></div>
</div>
</div>
</body>
</html>
Código CSS: "estilos100.css"

Código: [Seleccionar]
#transEj1 div {
transition: all 2s ease-in-out;
perspective: 100px;
perspective-origin: 50% 100px;
}
#transEj1:hover #rotateX {
transform: rotateX(180deg);
}
#transEj1:hover #rotateY {
transform: rotateY(180deg);
}
#transEj1:hover #rotateZ {
transform: rotateZ(180deg);
}

No entiendo muy bien la propiedad perspective y perspective-origin. Las demás son:

1) #transEj1:hover #rotateX {transform: rotateX(180deg); - cuando el puntero esté encima del elemento #transEj1 que el elemento #rotateX rote 180grados horizontalmente.

2)#transEj1:hover #rotateY {transform: rotateX(180deg); - cuando el puntero esté encima del elemento #transEj1 que el elemento #rotateY rote 180grados vertitcalmente.

3)#transEj1:hover #rotateZ {transform: rotateX(180deg); - cuando el puntero esté encima del elemento #transEj1 que el elemento #rotateZ rote 180grados en profundida.

Gracias.

228
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / CSS HTML efecto sesgado escalado rotación traslación rotate-skew-scale CU01062D
« en: 22 de Enero 2016, 01:22 »
Códicos y explicación del ejercicio CU01062D del curso CSS desde cero.

Enunciado:

Citar
Estudia el siguiente código CSS y responde a las cuestiones planteadas:

#skew {   transform:skew(35deg); }
#scale {  transform:scale(1,0.5); }
#rotate {   transform:rotate(45deg); }
#translate {   transform:translate(10px, 20px); }
#rotate-skew-scale-translate {   transform:skew(30deg) scale(1.1,1.1) rotate(40deg) translate(10px, 20px); }

a) Crea un documento HTML donde se vean los estilos que tenemos en el código aplicados a distintos elementos.

b) Explica el significado de cada una de las partes del código (por ejemplo #skew indica el estilo que se aplicará a los elementos con atributo id=”skew”. Transform:skew(35deg) indica que …)

Código HTML:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="estilos98.css"/>
<title>Portal web</title>
</head>
<body>
<!-- ROTATE -->
<h2>CSS transform: skew</h2>
<div style="float: left; border-style: none; border-width: 0; background-color: white;">
<div id="skew" style="border-radius: 40px;">aprenderaprogramar.com<img src="http://i.imgur.com/afC0L.jpg"/></a></div>
</div>
<p style="clear: both;"></p>
<!-- SCALE -->
<h2>CSS transform: scale</h2>
<div style="float: left; border-style: none; border-width: 0; background-color: white;">
<div id="scale" style="border-radius: 40px;">aprenderaprogramar.com<img src="http://i.imgur.com/afC0L.jpg"/></div>
</div>
<p style="clear: both;"></p>
<!-- SKEWX -->
<h2>CSS transform: rotate</h2>
<div style="float: left; border-style: none; border-width: 0; background-color: white;">
<div id="rotate" style="border-radius: 40px;">aprenderaprogramar.com<img src="http://i.imgur.com/afC0L.jpg"/></div>
</div>
<p style="clear: both;"></p>
<!-- TRANSLATE -->
<h2>CSS transform: translate</h2>
<div style="float: left; border-style: none; border-width: 0; background-color: white;">
<div id="translate" style="border-radius: 40px;">aprenderaprogramar.com<img src="http://i.imgur.com/afC0L.jpg"/></div>
</div>
<p style="clear: both;"></p>
<!-- COMBINADO CON HOVER -->
<h2>CSS transform: rotate-skew-scale-translate</h2>
<div style="float: left; border-style: none; border-width: 0; background-color: white;">
<div id="caja1" style="border-radius: 40px;">aprenderaprogramar.com<img src="http://i.imgur.com/afC0L.jpg"/></div>
</div>
<p style="clear: both;"></p>
</body>
</html>
Código CSS: "estilos98.css" (las explicaciones están al final del código)

Código: [Seleccionar]
#skew:hover {
transform: skew(35deg);
}
#scale:hover {
transform: scale(1,0.5);
}
#rotate:hover {
transform: rotate(45deg);
}
#translate:hover {
transform: translate(10px, 20px);
}
#caja1:hover {
transform: skew(30deg)scale(1.1,1.1)rotate(40deg)translate(10px,20px);
}

* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
div {
border: 5px solid;
width: 260px;
margin: 10px;
background-color: yellow;
font-size: 20px;
text-align: center;
padding-top: 20px;
word-wrap: break-word;
}
h2 {
margin: 15px 0 -15px 40px;
}
img {
padding: 10px;
}
/* Mediante la propiedad: #skew {transform: skew(35deg);} se aplica al elemento #skew un sesgado de 35grados en horizontal.
Con la propiedad: #scale {transform: scale(1,0.5);} aplicamos al elemento con selector #scale una escala de 1 en horizontal (es decir, queda igual) y de 0.5 en vertical. El mismo efecto se podría conseguir sólo con la propiedad: scaleY(0.5).
A través de la propiedad: #rotate {transform: rotate(45deg);} conseguimos con el elemento #rotate gire 45grados a la derecha.
Medianete la propiedad: #translate {transform: translate(10px,20px);} movemos dicho elemento 10px a la derecha y 20px hacia abajo con referencia a su ubicación inicial.
Por último, con la propiedad: #rotate-skew-scale-translate {transform: skew(30deg)scale(1.1,1.1)rotate(40deg)translate(10px,20px);} aplicamos al elemento #rotate-skew-scale-translate todas las transformaciones a la vez. O sea, le sesgamos 35grados en horizontal, le aplicamos una escala de 1.1 horizontalmente y otra de 1.1 verticalmente, lo rotamos 40grados a la derecha y lo tralsadamos 10px horizontalmente (a la derecha, porque es un valor positivo) y 20px verticalmente (hacia abajo porque es un valor positivo).*/
Significado de las distintas partes del código:

Mediante la propiedad: #skew {transform: skew(35deg);} se aplica al elemento #skew un sesgado de 35grados en horizontal.

Con la propiedad: #scale {transform: scale(1,0.5);} aplicamos al elemento con selector #scale una escala de 1 en horizontal (es decir, queda igual) y de 0.5 en vertical. El mismo efecto se podría conseguir sólo con la propiedad: scaleY(0.5).

A través de la propiedad: #rotate {transform: rotate(45deg);} conseguimos con el elemento #rotate gire 45grados a la derecha.

Medianete la propiedad: #translate {transform: translate(10px,20px);} movemos dicho elemento 10px a la derecha y 20px hacia abajo con referencia a su ubicación inicial.

Por último, con la propiedad: #rotate-skew-scale-translate {transform: skew(30deg)scale(1.1,1.1)rotate(40deg)translate(10px,20px);} aplicamos al elemento #rotate-skew-scale-translate todas las transformaciones a la vez. O sea, le sesgamos 35grados en horizontal, le aplicamos una escala de 1.1 horizontalmente y otra de 1.1 verticalmente, lo rotamos 40grados a la derecha y lo tralsadamos 10px horizontalmente (a la derecha, porque es un valor positivo) y 20px verticalmente (hacia abajo porque es un valor positivo).

Gracias.

229
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / CSS Usar imagen como borde crear degradado circular radial-gradient CU01061D
« en: 22 de Enero 2016, 01:19 »
Códigos del ejercicio CU01061D del curso CSS desde cero.

Código HTML:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="estilos97.css"/>
<title>Portal web</title>
</head>
<body>
<div></div>
</body>
</html>
Código CSS: "estilos97.css"

Código: [Seleccionar]
div {
width: 400px;
height: 200px;
border: 5px solid;
background: linear-gradient(45deg, blue, yellow);
border-image-source: url(border-image2.png);
border-image-slice: 33;
border-image-width: 20px;
border-image-repeat: stretch;
}
Adjunto la imagen necesaria para una visualización correcto de los códigos.

Gracias.

230
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / CSS y HTML efecto degradado difumina pasa de un color a otro Ejercicio CU01060D
« en: 22 de Enero 2016, 01:16 »
Códigos del ejercicio CU01060D del curso CSS desde cero.

Código HTML:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="estilos96.css">
<title>Portal web</title>
</head>
<body>
<div>
</div>
</body>
</html>
Código CSS: "estilos96.css"

Código: [Seleccionar]
div {

width: 400px;
height: 200px;
margin: 50px;
border: solid;
background: linear-gradient(26.5deg, red, white, blue);
}
Gracias

231
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Crear tabla HTML y CSS con fondo gris degradado y bordes redondeados CU01058D
« en: 22 de Enero 2016, 01:12 »
Posibles códigos del ejercicio CU01058D del curso CSS desde cero.

Código HTML y CSS unido en un solo archivo html:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style type="text/css">
td, th {
border-bottom: solid 1px #CDCDCD;
text-align: center;
font-weight: bold;
border-left: solid 1px white;
border-right: solid 1px white;
height: 35px;
width: 100px;
background-color: #EBEBEB;
}
.tabla-destacada {
width: 60%;
margin: 10% auto;
border-spacing: 0;
}
tr th:last-child, tr td:last-child {
background-color: #E2F4C4;
}
tfoot tr td {
border-bottom: none;
}
thead tr th:first-child, thead tr th:nth-child(2), thead tr th:last-child {
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
tfoot tr td:first-child, tfoot tr td:nth-child(2), tfoot tr td:last-child {
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
</style>
<title>Portal web</title>
</head>
<body>
<div>
<table class="tabla-destacada">
<thead>
<tr>
<th>Standard</th>
<th>Professional</th>
<th>Enterprise</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="http://i.imgur.com/WX1dBA4.png?1"/></td>
<td><img src="http://i.imgur.com/WX1dBA4.png?1"/></td>
<td><img src="http://i.imgur.com/WX1dBA4.png?1"/></td>
</tr>
<tr>
<td><img src="http://i.imgur.com/WX1dBA4.png?1"/></td>
<td><img src="http://i.imgur.com/WX1dBA4.png?1"/></td>
<td><img src="http://i.imgur.com/WX1dBA4.png?1"/></td>
</tr>
<tr>
<td><img src="http://i.imgur.com/LbraO64.png?1"/></td>
<td><img src="http://i.imgur.com/WX1dBA4.png?1"/></td>
<td><img src="http://i.imgur.com/WX1dBA4.png?1"/></td>
</tr>
<tr>
<td><img src="http://i.imgur.com/LbraO64.png?1"/></td>
<td><img src="http://i.imgur.com/LbraO64.png?1"/></td>
<td><img src="http://i.imgur.com/WX1dBA4.png?1"/></td>
</tr>
</tbody>
<tfoot>
<tr>
<td>$99</td>
<td>$199</td>
<td>$399</td>
</tr>
</tfoot>
</table>
</div>
</body>
</html>

Gracias.

232
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Modificar el tipo de cursor usando css mostrar lupa signo interrogación CU01054D
« en: 22 de Enero 2016, 01:09 »
Códigos del ejercicio CU01054D del curso CSS desde cero.

1er Código HTML:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="estilos92.css"/>
<title>Portal web</title>
</head>
<body>
<div id="caja1">
<a href="#">Enlace 1</a>
<a href="#">Enlace 2</a>
<a href="#">Enlace 3</a>
<a href="#">Enlace 4</a>
<a href="#">Enlace 5</a>
</div>
<div id="caja2">
<a href="CU01054D(1).html" target="_blank"><img src="http://www.pintura-para.com/wp-content/uploads/2015/10/pintar-flores-300x200.jpg" title="documento 2" /></a>
</div>
</body>
</html>
Código CSS: "estilos92.css"

Código: [Seleccionar]
#caja1, #caja2 {
margin: 25px;
width: 200px;
height: 300px;
border: solid 5px violet;
float: left;
padding-top: 10px;
}
a {
display: block;
margin-bottom: 5px;
text-align: center;
cursor: help;
}
#caja2 a:hover {
cursor: zoom-in;
}
#caja2 {
width: 300px;
height: 225px;
padding: 0;

}

2o Código HTML: "CU01054D(1).html"

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Portal web</title>
</head>
<body>
<div id="caja2">
<img src="http://www.teleadhesivo.com/es/img/fom214-png/folder/products-detalle-png/fotomurales-paisaje-flores-4.png"/>
</div>
</body>
</html>
Gracias

233
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / CSS HTML bordes de tablas cómo poner bordes simples en vez de dobles CU01052D
« en: 22 de Enero 2016, 01:05 »
Códigos del ejercicio CU01052D del curso CSS desce cero.

Código HTML:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="estilos91.css"/>
<title>Portal web</title>
</head>
<body>
<table>
<tr>
<th>Título 1</th>
<th>Título 2</th>
<th>Título 3</th>
<th>Título 4</th>
<th>Título 5</th>
</tr>
<tr>
<td>Celda 2.1</td>
<td>Celda 2.2</td>
<td>Celda 2.3</td>
<td>Celda 2.4</td>
<td>Celda 2.5</td>
</tr>
<tr>
<td>Celda 3.1</td>
<td>Celda 3.2</td>
<td>Celda 3.3</td>
<td>Celda 3.4</td>
<td>Celda 3.5</td>
</tr>
<tr>
<td>Celda 4.1</td>
<td>Celda 4.2</td>
<td>Celda 4.3</td>
<td>Celda 4.4</td>
<td>Celda 4.5</td>
</tr>
<tr>
<td>Celda 5.1</td>
<td>Celda 5.2</td>
<td>Celda 5.3</td>
<td>Celda 5.4</td>
<td>Celda 5.5</td>
</tr>
<tr>
<td>Celda 6.1</td>
<td>Celda 6.2</td>
<td>Celda 6.3</td>
<td>Celda 6.4</td>
<td>Celda 6.5</td>
</tr>
<tr>
<td>Celda 7.1</td>
<td>Celda 7.2</td>
<td>Celda 7.3</td>
<td>Celda 7.4</td>
<td>Celda 7.5</td>
</tr>
</table>
</body>
</html>
Código CSS facilitado por el tutorial (yo lo puse como "estilos91.css") (al final de dicho código contesto a las preguntas del ejercicio):

Código: [Seleccionar]
table {
font-family: Helvetica, Arial, Sans-Serif;
color: #333;
width: 640px;
border-collapse: collapse;
}
td, th {
border: 1px solid orange;
height: 30px;
}
th {
background: #d3d3d3;
font-weight: bold;
}
td {
background: #fafafa;
text-align: center;
}
tr:nth-child(even) td {
background: #f1f1f1;
}
tr:nth-child(odd) td {
background: #fefefe;
}
tr td:hover {
background: #666;
color: #fff;
}

/* a) Con la propiedad font-family especificamos que se tendrá que aplicar a la tabla una fuente Helvetica o en su defecto Arial de la familia Sans-Serif. La talba tendrá que tener un color #333 y que su anchura total sea de 640px. Mediante la propiedad border-collapse con un valor collapse especificamos que los bordes en toda la talba se colapsen. A continuación establecemos que los bordes de las celdas th y td tengan un borde de grosor de 1px, sólido y que sean transparentes y que tenga una altura (cada celda anteriormente dicha) de 30px. Luego codificamos que las celdas th tengan un fondo de color #d3d3d3 y que su letra sea negrita (mediante la propiedad font-weight con un valor bold). Para las celdas de tipo td (es decir, las normales, no las de título) especificamos que tengan un fondo de color #fafafa y que el texto dentro de las mismas esté centrado.
Acto seguido damos valor a las filas impares que se muestren de fondo #f1f1f1 y para las pares que se sean de color #fefefe.
Finalmente especificamos que cuando el ratón esté encima de una celta, la misma cambie de fonod y que el nuevo sea de color #fff.*/
/* b) Para que se consiga el efecto de un borde doble con un grosor de 2px tenemos que cambiar la propiedad: td, th {border: 1px solid transparent} a td, th {border: 2px solid;}, incluir la propiedad: table{border: 2px solid;} e borrar la propiedad: table {border-collapse: collapse;}*/
/* c) Cambiar la propiedad td, th {border: 1px solid transparent;} a td, th {border: 1px solid orange;}*/

Respuestas a las preguntas:

a) Con la propiedad font-family especificamos que se tendrá que aplicar a la tabla una fuente Helvetica o en su defecto Arial de la familia Sans-Serif. La talba tendrá que tener un color #333 y que su anchura total sea de 640px. Mediante la propiedad border-collapse con un valor collapse especificamos que los bordes en toda la talba se colapsen. A continuación establecemos que los bordes de las celdas th y td tengan un borde de grosor de 1px, sólido y que sean transparentes y que tenga una altura (cada celda anteriormente dicha) de 30px. Luego codificamos que las celdas th tengan un fondo de color #d3d3d3 y que su letra sea negrita (mediante la propiedad font-weight con un valor bold). Para las celdas de tipo td (es decir, las normales, no las de título) especificamos que tengan un fondo de color #fafafa y que el texto dentro de las mismas esté centrado.

Acto seguido damos valor a las filas impares que se muestren de fondo #f1f1f1 y para las pares que se sean de color #fefefe.

Finalmente especificamos que cuando el ratón esté encima de una celta, la misma cambie de fonod y que el nuevo sea de color #fff.


b) Para que se consiga el efecto de un borde doble con un grosor de 2px tenemos que cambiar la propiedad: td, th {border: 1px solid transparent} a td, th {border: 2px solid;}, incluir la propiedad: table{border: 2px solid;} e borrar la propiedad: table {border-collapse: collapse;}


c) Cambiar la propiedad td, th {border: 1px solid transparent;} a td, th {border: 1px solid orange;}

Gracias


234
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / CSS estilos de tablas bordes simples o bordes dobles inferior Ejercicio CU01051D
« en: 22 de Enero 2016, 01:01 »
Códigos del ejercicio CU01051D del curso CSS desde cero.

Código HTML:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="estilos89.css"/>
<title>Portal web</title>
</head>
<body>
<table id="table1">
<tr>
<caption>Título tabla 1</caption>
</tr>
<tr>
<td>Celda 2.1</td>
<td>Celda 2.2</td>
<td>Celda 2.3</td>
<td>Celda 2.4</td>
<td>Celda 2.5</td>
</tr>
<tr>
<td>Celda 3.1</td>
<td>Celda 3.2</td>
<td>Celda 3.3</td>
<td>Celda 3.4</td>
<td>Celda 3.5</td>
</tr>
<tr>
<td>Celda 4.1</td>
<td>Celda 4.2</td>
<td>Celda 4.3</td>
<td>Celda 4.4</td>
<td>Celda 4.5</td>
</tr>
<tr>
<td>Celda 5.1</td>
<td>Celda 5.2</td>
<td>Celda 5.3</td>
<td>Celda 5.4</td>
<td>Celda 5.5</td>
</tr>
<tr>
<td>Celda 6.1</td>
<td>Celda 6.2</td>
<td>Celda 6.3</td>
<td>Celda 6.4</td>
<td>Celda 6.5</td>
</tr>
<tr>
<td>Celda 7.1</td>
<td>Celda 7.2</td>
<td>Celda 7.3</td>
<td>Celda 7.4</td>
<td>Celda 7.5</td>
</tr>
</table>
<br/><br/><br/>
<table id="table2">
<tr>
<caption>Título tabla 2</caption>
</tr>
<tr>
<td>Celda 2.1</td>
<td>Celda 2.2</td>
<td>Celda 2.3</td>
<td>Celda 2.4</td>
<td>Celda 2.5</td>
</tr>
<tr>
<td>Celda 3.1</td>
<td>Celda 3.2</td>
<td>Celda 3.3</td>
<td>Celda 3.4</td>
<td>Celda 3.5</td>
</tr>
<tr>
<td>Celda 4.1</td>
<td>Celda 4.2</td>
<td>Celda 4.3</td>
<td>Celda 4.4</td>
<td>Celda 4.5</td>
</tr>
<tr>
<td>Celda 5.1</td>
<td>Celda 5.2</td>
<td>Celda 5.3</td>
<td>Celda 5.4</td>
<td>Celda 5.5</td>
</tr>
<tr>
<td>Celda 6.1</td>
<td>Celda 6.2</td>
<td>Celda 6.3</td>
<td>Celda 6.4</td>
<td>Celda 6.5</td>
</tr>
<tr>
<td>Celda 7.1</td>
<td>Celda 7.2</td>
<td>Celda 7.3</td>
<td>Celda 7.4</td>
<td>Celda 7.5</td>
</tr>
</table>
<br/><br/><br/>
<table id="table3">
<tr>
<caption>Título tabla 3</caption>
</tr>
<tr>
<td>Celda 2.1</td>
<td>Celda 2.2</td>
<td>Celda 2.3</td>
<td>Celda 2.4</td>
<td>Celda 2.5</td>
</tr>
<tr>
<td>Celda 3.1</td>
<td>Celda 3.2</td>
<td>Celda 3.3</td>
<td>Celda 3.4</td>
<td>Celda 3.5</td>
</tr>
<tr>
<td>Celda 4.1</td>
<td>Celda 4.2</td>
<td>Celda 4.3</td>
<td>Celda 4.4</td>
<td>Celda 4.5</td>
</tr>
<tr>
<td>Celda 5.1</td>
<td>Celda 5.2</td>
<td>Celda 5.3</td>
<td>Celda 5.4</td>
<td>Celda 5.5</td>
</tr>
<tr>
<td>Celda 6.1</td>
<td>Celda 6.2</td>
<td>Celda 6.3</td>
<td>Celda 6.4</td>
<td>Celda 6.5</td>
</tr>
<tr>
<td>Celda 7.1</td>
<td>Celda 7.2</td>
<td>Celda 7.3</td>
<td>Celda 7.4</td>
<td>Celda 7.5</td>
</tr>
</table>
</body>
</html>
Código CSS: "estilos89.css"

Código: [Seleccionar]
#table1 {
border: solid 8px grey;
width: 600px;
border-collapse: collapse;
}
#table1 td {
width: 20%;
border: solid 8px grey;
}
#table1 caption {
border: solid 8px grey;
border-bottom: none;
}
#table2 {
width: 100%;
border: solid brown 2px;
}
#table2 td {
width: 20%;
border: solid brown 2px;
}
#table2 caption {
border: solid brown 2px;
}
#table3 {
width: 500px;
}
#table3 td {
width: 100px;
border-bottom: solid 6px blue;
}
#table3 caption {
border-bottom: solid blue 6px;
}

Gracias

235
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Crear efecto cambio color con CSS cuando se pone ratón sobre item menú CU01049D
« en: 22 de Enero 2016, 00:57 »
A continuación dejo mi solución del ejercicio CU01049D del curso CSS desde cero.

Los comentarios están en el mismo código al final.

Lo que pide el ejercicio:

Citar
Analiza el código HTML y CSS que mostramos a continuación y realiza una interpretación descriptiva del código, explicando el significado de cada una de sus partes (Nota: como referencia, puedes ver cómo se ha hecho la interpretación descriptiva del código de ejemplo que hemos visto anteriormente).

Código:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Portal web - aprenderaprogramar.com</title>
<style type="text/css">
#nav-menu ul {
font-family: sans-serif;
list-style: none;
padding: 0;
margin: 0;
}
#nav-menu li {
float: left;
margin: 0 0.15em;
border: 5px groove #FFAA33;
}
#nav-menu li a {
background-color: #FFC0CB;
height: 2em;
line-height: 2em;
float: left;
width: 9em;
display: block;
border: 0.1em solid #DCDCE9;
color: #0D2474;
text-decoration: none;
text-align: center;
}
#nav-menu li a:hover {
background-color: #FF6347;
}
</style>
</head>
<body>
<div id="nav-menu">
<!-- identificamos div como nav-menu mediante el id -->
<ul id="navlist">
<!-- identificamos una lista desordenada como navlist mediante el id -->
<li id="active"><a href="http://aprenderaprogramar.com" id="current">Inicio</a></li>
<!-- Identificamos el primer elemento de la lista como activie mediante el id y el primer enlace como current también mediante el id -->
<li><a href="http://aprenderaprogramar.com">Cursos</a></li>
<li><a href="http://aprenderaprogramar.com">Libros</a></li>
<li><a href="http://aprenderaprogramar.com">Divulgación</a></li>
<li><a href="http://aprenderaprogramar.com">Humor</a></li>
</ul>
</div>
</body>
</html>

<!-- 1)Establecemos para la lista una fuente de la familia san-serif, nos deshacemos de las viñetas mediante la propiedad list-style estableciendo su valor como none, el relleno y el margen, de la misma, los quitamos con las valores 0.

2)Para los elementos de la lista establecemos que floten, con un margen superio e inferior igual a 0 y para el derecho e izquierdo a 0.15em. También establecemos un borde de 5px de grosor, que sea de tipo groove con un color #FFAA33.

3)Para los enlaces de la lista establecemos un fondo de color #FFC0CB, que tengan una altura de 2em y con una altura de la línea de 2em igual. Elegimos también que los enlaces floten, que tengan una anchura de 9em y que se vean como bloques. Establecemos un borde de 0.1em de grosor, que sean sólidos y con un color #DCDCE9. El color de los enlaces que ser #0D2474. Nos deshacemos de la línea subrayada mediante la propiedad text-decoration estableciendo su valor a none y centramos el texto de las mismas con la propiedad text-align estableciendo su valor a center.

4) Cuando situemos el ratón encima de los enlaces su fondo de cambiará a color #FF6347 mediante la propiedad :hover.-->
RESPUESTA

1) Establecemos para la lista una fuente de la familia san-serif, nos deshacemos de las viñetas mediante la propiedad list-style estableciendo su valor como none, el relleno y el margen, de la misma, los quitamos con los valores 0.

2) Para los elementos de la lista establecemos que floten, con un margen superior e inferior igual a 0 y para el derecho e izquierdo a 0.15em. También establecemos un borde de 5px de grosor, que sea de tipo groove con un color #FFAA33.

3) Para los enlaces de la lista establecemos un fondo de color #FFC0CB, que tengan una altura de 2em y con una altura de la línea de 2em igual. Elegimos también que los enlaces floten, que tengan una anchura de 9em y que se vean como bloques. Establecemos un borde de 0.1em de grosor, que sean sólidos y con un color #DCDCE9. El color de los enlaces que ser #0D2474. Nos deshacemos de la línea subrayada mediante la propiedad text-decoration estableciendo su valor a none y centramos el texto de las mismas con la propiedad text-align estableciendo su valor a center.

4) Cuando situemos el ratón encima de los enlaces su fondo de cambiará a color #FF6347 mediante la propiedad :hover.

Gracias

236
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / CSS aplicar estilo listas list-style-type list-style-position Ejercicio CU01048D
« en: 22 de Enero 2016, 00:55 »
Buenas tardes, aquí dejo los códigos del ejercicio CU01048D del curso CSS desde cero.

Código HTML:

Código: [Seleccionar]
<!DOCYTUPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="description" content="Portal web"/>
<meta name="keywords" content="programar,cursos"/>
<link rel="stylesheet" type="text/css" href="estilos83.css"/>
<title>Portal web</title>
</head>
<body>
<div>
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
<li>Elemento 4</li>
<li>Elemento 5</li>
<li>Elemento 6</li>
<li>Elemento 7</li>
<li>Elemento 8</li>
<li>Elemento 9</li>
<li>Elemento 10</li>
<li>Elemento 11</li>
<li>Elemento 12</li>
<li>Elemento 13</li>
<li>Elemento 14</li>
<li>Elemento 15</li>
<li>Elemento 16</li>
<li>Elemento 17</li>
<li>Elemento 18</li>
<li>Elemento 19</li>
<li>Elemento 20</li>
<li>Elemento 21</li>
<li>Elemento 22</li>
<li>Elemento 23</li>
<li>Elemento 24</li>
<li>Elemento 25</li>
<li>Elemento 26</li>
<li>Elemento 27</li>
</ul>
</div>
</body>
</html>
Código CSS: "estilos83.css"

Código: [Seleccionar]
li:first-child, li:nth-child(2), li:nth-child(3) {
list-style-type: disc;
list-style-position: outside;
}
li:nth-child(4), li:nth-child(5), li:nth-child(6) {
list-style-type: circle;
list-style-position: inside;
}
li:nth-child(7), li:nth-child(8), li:nth-child(9) {
list-style: square inside;
}
li:nth-child(10), li:nth-child(11), li:nth-child(12) {
list-style-type: none;
}
li:nth-child(13), li:nth-child(14), li:nth-child(15) {
list-style-type: decimal outside;
}
li:nth-child(16), li:nth-child(17), li:nth-child(18) {
list-style: decimal-leading-zero outside;
}
li:nth-child(19), li:nth-child(20), li:nth-child(21) {
list-style: lower-roman inside;
}
li:nth-child(22), li:nth-child(23), li:nth-child(24) {
list-style: upper-alpha inside;
}
li:nth-child(25), li:nth-child(26), li:nth-child(27) {
list-style: circle url(https://lh3.googleusercontent.com/-_6GcdriGAEI/UkkjeJoZlOI/AAAAAAAAAb0/5B8NPiEqYsM/s40/CU01037D_5.png);
}
Gracias

237
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / CSS menús desplegables con efecto vertical aparecer elementos Ejercicio CU01050D
« en: 18 de Enero 2016, 23:23 »
¿Por qué en el tutorial CU01050D del curso CSS en la hora de estilos se especifica el fondo de los enlaces del menu desplegable de una manera y no de otro?

A continuación pongo los dos códigos y al final concreto la pregunta.

Código HTML:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="estilos87.css"/>
<title>Portal web</title>
</head>
<body>
<div id="wrap">
<h2>CSS - Menú desplegable</h2>
<p>aprenderaprogramar.com</p>
<ul id="navbar">
<li><a href="http://aprenderaprogramar.com">Libros</a>
<ul>
<li><a href="http://aprenderaprogramar.com">Aprender a programar desde cero</a></li>
<li><a href="http://aprenderaprogramar.com">Creación y administración web con Joomla</a></li>
<li><a href="http://aprenderaprogramar.com">Lenguaje de programación Java</a></li>
</ul>
</li>
<li><a href="http://aprenderaprogramar.com">Divulgación</a>
<ul>
<li><a href="http://aprenderaprogramar.com">Los 100 trucos de CSS</a></li>
</ul>
</li>
<li><a href="http://aprenderaprogramar.com">Preguntas frecuentes</a></li>
<li><a href="http://aprenderaprogramar.com">Humor</a>
<ul>
<li><a href="http://aprenderaprogramar.com">Humor informático</a></li>
<li><a href="http://aprenderaprogramar.com">Humor bases de datos</a></li>
<li><a href="http://aprenderaprogramar.com">Humor programación</a></li>
<li><a href="http://aprenderaprogramar.com">Humor universidad</a></li>
</ul>
</li>
</ul>
<div class="limpiador"></div>
</div>
</body>
</html>
Código CSS: "estilos87.css"

Código: [Seleccionar]
body {
font: 62.5%/1.2 Arial, Helvetica, sans-serif;
background-color: #EEE;
}
#wrap {
font-size: 1.8em;
width: 520px;
padding: 20px;
margin: 0 auto;
background-color: #FFF;
}
#navbar {
padding: 0;
margin: 0;
}
#navbar li {
list-style: none;
float: left;
margin: 10px;
}
#navbar li a {
display: block;
padding: 3px 8px;
background-color: #5E8CE9;
color: #FFF;
text-decoration: none;
}
#navbar li ul {
display: none;
background-color: #69F;
}
#navbar li:hover ul {
font-size: 12px;
display: block;
position: absolute;
margin: 0;
padding: 0;
}
#navbar li:hover li {
float: none;
}
#navbar li:hover li a {
background-color: #69F;
border-bottom: 1px solid #FFF;
color: #000;
}
#navbar li li a:hover {
background-color: #8DB3FF;
}
.limpiador {
padding: 0;
border-style: none;
clear: both;
}
No entiendo por qué para establecer el fondo de los enlaces de los elementos que están en: ul->li->ul->li no se seleccioná el elemento así:
#navbar li a:hover li {}
sino así:
#navbar li li a:hover {}

238
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / CSS cambiar el color de los link en página web y elminar subrayado CU01047D
« en: 16 de Enero 2016, 20:00 »
Mi código del ejercicios cu01047D resuelto del curso CSS desde cero.

Código HTML:

Código: [Seleccionar]
<!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"

Código: [Seleccionar]
* {
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.

239
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / CSS propiedades de fuente font-size font-variant font-family Ejercicio CU01045D
« en: 16 de Enero 2016, 17:01 »
Códigos del ejercicio CU01045D del curso CSS desde cero.

Código HTML:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="estilos76.css"/>
<title>Portal web</title>
</head>
<body>
<div id="caja1"><p>El div 1 debe contener un texto suficientemente largo (varios párrafos), tipo de fuente genérica serif, tamaño de fuente 18 píxeles y al menos un párrafo de varias líneas con la fuente establecida como mayúscula condensada (small caps).</p><p>El div 1 debe contener un texto suficientemente largo (varios párrafos), tipo de fuente genérica serif, tamaño de fuente 18 píxeles y al menos un párrafo de varias líneas con la fuente establecida como mayúscula condensada (small caps).</p><p>El div 1 debe contener un texto suficientemente largo (varios párrafos), tipo de fuente genérica serif, tamaño de fuente 18 píxeles y al menos un párrafo de varias líneas con la fuente establecida como mayúscula condensada (small caps).</p></div>
<div id="caja2"><p>El div 2 debe contener un texto suficientemente largo (varios párrafos), tipo de fuente genérica sans serif, tamaño de fuente 14 píxeles y color del texto #B22222.</p><P>El div 2 debe contener un texto suficientemente largo (varios párrafos), tipo de fuente genérica sans serif, tamaño de fuente 14 píxeles y color del texto #B22222.</P><p>El div 2 debe contener un texto suficientemente largo (varios párrafos), tipo de fuente genérica sans serif, tamaño de fuente 14 píxeles y color del texto #B22222.</p></div>
<div id="caja3"><p>El div 3 debe contener un texto suficientemente largo (varios párrafos), y las propiedades de texto establecidas con la propiedad CSS font (shortand). El tipo de fuente será genérica fantasy y el tamaño del texto 2 veces lo normal .</p><p>El div 3 debe contener un texto suficientemente largo (varios párrafos), y las propiedades de texto establecidas con la propiedad CSS font (shortand). El tipo de fuente será genérica fantasy y el tamaño del texto 2 veces lo normal .</p><p>El div 3 debe contener un texto suficientemente largo (varios párrafos), y las propiedades de texto establecidas con la propiedad CSS font (shortand). El tipo de fuente será genérica fantasy y el tamaño del texto 2 veces lo normal .</p></div>
</body>
</html>
Código CSS: "estilos76.css"

Código: [Seleccionar]
div {
margin: 33px;
padding: 25px;
border-style: solid;
border-width: 5px;
border-color: red;
}
#caja1 {
font-size: 12px;
font-family: serif;
}
#caja1 p:nth-child(2) {
font-variant: small-caps;
}
#caja2 {
font-family: sant-serif;
font-size: 14px;
color: #B22222;
}
#caja3 {
font: 2em fantasy;
}

240
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / CSS Equivalencia en pixeles y em de titulos h1, h2, h3, h4, h5 y h6 CU01044D
« en: 16 de Enero 2016, 15:54 »
Códigos del ejercicio CU01044D del curso CSS (basándome que el valor del h4 se toma como 1em.

Código HTML:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="estilos75.css"/>
<title>Portal web</title>
</head>
<body>
<div id="caja1">
<table>
<h1 id="a">Mozilla Firefox</h1>
<tr>
<td>Tipo de título</td>
<td>Píxeles</td>
<td>em</td>
</tr>
<tr>
<td><h1>h1</h1></td>
<td>46</td>
<td>1.91</td>
</tr>
<tr>
<td><h2>h2</h2></td>
<td>35</td>
<td>1.45</td>
</tr>
<tr>
<td><h3>h3</h3></td>
<td>27</td>
<td>1.125</td>
</tr>
<tr>
<td><h4>h4</h4></td>
<td>24</td>
<td>1</td>
</tr>
<tr>
<td><h5>h5</h5></td>
<td>20</td>
<td>0.83</td>
</tr>
<tr>
<td><h6>h6</h6></td>
<td>16</td>
<td>0.66</td>
</tr>
</table>
</div>
<div id="caja2">
<table>
<h1 id="a">Chrome</h1>
<tr>
<td>Tipo de título</td>
<td>Píxeles</td>
<td>em</td>
</tr>
<tr>
<td><h1>h1</h1></td>
<td>37</td>
<td>2.05</td>
</tr>
<tr>
<td><h2>h2</h2></td>
<td>27</td>
<td>1.5</td>
</tr>
<tr>
<td><h3>h3</h3></td>
<td>22</td>
<td>1.22</td>
</tr>
<tr>
<td><h4>h4</h4></td>
<td>18</td>
<td>1</td>
</tr>
<tr>
<td><h5>h5</h5></td>
<td>16</td>
<td>0.88</td>
</tr>
<tr>
<td><h6>h6</h6></td>
<td>12</td>
<td>0.66</td>
</tr>
</table>
</div>
</body>
</html>
Código CSS: "estilos75.css"

Código: [Seleccionar]
div {
width: 400px;
}
#caja1 {
float: left;
}
#caja2 {
float: left;
margin-left: 100px;
}
table {
width: 400px;
height: 400px;
text-align: center;
border: solid #9F89B8;
border-collapse: collapse;
/* la propiedad border-collapse sirve para colapsar las celdas entre sí */
}
table tr td {
    border-top: solid #9F89B8;
border-bottom: solid #9F89B8;
width: 100px;
}
table tr:first-child {
background-color: #8063A1;
color: white;
}
table tr:nth-child(2) {
background-color: #DFD7E8;
}
table tr:nth-child(4) {
background-color: #DFD7E8;
}
table tr:nth-child(6) {
background-color: #DFD7E8;
}
#a {
text-align: center;
}

Páginas: 1 ... 7 8 9 10 11 [12] 13 14

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".