ASCII码 ASCII码

图文列表与课程表的演示

发布于:2022-04-27 17:32:34  栏目:技术文档

图文列表与课程表的演示

图文列表

效果

代码

  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>
  18. </body>
  19. </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>
  56. <td>语文</td>
  57. <td>数学</td>
  58. <td>音乐</td>
  59. <td>语文</td>
  60. <td>数学</td>
  61. <!-- <td></td> -->
  62. </tr>
  63. <tr>
  64. <td style="color: black; background: cadetblue;">4</td>
  65. <td>数学</td>
  66. <td>语文</td>
  67. <td>语文</td>
  68. <td>美术</td>
  69. <td>英语</td>
  70. <td>语文</td>
  71. <td>阅读</td>
  72. </tr>
  73. <tr>
  74. <td style="color: black; background: cadetblue;">5</td>
  75. <td colspan="5" bgcolor="teal">作业课程</td>
  76. <!-- <td></td>
  77. <td></td>
  78. <td></td>
  79. <td></td> -->
  80. <td>英语</td>
  81. <td>周训</td>
  82. </tr>
  83. <tr>
  84. <td style="color: black; background: cadetblue;">6</td>
  85. <td colspan="7" bgcolor="aqua">午休</td>
  86. <!-- <td></td>
  87. <td></td>
  88. <td></td>
  89. <td></td>
  90. <td></td>
  91. <td></td> -->
  92. </tr>
  93. <tr>
  94. <td style="color: black; background: cadetblue;">7</td>
  95. <td>舞蹈</td>
  96. <td>美术</td>
  97. <td>舞蹈</td>
  98. <td>数学</td>
  99. <td>科学</td>
  100. <td>语文</td>
  101. <td rowspan="6" bgcolor="cyed">周末</td>
  102. </tr>
  103. <tr>
  104. <td style="color: black; background: cadetblue;">8</td>
  105. <td>科学</td>
  106. <td>语文</td>
  107. <td rowspan="2" bgcolor="cyed">兴趣小组</td>
  108. <td>社会</td>
  109. <td>舞蹈</td>
  110. <td>音乐</td>
  111. <!-- <td></td> -->
  112. </tr>
  113. <tr>
  114. <td style="color: black; background: cadetblue;">9</td>
  115. <td>体育</td>
  116. <td>英语</td>
  117. <!-- <td></td> -->
  118. <td>语文</td>
  119. <td>语文</td>
  120. <td>英语</td>
  121. <!-- <td></td> -->
  122. </tr>
  123. <tr>
  124. <td style="color: black; background: cadetblue;">10</td>
  125. <td>班会</td>
  126. <td rowspan="2" bgcolor="aqua">文化餐</td>
  127. <td>社会</td>
  128. <td colspan="3" bgcolor="aqua">文化餐</td>
  129. <!-- <td></td>
  130. <td></td> -->
  131. <!-- <td></td> -->
  132. </tr>
  133. <tr>
  134. <td style="color: black; background: cadetblue;">11</td>
  135. <td>数学</td>
  136. <!-- <td></td> -->
  137. <td>语文</td>
  138. <td>英语</td>
  139. <td>语文</td>
  140. <td>语文</td>
  141. <!-- <td></td> -->
  142. </tr>
  143. <tr>
  144. <td style="color: black; background: cadetblue;">12</td>
  145. <td>语文</td>
  146. <td>英语</td>
  147. <td>语文</td>
  148. <td>数学</td>
  149. <td>英语</td>
  150. <td>英语</td>
  151. <!-- <td></td> -->
  152. </tr>
  153. </tbody>
  154. </table>
  155. </body>
  156. </html>
相关推荐
阅读 +