目的是安排一个月内的计划,特点随意,特定元素尽可能全有
时间: 2024-03-10 12:47:25 浏览: 21
好的,以下是我为您设计的月度计划网页的HTML源代码和CSS样式代码,您可以使用它们来创建您自己的网页。请注意,这只是一个示例,您可以根据自己的需要进行修改和定制。
HTML源代码:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>月度计划</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>月度计划</h1>
</header>
<main>
<section class="calendar">
<h2>日历</h2>
<div class="month">
<ul class="weekdays">
<li>周日</li>
<li>周一</li>
<li>周二</li>
<li>周三</li>
<li>周四</li>
<li>周五</li>
<li>周六</li>
</ul>
<ul class="days">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</section>
<section class="tasks">
<h2>任务列表</h2>
<ul>
<li><input type="checkbox" name="task1">任务1</li>
<li><input type="checkbox" name="task2">任务2</li>
<li><input type="checkbox" name="task3">任务3</li>
<li><input type="checkbox" name="task4">任务4</li>
<li><input type="checkbox" name="task5">任务5</li>
</ul>
</section>
<section class="timeline">
<h2>时间轴</h2>
<ul>
<li>08:00am - 09:00am: 早餐</li>
<li>09:00am - 12:00pm: 工作</li>
<li>12:00pm - 01:00pm: 午餐</li>
<li>01:00pm - 05:00pm: 工作</li>
<li>05:00pm - 07:00pm: 运动</li>
<li>07:00pm - 08:00pm: 晚餐</li>
<li>08:00pm - 10:00pm: 休闲娱乐</li>
<li>10:00pm - 11:00pm: 洗漱睡觉</li>
</ul>
</section>
</main>
<footer>
<p>版权所有 © 2021</p>
</footer>
</body>
</html>
```
CSS样式代码:
```
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
h1 {
margin: 0;
font-size: 36px;
}
main {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 20px;
}
section {
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
flex-basis: 30%;
margin-bottom: 20px;
padding: 20px;
}
section h2 {
margin-top: 0;
}
.calendar {
flex-basis: 60%;
}
.month {
background-color: #fff;
border: 1px solid #ccc;
padding: 10px;
}
.month ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.month .weekdays li,
.month .days li {
display: inline-block;
padding: 5px;
width: 14.28%;
}
.month .weekdays li {
background-color: #333;
color: #fff;
}
.month .days li {
border: 1px solid #ccc;
height: 50px;
text-align: center;
vertical-align: middle;
}
.month .days li:hover {
background-color: #f5f5f5;
}
.tasks {
flex-basis: 30%;
}
.tasks ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.tasks li {
padding: 10px;
border-bottom: 1px solid #ccc;
}
.tasks li:last-child {
border-bottom: none;
}
.tasks input[type="checkbox"] {
margin-right: 10px;
}
.timeline {
flex-basis: 100%;
}
.timeline ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.timeline li {
border-left: 3px solid #ccc;
padding: 10px;
margin-left: 20px;
position: relative;
}
.timeline li:before {
content: "";
display: block;
height: 3px;
width: 3px;
background-color: #ccc;
border-radius: 50%;
position: absolute;
left: -8px;
top: 7px;
}
.timeline li:first-child {
margin-top: 20px;
}
.timeline li:last-child {
margin-bottom: 20px;
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
```
这个月度计划网页包括一个日历、任务列表和时间轴,它们分别放在三个不同的部分。日历部分包括一个可选择日期的日历,任务列表部分包括一些任务和复选框,时间轴部分包括一些时间段和描述。您可以根据需要调整这些元素的样式和内容。