博客列表 >表格/图片/链接/列表

表格/图片/链接/列表

諭
原创
2022年03月19日 17:59:27475浏览

一、表格/图片/链接/列表

  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>Document</title>
  8. </head>
  9. <body>
  10. <table
  11. style="width: 80%; text-align: center"
  12. border="1"
  13. cellspacing="0"
  14. cellpadding="5"
  15. >
  16. <caption style="font-weight: bolder; margin-bottom: 1em">
  17. 课时表
  18. </caption>
  19. <thead>
  20. <tr style="background: rgb(111, 140, 219)">
  21. <th colspan="2">时间</th>
  22. <th>星期一</th>
  23. <th>星期二</th>
  24. <th>星期三</th>
  25. <th>星期四</th>
  26. <th>星期五</th>
  27. </tr>
  28. </thead>
  29. <tbody>
  30. <tr>
  31. <th rowspan="3">上午</th>
  32. <th>9:00-9:40</th>
  33. <th>语文</th>
  34. <th>数学</th>
  35. <th>英语</th>
  36. <th>音乐</th>
  37. <th>体育</th>
  38. </tr>
  39. <tr>
  40. <th>9:55-10:35</th>
  41. <th>语文</th>
  42. <th>数学</th>
  43. <th>英语</th>
  44. <th>音乐</th>
  45. <th>体育</th>
  46. </tr>
  47. <tr>
  48. <th>10:50-11:30</th>
  49. <th>语文</th>
  50. <th>英语</th>
  51. <th>数学</th>
  52. <th>音乐</th>
  53. <th>体育</th>
  54. </tr>
  55. <tr>
  56. <th colspan="7">午休(11:30-13:00)</th>
  57. </tr>
  58. <tr>
  59. <th
  60. rowspan="2
  61. "
  62. >
  63. 下午
  64. </th>
  65. <th>13:00-13:40</th>
  66. <th>语文</th>
  67. <th>英语</th>
  68. <th>数学</th>
  69. <th>音乐</th>
  70. <th>体育</th>
  71. </tr>
  72. <tr>
  73. <th>13:55-14:35</th>
  74. <th>数学</th>
  75. <th>英语</th>
  76. <th>语文</th>
  77. <th>体育</th>
  78. <th>音乐</th>
  79. </tr>
  80. </tbody>
  81. <tfoot>
  82. <tr>
  83. <th>备注</th>
  84. <th colspan="6">每天16:00之前提交作业</th>
  85. </tr>
  86. </tfoot>
  87. </table>
  88. </body>
  89. </html>

:)演示:

课表描述

二、图片/链接/列表

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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. <style>
  9. img{
  10. width: 300px;
  11. height: 180px;
  12. }
  13. ul>li{
  14. margin-left: 10px;
  15. }
  16. </style>
  17. </head>
  18. <body>
  19. <ul class="nav" style="display: flex; list-style: none;width: 100%;">
  20. <li class="item">
  21. <a href="https://www.php.cn/course/1401.html">
  22. <img src="./image/part1.jpeg" alt="" /><br>
  23. <span>第一课</span>
  24. </a>
  25. </li>
  26. <li class="item">
  27. <a href="https://www.php.cn/course/1400.html">
  28. <img src="./image/part2.jpeg" alt="" />
  29. <br>
  30. <span>第二课</span>
  31. </a>
  32. </li>
  33. <li class="item">
  34. <a href="https://www.php.cn/course/1399.html">
  35. <img src="./image/part3.jpeg" alt="" />
  36. <br>
  37. <span>第三课</span>
  38. </a>
  39. </li>
  40. </ul>
  41. </body>
  42. </html>

:)演示:

图片列表

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议