Volver a formación
1. Ejemplo de uso de CSS para el diseño de un tablero de ajedrez:
Ver HTML
|
Ver CSS
.fila { width: 720px; } .casillanegra { height: 90px; width: 90px; background-color: black; float: right; } .casillablanca { height: 90px; width: 90px; background-color: white; float: right; } .tablero { width: 722px; height: 722px; border: solid 1px; } .torrenegra { height: 90px; width: 90px; background-image: url(../imagenes/5.png); float: right; } .caballonegro { height: 90px; width: 90px; background-image: url(../imagenes/6.png); float: right; } .alfilnegro { height: 90px; width: 90px; background-image: url(../imagenes/4.png); float: right; } .reinanegra { height: 90px; width: 90px; background-image: url(../imagenes/12.png); float: right; } .reynegro { height: 90px; width: 90px; background-image: url(../imagenes/11.png); float: right; } .torreblanca { height: 90px; width: 90px; background-image: url(../imagenes/8.png); float: right; } .caballoblanco { height: 90px; width: 90px; background-image: url(..//imagenes/7.png); float: right; } .alfilblanco { height: 90px; width: 90px; background-image: url(../imagenes/1.png); float: right; } .reinablanca { height: 90px; width: 90px; background-image: url(../imagenes/9.png); float: right; } .reyblanco { height: 90px; width: 90px; background-image: url(../imagenes/10.png); float: right; } .peonblanco { height: 90px; width: 90px; background-image: url(../imagenes/2.png); float: right; } .peonnegro { height: 90px; width: 90px; background-image: url(../imagenes/3.png); float: right; }
Todos los derechos reservador RedForNet 2009|
Directorio Web