El codigo del archivo index.html es:
<head>El codigo de la hoja CSS, estilos.css es el siguiente:
<link rel="stylesheet" type="text/css" href="css/estilos.css">
<title>
Tres en Raya
</title>
</head>
<body>
<header>
<nav>
</nav>
</header>
<section>
<article>
<hgroup>
<h1>Juego Tres en Raya</h1>
</hgroup>
<div id="tiempo">
<p>Contador:</p>
<p id="contador">
<span id="minutos">00</span>:
<span id="segundos">00</span></p>
</div>
<div id="tablero">
<div class="row">
<div id="c00" onClick="RevisarCelda(0,0)" class="celda amarillo"></div>
<div id="c01" onClick="RevisarCelda(0,1)" class="celda rojo"></div>
<div id="c02" onClick="RevisarCelda(0,2)" class="celda amarillo"></div>
</div><!--row-->
<div class="row">
<div id="c10" onClick="RevisarCelda(1,0)" class="celda amarillo"></div>
<div id="c11" onClick="RevisarCelda(1,1)" class="celda rojo"></div>
<div id="c12" onClick="RevisarCelda(1,2)" class="celda amarillo"></div>
</div><!--row-->
<div class="row">
<div id="c20" onClick="RevisarCelda(2,0)" class="celda amarillo"></div>
<div id="c21" onClick="RevisarCelda(2,1)" class="celda rojo"></div>
<div id="c22" onClick="RevisarCelda(2,2)" class="celda amarillo"></div>
</div><!--row-->
</div><!--tablero-->
</article>
</section>
<aside>
</aside>
<footer>
</footer>
</body>
</html>
*{Espero os sea util, no olvideis practicar.
margin:0 auto;
width:960px;
}
p{
color:red;
}
body{
background-color:#FAF8EF;
color:#776E65;
font-size:16px;
}
#tiempo{
padding:5px;
margin:2px;
border-radius:2px;
border-style:solid;
height:40px;
width:80px;
display:block;
}
#minutos{
padding:5px;
}
#segundos{
padding:5px;
}
#tablero .row{
padding:0px;
width:100%;
}
#tablero .row .celda{
margin:1px;
padding:0px;
height:80px;
width:80px;
display:inline-block;
position:relative;
border-style:solid;
}
#tablero .row .celda:hover {
background-color:blue;
}
#tablero .row .celda img {
width:100%;
height:100%;
position:absolute;
top:0px;
left:0px;
}
.rojo {
background-color:red;
}
.amarillo{
background-color:yellow;
}
Hasta el proximo video, gracias.
No hay comentarios:
Publicar un comentario