图文列表与课程表的演示

图文列表

效果

代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>图文列表</title>
  8. </head>
  9. <body>
  10. <nav style="display: grid; list-style: none">
  11.     <li class="item"><a href=""><img src="../pic/baidu.png" alt="" width="400px"></a><a href="http://baidu.com">点击跳转百度</a>
  12.     </li>&nbsp; 
  13.     <li class="item"><a href=""><img src="../pic/bing.jpg" alt="" width="400px"></a><a href="http://bing.com">点击跳转必应</a>
  14.     </li>&nbsp;
  15.     <li class="item"><a href=""><img src="../pic/1.jpg" alt="" width="300px"><a href="">汤姆</a></a>
  16.     </li>&nbsp;
  17. </nav>
  19. </body>
  20. </html>

课程表

效果

代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>课程表</title>
  8. </head>
  9. <body>
  10.     <table border="2" width="400px">
  11.         <caption>402班课程表</caption>
  12.             <thead >
  13.                 <tr>
  14.                     <th></th>
  15.                     <th style="color: greenyellow;
  16.                     background:black">星期一</th>
  17.                     <th style="color: greenyellow;
  18.                     background:black">星期二</th>
  19.                     <th style="color: greenyellow;
  20.                     background:black">星期三</th>
  21.                     <th style="color: greenyellow;
  22.                     background:black">星期四</th>
  23.                     <th style="color: greenyellow;
  24.                     background:black">星期五</th>
  25.                     <th style="color: greenyellow;
  26.                     background:black">星期六</th>
  27.                     <th style="color: greenyellow;
  28.                     background:black">星期天</th>
  29.                 </tr>
  30.             </thead>
  31.             <tbody>
  32.                 <tr>
  33.                     <td style="color: black; background: cadetblue;">1</td>
  34.                     <td>语文</td>
  35.                     <td>英语</td>
  36.                     <td>数学</td>
  37.                     <td>英语</td>
  38.                     <td>语文</td>
  39.                     <td>数学</td>
  40.                     <td>书法</td>
  41.                 </tr>
  42.                 <tr>
  43.                     <td style="color: black; background: cadetblue;">2</td>
  44.                     <td>英语</td>
  45.                     <td>体育</td>
  46.                     <td>数学</td>
  47.                     <td>英语</td>
  48.                     <td>数学</td>
  49.                     <td>数学</td>
  50.                     <td rowspan="2" bgcolor="cyed">兴趣小组</td>
  51.                     <!-- <td></td> -->
  52.                 </tr>
  53.                 <tr>
  54.                     <td style="color: black; background: cadetblue;">3</td>
  55.                     <td>语文</td>
  57.                     <td>语文</td>
  58.                     <td>数学</td>
  59.                     <td>音乐</td>
  60.                     <td>语文</td>
  61.                     <td>数学</td>
  63.                     <!-- <td></td> -->
  64.                 </tr>
  65.                 <tr>
  66.                     <td style="color: black; background: cadetblue;">4</td>
  69.                     <td>数学</td>
  70.                     <td>语文</td>
  71.                     <td>语文</td>
  72.                     <td>美术</td>
  73.                     <td>英语</td>
  74.                     <td>语文</td>
  75.                     <td>阅读</td>
  76.                 </tr>
  77.                 <tr>
  78.                     <td style="color: black; background: cadetblue;">5</td>
  79.                     <td colspan="5" bgcolor="teal">作业课程</td>
  80.                     <!-- <td></td>
  81.                     <td></td>
  82.                     <td></td>
  83.                     <td></td> -->
  84.                     <td>英语</td>
  85.                     <td>周训</td>
  86.                 </tr>
  87.                 <tr>
  88.                     <td style="color: black; background: cadetblue;">6</td>
  89.                     <td colspan="7" bgcolor="aqua">午休</td>
  90.                     <!-- <td></td>
  91.                     <td></td>
  92.                     <td></td>
  93.                     <td></td>
  94.                     <td></td>
  95.                     <td></td> -->
  96.                 </tr>
  97.                 <tr>
  98.                     <td style="color: black; background: cadetblue;">7</td>
  99.                     <td>舞蹈</td>
  100.                     <td>美术</td>
  101.                     <td>舞蹈</td>
  102.                     <td>数学</td>
  103.                     <td>科学</td>
  104.                     <td>语文</td>
  105.                     <td rowspan="6" bgcolor="cyed">周末</td>
  106.                 </tr>
  107.                 <tr>
  108.                     <td style="color: black; background: cadetblue;">8</td>
  109.                     <td>科学</td>
  110.                     <td>语文</td>
  111.                     <td rowspan="2" bgcolor="cyed">兴趣小组</td>
  112.                     <td>社会</td>
  113.                     <td>舞蹈</td>
  114.                     <td>音乐</td>
  115.                     <!-- <td></td> -->
  116.                 </tr>
  117.                 <tr>
  118.                     <td style="color: black; background: cadetblue;">9</td>
  119.                     <td>体育</td>
  120.                     <td>英语</td>
  121.                     <!-- <td></td> -->
  122.                     <td>语文</td>
  123.                     <td>语文</td>
  124.                     <td>英语</td>
  125.                     <!-- <td></td> -->
  126.                 </tr>
  127.                 <tr>
  128.                     <td style="color: black; background: cadetblue;">10</td>
  129.                     <td>班会</td>
  130.                     <td rowspan="2" bgcolor="aqua">文化餐</td>
  131.                     <td>社会</td>
  132.                     <td colspan="3" bgcolor="aqua">文化餐</td>
  133.                     <!-- <td></td>
  134.                     <td></td> -->
  135.                     <!-- <td></td> -->
  136.                 </tr>
  137.                 <tr>
  138.                     <td style="color: black; background: cadetblue;">11</td>
  139.                     <td>数学</td>
  140.                     <!-- <td></td> -->
  141.                     <td>语文</td>
  142.                     <td>英语</td>
  143.                     <td>语文</td>
  144.                     <td>语文</td>
  145.                     <!-- <td></td> -->
  146.                 </tr>
  147.                 <tr>
  148.                     <td style="color: black; background: cadetblue;">12</td>
  149.                     <td>语文</td>
  150.                     <td>英语</td>
  151.                     <td>语文</td>
  152.                     <td>数学</td>
  153.                     <td>英语</td>
  154.                     <td>英语</td>
  155.                     <!-- <td></td> -->
  156.                 </tr>
  157.             </tbody>
  158.  </table>
  159. </body>
  160. </html>

更多相关文章

  1. 简单实例：图文列表、表格（课程表）
  2. 想做跨境电商，不会英语应该怎样入行？
  3. 图文列表和课程表
  4. html中做图片,链接,列表,图文列表 及一个课程表
  5. HTML图片列表及表格制作课程表
  6. 表格/图片/链接/列表
  7. 图文列表和表格（课程表）
  8. 图文列表与课程表代码实现
  9. HTML入门学习之表格制作课程表实战练习

随机推荐

  1. Android——读取含有双字节字符的TXT文件
  2. android sdk 下载地址
  3. android锁屏唤醒并解锁屏幕
  4. android 时间获取以及时间格式化
  5. android几种开源项目源码地址
  6. android 回调函数二:应用实例
  7. Android NDK编译libPng为静态库
  8. Real Android apps leveraging db4o pers
  9. Android Fire Project(1)Recall Env and
  10. android录制更大视频文件的修改