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

  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>

：）演示：

图片列表

更多相关文章

  1. Markdown与html标签
  2. 表格标签演示之课程表
  3. 图文列表和表格（课程表）
  4. 图 链接 列表
  5. HTML图文列表
  6. 图文列表与课程表代码实现
  7. 图文列表与课程表
  8. 图文列表和表格（商品表）
  9. 表格/图片/链接/列表

随机推荐

  1. 中国省市区地址三级联动jQuery插件
  2. 如果原始页面加载是https，那么没有完整网
  3. 无法理解如何使用javascript和jquery代码
  4. 在不触发hashchange事件的情况下更改哈希
  5. 从事件监听器OnClick中排除按钮
  6. Ajax请求等到第一次AJAX调用未完成
  7. jQuery中$.get、$.post、$.getJSON和$.aj
  8. js或Jquery中判断字符串中是否有换行符或
  9. 如何使用javascript或jquery获取图像的自
  10. jQuery——将title属性用作悬停的文本，但