Archivo
Ejercicio 15 CSS. Listas con flechas
Utilizando la siguiente imagen:
Construye la siguiente página:
Ejercicio 14. Listas estilo Iphone
Imagen para el fondo cuando es seleccionado:
Ejercicio 13 CSS. Listas
Crea esta página web:
SOLUCIÓN:
CÓDIGO HTML:
<ol id="ejercicio13"> <li><p><span>The Netherlands</span><br/> is a country in Northwestern Europe, constituing the<br/> major portition of the Kingdom of the Netherlands. </p> </li> <li> <p><span>The United States of America</span><br/> is a federal constitutional republic comprising fifty<br/> states and a federal district. </p> </li> <li> <p><span>The Philippines</span><br/> officially known as the Republic of the Philippines, is<br/> a country in Southeast Asia with Manila as its capital <br/> city. </p> </li> <li> <p><span>The United Kingdom</span><br/> of Great Britain and Northern Ireland is a sovereign<br/> state located off the nortwestern coast of<br/> continental Europe. </p> </li> </ol>
CÓDIGO CSS:
#ejercicio13{
font-family: Courier, Castellar;
font-size: 23px;
color: blue;
}
#ejercicio13 p{
font-family: arial;
font-size: 16px;
color: white;
border-left: solid 1px white;
padding-left: 5px;
margin-top:0px; /* ERA ÉSTE */
margin-bottom: 0px; /* ERA ÉSTE */
padding-bottom: 10px;
}
#ejercicio13 span{
font-style: italic;
}
Ejercicio 7 CSS. Listas y capas.
//
SOLUCIÓN:
FICHERO CSS:
* {
font-family: Arial;
font-size: 14px;
}
body {
background: #F4F3FF;
margin-top: 10px;
margin-left: 50px;
margin-right: 20px;
margin-bottom: 10px;
}
div{
border-style:solid;
border-width: 2px;
}
br{
line-height: 30px;
}
.cajaazul{
border-color:#C9C9FF;
background-color:#e7e7ff;
}
.cajaazul p{
margin-top:0px;
color: white;
font-weight: bold;
background-color: #c9c9ff;
padding:5px;
}
#cajaverde{
border-color:#afe293;
background-color:#ceffcf;
}
#cajaverde p{
margin-top:0px;
color: white;
font-weight: bold;
background-color: #afe293;
padding:5px;
}
FICHERO HTML:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>HTML</title> <link rel="stylesheet" type="text/css" href="ejercicio7.css" /> </head> <body> <div> <p>7M - Dia 18 - V 10/11/06 (2 horas)</p> <ul> <li>listas: <ul> <li>tipos de listas, listas anidadas, transformación de párrafos en listas y viceversa</li> <li>propiedades CSS</li> <li>diseño de listas</li> </ul> </li> <li>ejercicios listas: Pío Baroja</li> <li>deberes: páginas con enlaces dentro de la página + 3 páginas con enlaces entre sí</li> </ul> </div> <br/> <!-- Segunda capa --> <div id="cajaverde"> <p>7M - Dia 24 - V 10/11/06 (2 horas)</p> <ul> <li>posicionamiento relativo</li> <li>ejercicio posicionamiento relativo: Citas Oscar Wilde</li> <li>posicionamiento absoluto</li> <li>ejercicios posicionamiento absoluto: leyes de murphy , chistes de hombres y mujeres (empiezan)</li> </ul> </div> <br/> <!-- Tercera capa --> <div> <p>7M - Dia 19 - V 13/11/06 (2 horas)</p> <ul> <li>ejercicios de diseño de listas 1 + 2</li> </ul> </div> </body> </html>
Menu Horizontal Sencillo con CSS
<div id="menuh"> <ul> <li><a href="#menuh" id="primero">Inicio</a></li> <li><a href="#menuh">Comentarios</a></li> <li><a href="#menuh">Noticias</a></li> <li><a href="#menuh">Contacto</a></li> <li><a href="#menuh">Acerca de nosotros</a></li> </ul> </div>
CSS:
#menuh {
font: 80% "Trebuchet MS", Arial, Helvetica, sans-serif;
margin-top: 20px;
}
#menuh ul, li {
list-style-type: none;
}
#menuh ul {
margin: 0;
padding: 0;
}
#menuh li {
float: left;
}
#menuh a {
text-decoration: none;
color: #3366CC;
background: #F0F7FC;
display: block;
padding: 3px 10px;
text-align: center;
border: 1px solid #ACCFE8;
border-width: 1px 1px 1px 0;
}
#menuh a#primero {
border-left: 1px solid #ACCFE8;
}
#menuh a:hover {
background: #DBEBF6;
}
Ventajas
- Poco peso: al ser código simple, ocupa poco espacio, y esto también ayuda a la carga rápida de la página.
- Manejable: se puede cambiar fácilmente los colores y efectos gracias a CSS.
- Simple: el código es sencillo de entender, no se complica tanto como los menús a base de tablas y JavaScript.
- Accesible: el usuario puede usar el menú aunque tenga discapacidad o esté navegando en cualquier dispositivo o navegador.
Menú vertical sencillo
HTML:
<div id="menuv"> <ul> <li><a href="#menuv">Inicio</a></li> <li><a href="#menuv">Comentarios</a></li> <li><a href="#menuv">Noticias</a></li> <li><a href="#menuv">Contacto</a></li> <li><a href="#menuv">Acerca de nosotros</a></li> </ul> </div>
CSS:
#menuv {
border: 1px solid #ACCFE8;
border-width: 1px 1px 0 1px;
width: 150px;
font: 80% "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#menuv ul, li {
list-style-type: none;
}
#menuv ul {
margin: 0;
padding: 0;
}
#menuv li {
border-bottom: 1px solid #ACCFE8;
}
#menuv a {
text-decoration: none;
color: #3366CC;
background: #F0F7FC;
display: block;
padding: 3px 6px;
width: 138px;
}
#menuv a:hover {
background: #DBEBF6;
}
list-style-image: Imagen del marcador
Establece la imagen que hace de marcador de los elementos de la lista.
Uno de los siguientes valores:
- URL
- none
Por defecto, los navegadores muestran unos pequeños círculos rellenos para cada elemento de las listas no ordenadas <ul> y una numeración decimal para los elementos de las listas ordenadas <ol>. Utilizando la propiedad list-style-type es posible seleccionar otros marcadores entre una serie de marcadores predefinidos.
La mayor limitación de la propiedad list-style-type es que sólo se pueden elegir los marcadores entre 14 valores predefinidos. De ellos, sólo tres marcadores son de tipo gráfico, lo que limita el diseño gráfico de las listas de elementos.
Afortunadamente, la propiedad list-style-type permite mostrar cualquier imagen como marcador de los elementos de cualquier lista. Para ello, sólo es necesario indicar la URL de la imagen que se quiere mostrar.
El siguiente ejemplo muestra tres listas de elementos con marcadores gráficos personalizados:
A continuación se muestra el código CSS del ejemplo anterior:
ul#primera li {
list-style-image: url("imagenes/circulo_verde.png");
}
ul#segunda li {
list-style-image: url("imagenes/flecha_gris.png");
}
ul#tercera li {
list-style-image: url("imagenes/estrella.png");
}
La imagen utilizada como marcador puede ser de cualquier formato reconocido por los navegadores (normalmente jpeg, gif o png) y puede ser de cualquier tamaño. No obstante, si se utiliza una imagen muy grande, los elementos de la lista se muestran demasiado separados entre sí.
Por otra parte, la principal limitación de la propiedad list-style-image es que no se puede modificar la posición en la que se muestra la imagen del marcador. Además, tampoco se pueden indicar de forma global diferentes imágenes para cada elemento de la lista, por lo que normalmente no se utiliza en las listas ordenadas <ol>.
Si se utilizan de forma simultánea las propiedades list-style-type y list-style-image, esta última tiene prioridad.
Emplear simultáneamente las propiedades list-style-type y list-style-image no sólo no es redundante, sino que es una buena práctica que protege el diseño de la página frente a los innumerables errores que pueden provocar que la imagen del marcador no se pueda descargar.
..
Leitmotiv
Dalek-free
Camisetas cargadas de adrenalina. Llénalas de aventura
CursoProgramador 