完成图如下：
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; }以上就是全部内容啦，谢谢阅览，希望对你有所帮助~
