웹 프로그래밍/HTML&CSS
-
[JSP강의노트] 무료 템플릿을 활용한 게시판 디자인하기2009.09.29
-
[HTML&CSS강의노트] 달력 만들기 예제2009.09.28
[JSP강의노트] 무료 템플릿을 활용한 게시판 디자인하기
2009. 9. 29. 14:47
board_design.zip[HTML&CSS강의노트] 달력 만들기 예제
2009. 9. 28. 12:42
<html>
<head>
<title>10월</title>
<style type="text/css">
th, td {
width: 100px;
border: solid 1px;
}
th {
height: 40px;
color: #fff;
background: #AF0A0A url('images/a1.gif') top right no-repeat;
}
td {
height: 80px;
text-align: center;
background: url('images/a2.gif') top left repeat-x;
}
td a:link, td a:active, td a:vlink {
text-decoration: none;
color: #000;
}
td a:hover {
width: 90px;
height: 70px;
background: #AF0A0A url('images/a4.gif') bottom left repeat-x;
color: #fff;
}
</style>
</head>
<body>
<table>
<caption>10월 달력</caption>
<thead>
<tr>
<th>일</th><th>월</th><th>화</th><th>수</th><th>목</th><th>금</th><th>토</th>
</tr>
</thead>
<tbody>
<tr>
<td> </td><td> </td><td> </td><td> </td><td><a href="#">1</a></td><td><a href="#">2</a></td><td><a href="#">3</a></td>
</tr>
<tr>
<td><a href="#">4</a></td><td><a href="#">5</a></td><td><a href="#">6</a></td><td><a href="#">7</a></td><td><a href="#">8</a></td><td><a href="#">9</a></td><td><a href="#">10</a></td>
</tr>
<tr>
<td><a href="#">11</a></td><td><a href="#">12</a></td><td><a href="#">13</a></td><td><a href="#">14</a></td><td><a href="#">15</a></td><td><a href="#">16</a></td><td><a href="#">17</a></td>
</tr>
<tr>
<td><a href="#">18</a></td><td><a href="#">19</a></td><td><a href="#">20</a></td><td><a href="#">21</a></td><td><a href="#">22</a></td><td><a href="#">23</a></td><td><a href="#">24</a></td>
</tr>
<tr>
<td><a href="#">25</a></td><td><a href="#">26</a></td><td><a href="#">27</a></td><td><a href="#">28</a></td><td><a href="#">29</a></td><td><a href="#">30</a></td><td><a href="#">31</a></td>
</tr>
</tbody>
</table>
</body>
</html>