console
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
h1 {
color: red;
font-weight: bolder;
}
thead {
background-color: green;
}
#hls1 {
color: red;
}
#hls2 {
color: red;
}
tr.conment {
background-color: #009999;
}
tr.conment2 {
background-color: #00CCCC;
}
tr.conment3 {
background-color: #00FFFF;
}
tr.conment4 {
background-color: #00CCFF;
}
tr.conment5 {
background-color: #3399CC;
}
.auto{
display: flex;
}
.button {
background-color: #99CCCC;
border-radius: 4px;
}
.frame1 {
margin-right: 20px;
}
.frame2 {
margin-right: 20px;
}
input {
padding: 7px 0px;
width: 60px;
}
</style>
<title></title>
</head>
<body>
<h1>课表:</h1>
<div class="auto">
<p>课程:<input class="frame1"></p>
<p>编码:<input class="frame2"></p>
<p><button class="button">搜索</p>
</div>
<table border="1">
<thead>
<tr>
<td></td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
</tr>
</thead>
<tbody>
<tr class="conment">
<td id="hls1">第一节</td>
<td>高等数学</td>
<td>数据结构</td>
<td>大学英语</td>
<td>计算机组成原理</td>
<td>线性代数</td>
</tr>
<tr class="conment2">
<td id="hls2">第二节</td>
<td>高等数学</td>
<td>数据结构</td>
<td>大学英语</td>
<td>计算机组成原理</td>
<td>线性代数</td>
</tr>
<tr class="conment3">
<td>第三节</td>
<td>高等数学</td>
<td>数据结构</td>
<td>大学英语</td>
<td>计算机组成原理</td>
<td>线性代数</td>
</tr>
<tr class="conment4">
<td>第四节</td>
<td>高等数学</td>
<td>数据结构</td>
<td>大学英语</td>
<td>计算机组成原理</td>
<td>线性代数</td>
</tr>
<tr class="conment5">
<td>第五节</td>
<td>高等数学</td>
<td>数据结构</td>
<td>大学英语</td>
<td>计算机组成原理</td>
<td>线性代数</td>
</tr>
</tbody>
</table>
</body>
</html>