实现一个日历的静态html

最新推荐文章于 2025-06-07 12:47:15 发布

中二病晚期

最新推荐文章于 2025-06-07 12:47:15 发布

阅读量9.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： html

本文链接：https://blog.youkuaiyun.com/ybp1137287436/article/details/79733682

html 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了如何使用HTML和CSS从头开始构建一个静态的日历组件。内容涵盖HTML结构设计、CSS样式应用以及如何使其响应式以适应不同设备。通过这个教程，读者将学习到基本的前端布局技巧和样式设计概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

每次鼠标移动到1-31时单独方块和数字都要变色

ps：写的很烂很烂 css也写在html里面了

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	    <style>
	    	.call td:hover{
	    		background-color: #6d8ab7;
				color: white;
	    	}
            .cal td:hover{
				background-color: #6d8ab7;
				color: white;			
            }    	          
	    </style>

	</head>
	<body>
		<table class="call" border="0" width="700" height="100" cellpadding="0" cellspacing="0"
			style="background-color:lightgray;">
			<tr>
					<td class="callleft" align="center" ><strong><</strong></td>
					<td colspan="5" align="center" style="background-color: lightgray; color: black;"><strong>Junuary 2018</strong></td>
					<td align="center"><b>></b></td>
			</tr>
			<tr>
					<td align="center" width="100" style="background-color: lightgray; color: black;"><b>Sun</td>
					<td align="center" width="100" style="background-color: lightgray; color: black;"><b>Mon</b></td>
					<td align="center" width="100" style="background-color: lightgray; color: black;"><b>Tue</b></td>
					<td align="center" width="100" style="background-color: lightgray; color: black;"><b>Wed</b></td>
					<td align="center" width="100" style="background-color: lightgray; color: black;"><b>Thu</b></td>
					<td align="center" width="100" style="background-color: lightgray; color: black;"><b>Fri</b></td>
					<td align="center" width="100" style="background-color: lightgray; color: black;"><b>Sat</b></td>
			</tr>
		</table>
		<table  class="cal" border="1" width="700" height="300" cellpadding="0" cellspacing="0"
			style="background-color: darkgray ; border-color: gainsboro">
			<tr>
				<td align="center" style="background-color: lightgray; color: black;" ><b>30</b></td>
				<td align="center" style="background-color: lightgray; color: black;" ><b>31</b></td>
				<td align="center"><b>1</b></td>
				<td align="center"><b>2</b></td>
				<td align="center"><b>3</b></td>
				<td align="center"><b>4</b></td>
				<td align="center"><b>5</b></td>
			</tr>
			<tr>
				<td align="center"><b>6</b></td>
				<td align="center"><b>7</b></td>
				<td align="center" style="color: white; background-color: #6d8ab7;"><b>8</b></td>
				<td align="center"><b>9</b></td>
				<td align="center"><b>10</b></td>
				<td align="center"><b>11</b></td>
				<td align="center"><b>12</b></td>
			</tr>
			<tr>
				<td align="center"><b>13</b></td>
				<td align="center"><b>14</b></td>
				<td align="center"><b>15</b></td>
				<td align="center"><b>16</b></td>
				<td align="center"><b>17</b></td>
				<td align="center"><b>18</b></td>
				<td align="center"><b>19</b></td>
			</tr>
			<tr>
				<td align="center"><b>20</b></td>
				<td align="center"><b>21</b></td>
				<td align="center"><b>22</b></td>
				<td align="center"><b>23</b></td>
				<td align="center"><b>24</b></td>
				<td align="center"><b>25</b></td>
				<td align="center"><b>26</b></td>
			</tr>
			<tr>
				<td align="center"><b>27</b></td>
				<td align="center"><b>28</b></td>
				<td align="center"><b>29</b></td>
				<td align="center"><b>30</b></td>
				<td align="center"><b>31</b></td>
				<td align="center" style="background-color: lightgray; color: black;"><b>1</b></td>
				<td align="center" style="background-color: lightgray; color: black;"><b>2</b></td>
			</tr>
		</table>
		
	</body>
</html>