我們作業是做一個下圖一樣的模板
分析：
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>
結果如圖：
