Ir al contenido principal

Entradas

Curriculum Vitae

1 comentario
Leer más
Entradas recientes

Lista que el seleccionar aparece con borde

Ejercicio: Crea una página web con un menú etiquetado con una lista que tenga el mismo aspecto que la siguiente imagen: Código  html: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Página web con menú</title> <style> ul { list-style-type: none; text-align: center; /* Se debe escoger la anchura correcta para que la palabra mas grande de la lista se pueda ver completa*/ width: 120px; padding: 0; } li { background-color: #00F; color: #FFF; /* El borde blanco separa los elementos */ border: 2px solid #FFF; } li a { color: #FFF; text-decoration: none; /* Necesario para que el enlace ocupe todo el ancho del elemento de la lista */ display: block; width: 100%; } /* Borde que aparece cuando se situa el ratón encima de un elemento de la lista*/ li a:hover, li a:focus { /* ¿Qué pasa si se utiliza la propiedad border */ outline: 2px solid #F00; } </style> </head> <body...
Publicar un comentario
Leer más

Listas usando números romanos, círculos, cuadros y letras griegas

Listas usando números romanos, círculos, cuadros y letras griegas A partir de la página web que se te proporciona, debes escribir las reglas CSS necesarias para lograr una página web que tenga el mismo aspecto que la siguiente imagen: Código en html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Ejemplo de listas</title> <style> .lista-sin {   list-style-type: none; } .lista-circulos {   list-style-type: circle;  <!--jcon esta parte se modifica que aparezca la lista-circulos con círculos y así con los demas--> } .lista-cuadrados {    list-style-type: square; } .lista-romanos {   list-style-type: lower-roman; } .lista-griegos {   list-style-type: lower-greek; } </style> </head> <body> <p>Lista sin elemento gráfico:</p> <ul class="lista-sin"> <li>...
1 comentario
Leer más

Formulario usando colores

Formulario usando colores Se desea obtener la siguiente imagen: Código  en html <!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8" /> <title>Registro - iDESWEB</title> <style> body {   font-family: Arial, Helvetica, sans-serif;   width: 90%;   margin: 0 auto; } header {   text-align: center; } h1, h2 {   font-family: Georgia, serif; } h1 {   font-size: 3em; } fieldset {   margin: 1em auto; } legend {   font-size: 1.2em;   font-weight: bold;   text-transform: uppercase; } label {   font-weight: bold;   display: block; } input:focus, select:focus {   background-color: yellow; } input:hover, select:hover {   background-color: red; } #boton-crear {   font-size: 2em;   padding: 0.5em; } .inline {   display: inline; } .centrado {   text-align: center; } </style> </head...
Publicar un comentario
Leer más

Tabla que cambia de color al señalar con el cursor

Tabla que cambia de color al señalar con el cursor Se requiere obtener lo siguiente: En la imagen anterior se muestra lo que debe ocurrir al situar el cursor del ratón sobre una de las filas de datos de la tabla: el color de fondo de las celdas debe cambiar a amarillo (#FFFF66). Nota: busca en Internet las imágenes necesarias para representar los símbolos de las diferentes monedas. Las imágenes las debes colocar como imágenes decorativas desde CSS. Código en html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Ejemplo de selectores avanzados</title> <style> table { font-family: Arial, Helvetica, sans-serif; text-align: center; } table, tr, th, td { border: 1px solid #333; line-height: 2em; } th { background-color: #F5F5F5; padding: 0 .5em; } td { padding: 0 .3em; } th.euro { background: #E6F3FF url(imagenes/euro.png) no-repeat left center; padding: 0 .3em 0 1.2em; } th.dol...
1 comentario
Leer más

EJEMPLO

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>HTML &amp; CSS: Curso práctico avanzado</title> <style> h2:first-letter { font-size: 2em; } h2 + p { text-indent: 2em; } a:before { content: "→ "; } abbr:after { content: " (" attr(title) ")"; font-style: italic; } </style> </head> <body> <h1>HTML &amp; CSS: Curso práctico avanzado</h1> <h2>Datos del libro</h2> <ul> <li>Título: <a href="http://publicacionesaltaria.com/es/tienda/112-html-css-curso-practico.html">HTML &amp; CSS: Curso práctico avanzado</a></li> <li>Autor: <a href="http://sergiolujanmora.es/">Sergio Luján Mora</a></li> <li>Editorial: Publicaciones Altaria</li> <li>Año de publicación: 2015</li> <li>ISBN: 978-84-944049-4-8</li> </ul> <h2>Descr...
Publicar un comentario
Leer más

Ejemplo lista con colores

Ejemplo lista con colores en  HTML Y CSS Se requiere obtener lo siguiente: Código en html y css <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Ejercicio de selectores</title> <style> a {   color: #F00;   text-decoration: none; } a:visited {   color: #0A0; } a:hover {   color: #FFF;   background-color: #F00;   text-decoration: underline; } a:focus {   color: #00F;   text-decoration: underline; } a:active {   color: #F60;   background-color: #FFF; } </style> </head> <body> <h1>Universidad de Alicante</h1> <ul> <li><a href="">Presentación</a></li> <li><a href="">Estudios</a></li> <li><a href="">Alumnos</a></li> <li><a href="">Deportes</a></li> <li><a href="">Servicios</a>...
Publicar un comentario
Leer más