nada

martes, 3 de febrero de 2015

Inicio » , , , » Tablero de ajedrez en Html con tablas

Tablero de ajedrez en Html con tablas

Por Comentarios

amos a crear un tablero de ajedrez con tablas en html. Comenzamos creando una tabla de de 400 pixel de ancho por 400 pixel de alto.
Numeramos cada celda desde el 1 al 64. Vamos a ir creando celdas de color blanco y de color negro, el texto en las celdas cuidado, cuando el fondo de la celda es negro el color del texto debe de ser blanco y cuando el fondo de la celda es blanco el color del texto debe de ser negro.
el Codigo
-------------
<html lang="es">
    <head>
        <title> Tablero de Ajedrez </title>
        <style>
                body {
                        background: #fff;
                }
  .casilla {
   width: 150px;
   height: 150px;
   text-align: center;
   line-height: 150px;
   font-size: 36pt;
   float: left;
   color: #1b1b1b;
  }
  .casilla:nth-child(even) {
   background: #141414;
   color: white;
  }
  .tablero {
   background: #f7f7f7;
   width: 1050px;
   overflow: hidden;
   margin: auto;
   box-shadow: 0px 0px 20px #ccc;
  }
 </style>
</head>
<body>
 <br>
 <h1 class="h1 center">Tablero de Ajedrez</h1>
 <br>
 <div class="tablero">
  <?php
  $i = 1;
  while ($i <= 35) {
   echo "<div class=\"casilla\">".$i."</div>";
   $i++;
  }
  ?>
 </div>
</body>
</html>
←  Anterior Proxima  → Página Principal

0 comentarios:

Publicar un comentario