小白如何制作课程表？超简单版确定不点进来看看？

最新推荐文章于 2024-04-30 22:05:29 发布

luckygirl77777

最新推荐文章于 2024-04-30 22:05:29 发布

阅读量242

点赞数

文章标签： java 前端 javascript

本文链接：https://blog.csdn.net/luckygirl77777/article/details/132865604

版权

💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕

想要制作一个课程表，很简单！！！😎

💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕💕

1.要明白<td> <tr> 是表示的什么，<td>表示列 <tr> 表示行

2.搞定完课表的基本模样，我们就要给课表进行美化，让我们的课表看这漂亮赏心悦目，就要用到我们的<style>属性咯！

3.加油哦！相信你一定做的比我好。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>课表</title>
		<style type="text/css">
			body{
			background-color: lemonchiffon;
			}
			.top{
				text-align: center;
				padding: 0 25px;
				height: 25px;
				width: 500px;
				margin: 0 auto;
				background-color: lightgray;
			}
			table{
				margin: 0 auto;
				width: 1000px;
				height: 450px;
				background-color:peachpuff;
				}
				td{
					padding: 0 20px;
					border-radius: 25px;
				}
				table,td{
					border: 2px solid burlywood;
					border-collapse: collapse;
				}
				tr{
					text-align: center;
				}
			
		</style>
	</head>
	<body>
		<div class="top">课程表</div>
		<table >
		<tr>
			<td></td>
			<td>周一</td>
			<td>周二</td>
			<td>周三</td>
			<td>周四</td>
			<td>周五</td>
			<td>周六</td>
			<td>周日</td>
		</tr>
		
		<tr>
			<td>一二节</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		
		<tr>
			<td>三四节</td>
			<td>形式与政策9<br/>赵国清<br/>x2404</td>
			<td>人工智能与应用<br/>S1218</td>
			<td></td>
			<td>x信息安全<br/>S1309</td>
			<td>计算机网络基础<br/>X2408</td>
			<td></td>
			<td></td>
		</tr>
		
		<tr>
			<td>五六节</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td>影视剪辑与合成<br/>S2410</td>
			<td></td>
			<td></td>
		</tr>
		
		<tr>
			<td>七八节</td>
			<td>前端框架技术<br/>华隆<br/>S1520</td>
			<td>企业网站综合实训<br/>华隆<br/>S1512</td>
			<td></td>
			<td>企业网站综合实训<br/>华隆<br/>S1419</td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		
		<tr>
			<td>九十节</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		</table>
	</body>
</html>