在dreamweaver中设计一个日历
时间: 2024-05-04 13:22:31 浏览: 18
在 Dreamweaver 中设计一个日历可以使用 HTML、CSS 和 JavaScript 来实现。以下是一个简单的日历示例:
1. 首先,在 Dreamweaver 中创建一个新 HTML 文件。
2. 在文件中添加以下 HTML 代码来创建一个基本的日历布局:
```html
<!DOCTYPE html>
<html>
<head>
<title>Calendar</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: center;
padding: 8px;
border: 1px solid black;
}
th {
background-color: #4CAF50;
color: white;
}
td {
height: 120px;
}
td.today {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<table>
<tr>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
<th>Sunday</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
<tr>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
</tr>
<tr>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
</tr>
<tr>
<td>30</td>
<td>31</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
```
3. 添加 JavaScript 代码,使得可以将当前日期标记为“今天”:
```html
<!DOCTYPE html>
<html>
<head>
<title>Calendar</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: center;
padding: 8px;
border: 1px solid black;
}
th {
background-color: #4CAF50;
color: white;
}
td {
height: 120px;
}
td.today {
background-color: #f2f2f2;
}
</style>
<script>
function markToday() {
var today = new Date();
var day = today.getDate();
var cells = document.getElementsByTagName('td');
for (var i = 0; i < cells.length; i++) {
if (cells[i].innerHTML == day) {
cells[i].className = 'today';
}
}
}
</script>
</head>
<body onload="markToday();">
<table>
<tr>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
<th>Sunday</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
<tr>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
</tr>
<tr>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
</tr>
<tr>
<td>30</td>
<td>31</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
```
4. 使用 CSS 样式来美化日历,例如更改字体、颜色、背景色、边框等。
这样就可以在 Dreamweaver 中设计一个简单的日历了。