html+css创建简单课程表
设计思路
利用table,th,td表格标签建立基本框架,然后在其中填充div以添加样式
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>课程表css版</title>
<link rel="stylesheet" href="./课程表.css">
</head>
<body>
<table class="nov">
<thead class="index">
<tr>
<th class="t1"><div class="d1"></div></th>
<th><div>周一</div></th>
<th><div>周二</div></th>
<th><div>周三</div></th>
<th><div>周四</div></th>
<th><div>周五</div></th>
</tr>
</thead>
<tbody class="content">
<tr>
<td>
<p>1</p>
<br>
<br>
8:30
</td>
<td rowspan="2"><div style="background: #f5655b;">大学英语(Ⅳ)@10203</div></td>
<td></td>
<td rowspan="2"><div style="background: #4AA9E2;">大学体育</div></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<p>2</p>
<br>
<br>
9:30
</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<p>3</p>
<br>
<br>
10:30
</td>
<td></td>
<td rowspan="2"><div style="background: #FCCF6B;">信号与系统@11302</div></td>
<td rowspan="2"><div style="background: #57D99C;">形势与政策(Ⅳ)@15208</div></td>
<td></td>
<td rowspan="2"><div style="background: #72D3E5;">数据结构与算法分析</div></td>
</tr>
<tr>
<td>
<p>4</p>
<br>
<br>
11:30
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<p>5</p>
<br>
<br>
12:30
</td>
<td></td>
<td rowspan="2"><div style="background: #57D99C;">模拟电子技术@16204</div></td>
<td></td>
<td rowspan="2"><div style="background: #3D54B2;">电装实习@11301</div></td>
<td></td>
</tr>
<tr>
<td>
<p>6</p>
<br>
<br>
14:30
</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<p>7</p>
<br>
<br>
15:30
</td>
<td rowspan="2"><div style="background:#EFD053;">毛概@14208</div></td>
<td></td>
<td rowspan="2"><div style="background: #50DAC2;">电路、信号与系统实验</div></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<p>8</p>
<br>
<br>
16:30
</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<p>9</p>
<br>
<br>
17:30
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td rowspan="2"><div style="background: #633FB4;">信号系统</div></td>
</tr>
<tr>
<td>
<p>10</p>
<br>
<br>
18:30
</td>
<td></td>
<td></td>
<td></td>
<td rowspan="2"><div style="background: #EFD95B;">大学体育</div></td>
</tr>
<tr>
<td>
<p>11</p>
<br>
<br>
19:30
</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="l">
<td>
<p>12</p>
<br>
<br>
20:30
</td>
<td><div style="background: #76C0CB;">选修</div></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
css代码
body{
margin: 0 auto;
padding: 0;
width: 1060px;
}
/* 设置课程表外边框 */
.nov{
border-spacing: 0;
padding: 0;
margin: 0;
border: 2px solid rgb(172, 172, 172);
}
/* 设置表头的样式 */
.nov .index{
background-color: #F0F6F6;
}
.nov .index tr{
width: 1050px;
height: 30px;
}
/* 第一个th没有内容且大小特殊,故此独立设置样式 */
.nov .index tr .t1{
width: 60px;
}
/* 在每一个th中添加一个div盒子,可以再设置边框圆角的同时,边框线不会出现断裂 */
.nov .index tr .t1 div{
width: 60px;
border-left: 1px solid #F0F6F6 ;
}
.nov .index tr th{
width: 200px;
margin: 0;
padding: 0;
border-bottom: 1px solid rgb(172, 172, 172);
}
/* 对表体下的每一个tr中的第一个td做样式设置 */
td:first-child{
width: 60px;
height: 80px;
text-align: center;
background-color: #F0F6F6;
}
td:first-child p{
height: 5px;
padding: 0;
margin: 0;
color:rgb(172, 172, 172) ;
}
/* 设置表体样式 */
.nov .content td{
padding: 0;
border-bottom:1px dashed rgb(172, 172, 172);
}
.nov .content .l td{
border-bottom:1px solid rgb(172, 172, 172);
}
/* 对每个课程div做样式设置,每个课程的颜色不同,故此不做外联样式设置 */
.nov .content td div{
margin: 0 1px 0 0;
width: 199px;
height: 153px;
/* height的值为153是因为要填充满整个td,div经过了三条宽度为1px的边框线,且内部上边距为10px 80*2+3-10=153*/
border-radius: 10px;
color: white;
text-align: center;
padding-top: 10px;
}
.nov .content .l div{
/* 选修课程的高度只经过两条边框线,且与 (.nov .content td div)中的样式层叠,80+2-10=72 */
height: 72px;
}
效果图