HTML5作业3超级课程表模板
我们作业是做一个下图一样的模板
分析：
1、主体使用表格
2、图片用<caption>包下
3、表头<thead>
4、合拼单元格使用rowspan
5、表格默认是双线，设置border-collapse: collapse;设置为单线
6、为适应不同手机屏幕大小，需用响应式
源代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>首页</title> <meta name="viewport" content="width=device-width,user-scalable=0, initial-scale=1.0,maximum-scable=1.0,minimum-scable=1.0"> <script> var deviceWidth = document.documentElement.clientWidth; if(deviceWidth > 720) deviceWidth = 720; document.documentElement.style.fontSize = deviceWidth/7.2 + 'px'; </script> <style type="text/css"> *{ margin: 0 ; padding: 0; list-style: none; } .clear:after{ display: block; clear: both; content: " "; } html{ font-size: 100px; min-width: 7.2rem; } a{ text-decoration: none; } .box{ width: 7.2rem; margin: 0 auto; } table{ table-layout: fixed; word-break: break-all; word-wrap: break-word; width: 100%; border-collapse: collapse; } table caption img{ width: 100%; display: block; } table thead td{ height: 30px; background: #dbe0e3; } table thead td:first-child,table tr td:first-child{ border-right: 2px solid #c5c7c6; width: 18px; } table tr{ font-size: 0.16rem; text-align: center; } table td{ width: 0.56rem; height: 45px; border: 1px solid #c5c7c6; } table tr td p{ font-size: 0.08rem; color: #FFFFFF; padding: 1px; } .rad{ border-radius: 6px; padding: 1px; } .blue{ background: #38aedc; } .pink{ background: #e9729c; } .gree{ background: #91bf38; } .yellow{ background: #f8b73f; } </style> </head> <body> <div class="box"> <!-- sa --> <table cellspacing="0" cellpadding="0"> <caption><img src="./img/10.jpg" ></caption> <thead> <td></td> <td>周一</td> <td>周二</td> <td>周三</td> <td>周四</td> <td>周五</td> <td>周六</td> <td>周七</td> </thead> <tr> <td>1</td> <td rowspan="2" class="blue rad"> <p >日语I</p> </td> <td rowspan="2" class="pink rad"> <p >思想道德修养与法律</p> </td> <td rowspan="2" class="gree rad"> <p >形势与政策IV</p> </td> <td rowspan="2" class="yellow rad"> <p>英语写作</p> </td> <td rowspan="2" class="blue rad "> <p>高等数学</p> </td> <td rowspan="4" class="pink rad"> <p>雅思</p> </td> <td></td> </tr> <tr> <td>2</td> <td></td> </tr> <tr> <td>3</td> <td rowspan="2" class="pink rad"> <p>英语</p> </td> <td ></td> <td rowspan="2" class="yellow rad"> <p>创业与就业指导</p> </td> <td rowspan="2" class="blue rad "> <p>计算机科学导论</p> </td> <td rowspan="2" class="pink rad"> <p>大学英语</p> </td> <td ></td> </tr> <tr> <td>4</td> <td></td> <td></td> </tr> <tr> <td>5</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>6</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>7</td> <td rowspan="2" class="yellow rad"> <p>移动互联网技术</p> </td> <td></td> <td></td> <td></td> <td rowspan="2" class="yellow rad"> <p>计算机科学导论</p> </td> <td></td> <td></td> </tr> <tr> <td>8</td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>9</td> <td rowspan="2" class="blue rad "> <p>计算机科学导论</p> </td> <td></td> <td></td> <td></td> <td rowspan="2" class="blue rad "> <p>动画鉴赏</p> </td> <td></td> <td></td> </tr> <tr> <td>10</td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>11</td> <td rowspan="2" class="pink rad"> <p>mysql入门与应用</p> </td> <td rowspan="2" class="gree rad"> <p>计算机编程基础</p> </td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>12</td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> </div> </body> </html>
结果如图：
