本篇文章讲解的是使用html中的表格table来制作课程表
完成图如下:
1.html的代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>课表制作</title>
</head>
<body>
<header>
<h2>学生课表</h2>
</header>
<div class="container">
<div class="xueqi_head">
<button type="button" class="xueqi_btn">学期</button>
<select class="xueqi_sel">
<option value="">2019-2020第一学期</option>
<option value="">2019-2020第二学期</option>
<option value="">2018-2019第一学期</option>
<option value="">2018-2019第二学期</option>
</select>
</div>
<table cellspacing="0" align="center" width="100%" cellpadding="8px">
<tbody>
<tr>
<th>节次</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
<th>星期六</th>
<th>星期日</th>
</tr>
<tr>
<td>1-2</td>
<td>高等数学</td>
<td>大学英语</td>
<td>软件工程</td>
<td>Java程序设计</td>
<td>PHP开发实践</td>
<td>微信小程序</td>
<td>移动App</td>
</tr>
<tr>
<td>3-4</td>
<td>H5+CSS3</td>
<td>JavaScript</td>
<td>Jquery</td>
<td>Ajax</td>
<td>Canvas</td>
<td>Vue</td>
<td>Axios</td>
</tr>
<tr>
<td>5-6</td>
<td>Vue全家桶实战</td>
<td>Node</td>
<td>express框架开发</td>
<td>koa框架</td>
<td>webpack</td>
<td>React</td>
<td>JSX</td>
</tr>
<tr>
<td>7-8</td>
<td>React全家桶</td>
<td>Angular</td>
<td>Python</td>
<td>BUI框架</td>
<td>git</td>
<td>Linux</td>
<td>VueX</td>
</tr>
<tr>
<td>9-10</td>
<td>vue-router</td>
<td>vue-loader</td>
<td>vue-cli脚手架</td>
<td>vue-SSR服务端渲染</td>
<td>vue生命周期</td>
<td>vue-指令系统</td>
<td>vue-组件通信</td>
</tr>
<tr>
<td>11-12</td>
<td>vue-动画</td>
<td>vue-插槽</td>
<td>vue-路由传参</td>
<td>vue-命名视图</td>
<td>vue-watch监听</td>
<td>vue-render渲染</td>
<td>vue-设计模式MVVM</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
不要忘记导入css样式表哦!
2.css样式,代码如下:
body{margin:0;}
header{
margin:30px auto;
text-align: center;
}
.container{
width:80%;
margin:0 auto;
}
.xueqi_head{
margin: 30px 0 10px;
}
.xueqi_btn{
width: 80px;
padding: 6px;
float: left;
background-color: cornflowerblue;
border: none;
color: #fff;
}
.xueqi_sel{
width:180px;
padding:5px
}
tr,td{
border:1px solid #ccc;
text-align: center;
}
th{color:#fff;}
td{font-size:12px;padding:10px}
tr>th:nth-child(1){
background-color: #69A4E0;
border-color:#69A4E0;
}
tr>th:nth-child(2){
background-color: #3CC051;
border-color:#3CC051;
}
tr>th:nth-child(3){
background-color: #ED4E2A;
border-color:#ED4E2A;
}
tr>th:nth-child(4){
background-color: #57B5E3;
border-color:#57B5E3;
}
tr>th:nth-child(5){
background-color: #FCB322;
border-color:#FCB322;
}
tr>th:nth-child(6){
background-color: #4ad8e4;
border-color:#4ad8e4;
}
tr>th:nth-child(7){
background-color: #852B99;
border-color:#852B99;
}
tr>th:nth-child(8){
background-color: #999;
border-color:#999;
}
以上就是全部内容啦,谢谢阅览,希望对你有所帮助~