Respuestas
Respuesta:
Explicación:Vamos a empezar construyendo nuestra estructura HTML. Por supuesto, vamos a empezar con el esqueleto.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Calendar Widget</title>
<link rel="stylesheet" href="calendar.css" />
</head>
<body>
</body>
</html>
Así que, dentro de body, vamos a empezar con un div para contener todo; luego, vamos a tener tres secciones principales dentro de eso:
<div id="cal">
<div class="header">
</div>
<table id="days">
</table>
<div id="cal-frame">
</div>
</div>
Primero, tenemos el div.header; regresando a nuestro PSD, vemos que corresponde a la parte superior, la sección que contiene el mes, los botones para mover los meses, y los "ganchos". Luego tenemos una tabla para los nombres de los días. Finalmente, tenemos un div#cal-frame. Este es el grid del calendario.
Voy a decirte un secreto. Cuando construí originalmente este UI para el calendario, solo tenía una tabla, con thead para los días y tbody para el grid del calendario; pero una vez que empecé a escribir el Javascript para moverse entre meses, me dí cuenta que necesitaba usar algo más flexible. Vas a ver por que cuando lleguemos al JavaScript.
<span class="left button" id="prev"> ⟨ </span>
<span class="left hook"></span>
<span class="month-year" id="label"> June 20&0 </span>
<span class="right hook"></span>
<span class="right button" id="next"> ⟩ </span>
enemos cinco elementos aquí; en la parte de afuera, tenemos los botones para moverse entre meses izquierdo y derecho; como no quería usar imágenes en éste proyecto, encontré las HTML entities ⟨ y ⟩ ( < y > , respectivamente ). Luego, tenemos dos span vacíos para los ganchos del calendario. Finalmente, tenemos la etiqueta mes/año en el medio.
El contenido para la table#days es bastante simple:
<td>sun</td>
<td>mon</td>
<td>tue</td>
<td>wed</td>
<td>thu</td>
<td>fri</td>
<td>sat</td>