1. Ejemplo de uso de CSS para el diseño de un tablero de ajedrez: Ver HTML | Ver CSS

<div class="tablero" style="margin-left:80px;">
	<div class="fila">
		<div class="torrenegra"></div>
		<div class="caballonegro"></div>
		<div class="alfilnegro"></div>
		<div class="reinanegra"></div>
		<div class="reynegro"></div>
		<div class="alfilnegro"></div>
		<div class="caballonegro"></div>
		<div class="torrenegra"></div>
	</div>
<div class="fila">
		<div class="peonnegro"></div>
		<div class="peonnegro"></div>
		<div class="peonnegro"></div>
		<div class="peonnegro"></div>
		<div class="peonnegro"></div>
		<div class="peonnegro"></div>
		<div class="peonnegro"></div>
		<div class="peonnegro"></div>
</div>
	<div class="fila">
		<div class="casillanegra"></div>
		<div class="casillablanca"></div>
		<div class="casillanegra"></div>
		<div class="casillablanca"></div>
		<div class="casillanegra"></div>
		<div class="casillablanca"></div>
		<div class="casillanegra"></div>
		<div class="casillablanca"></div>
	</div>
	<div class="fila">
		<div class="casillablanca"></div>
		<div class="casillanegra"></div>
		<div class="casillablanca"></div>
		<div class="casillanegra"></div>
		<div class="casillablanca"></div>
		<div class="casillanegra"></div>
		<div class="casillablanca"></div>
		<div class="casillanegra"></div>
	</div>
	<div class="fila">
		<div class="casillanegra"></div>
		<div class="casillablanca"></div>
		<div class="casillanegra"></div>
		<div class="casillablanca"></div>
		<div class="casillanegra"></div>
		<div class="casillablanca"></div>
		<div class="casillanegra"></div>
		<div class="casillablanca"></div>
	</div>
	<div class="fila">
		<div class="casillablanca"></div>
		<div class="casillanegra"></div>
		<div class="casillablanca"></div>
		<div class="casillanegra"></div>
		<div class="casillablanca"></div>
		<div class="casillanegra"></div>
		<div class="casillablanca"></div>
		<div class="casillanegra"></div>
	</div>
	<div class="fila">
		<div class="peonblanco"></div>
		<div class="peonblanco"></div>
		<div class="peonblanco"></div>
		<div class="peonblanco"></div>
		<div class="peonblanco"></div>
		<div class="peonblanco"></div>
		<div class="peonblanco"></div>
		<div class="peonblanco"></div>
	</div>
	<div class="fila">
		<div class="torreblanca"></div>
		<div class="caballoblanco"></div>
		<div class="alfilblanco"></div>
		<div class="reinablanca"></div>
		<div class="reyblanco"></div>
		<div class="alfilblanco"></div>
		<div class="caballonegro"></div>
		<div class="torreblanca"></div>
	</div>
</div>

.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