ASCII码 ASCII码

关于图片列表和课程表html写法

发布于：2022-07-05 13:44:58  栏目：技术文档

关于图片列表和课程表html写法

1. 图片列表

  1. <!-- 图片列表 -->
  2. <div class="list">
  3.         <ul>
  4.             <li><a href="#"><img src="https://img.php.cn/upload/course/000/000/001/6296df1d179f3127.png" title="前端开发"   width="200" alt=""></a><a href="">前端开发</a></li>
  5.             <li><a href="#"><img src="https://img.php.cn/upload/course/000/000/001/6296df1d179f3127.png"  title="前端开发"  width="200" alt=""></a><a href="">前端开发</a></li>
  6.             <li><a href="#"><img src="https://img.php.cn/upload/course/000/000/001/6296df1d179f3127.png" title="前端开发"   width="200" alt=""></a><a href="">前端开发</a></li>
  7.         </ul>
  8. </div>

1.1 效果图

图片列表

2. 课程表

  1. <!-- 课程表 -->
  2. <table border="1px"  style="text-align: center;">
  3.     <caption>课程表</caption>
  4.     <thead>
  5.         <th>作息时间</th>
  6.         <th>星期一</th>
  7.         <th>星期二</th>
  8.         <th>星期三</th>
  9.         <th>星期四</th>
  10.         <th>星期五</th>
  11.     </thead>
  12.     <tbody>
  13.         <tr>
  14.             <td rowspan="4" class="kc">上午8:00-11:00</td>
  15.             <td>数学</td>
  16.             <td>语文</td>
  17.             <td>语文</td>
  18.             <td>英语</td>
  19.             <td>数学</td>
  20.         </tr>
  21.         <tr>
  22.             <td>语文</td>
  23.             <td>数学</td>
  24.             <td>英语</td>
  25.             <td>语文</td>
  26.             <td>语文</td>
  27.         </tr>
  28.         <tr>
  29.             <td>科学</td>
  30.             <td>英语</td>
  31.             <td>音乐</td>
  32.             <td>科学</td>
  33.             <td>体育</td>
  34.         </tr>
  35.         <tr>
  36.             <td>品德与社会</td>
  37.             <td>科学</td>
  38.             <td>数学</td>
  39.             <td>体育</td>
  40.             <td>美术</td>
  41.         </tr>
  42.         <tr>
  43.             <td colspan="6"  class="kc">午休大课间</td>
  44.         </tr>
  45.         <tr>
  46.             <td rowspan="4" class="kc">下午13:00-16:00</td>
  47.             <td>体育</td>
  48.             <td>美术</td>
  49.             <td>微机课</td>
  50.             <td>品德与社会</td>
  51.             <td>数学</td>
  52.         </tr>
  53.         <tr>
  54.             <td>微机课</td>
  55.             <td>语文</td>
  56.             <td>体育</td>
  57.             <td>劳动</td>
  58.             <td>音乐</td>
  59.         </tr>
  60.         <tr>
  61.             <td>自习</td>
  62.             <td>自习</td>
  63.             <td>自习</td>
  64.             <td>自习</td>
  65.             <td>自习</td>
  66.         </tr>
  67.         <tr>
  68.             <td>自习</td>
  69.             <td>自习</td>
  70.             <td>自习</td>
  71.             <td>自习</td>
  72.             <td>自习</td>
  73.         </tr>
  74.     </tbody>

2.1 效果图

课程表

3. 完整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>Document</title>
  8. </head>
  9. <body>
  10.     <style>
  11.         .list,.list ul{width: 100% ; text-align: center;margin: 0 auto;}
  12.         .list ul li{list-style: none; float: left; width: 210px;}
  13.         .list ul li a{text-decoration:none;}
  14.         .kc{ background-color: yellow;}
  15.     </style>
  16.     <!-- 图片列表 -->
  17. <div class="list">
  18.         <ul>
  19.             <li><a href="#"><img src="https://img.php.cn/upload/course/000/000/001/6296df1d179f3127.png" title="前端开发"   width="200" alt=""></a><a href="">前端开发</a></li>
  20.             <li><a href="#"><img src="https://img.php.cn/upload/course/000/000/001/6296df1d179f3127.png"  title="前端开发"  width="200" alt=""></a><a href="">前端开发</a></li>
  21.             <li><a href="#"><img src="https://img.php.cn/upload/course/000/000/001/6296df1d179f3127.png" title="前端开发"   width="200" alt=""></a><a href="">前端开发</a></li>
  22.         </ul>
  23. </div>
  24. <!-- 课程表 -->
  25. <table border="1px"  style="text-align: center;">
  26.     <caption>课程表</caption>
  27.     <thead>
  28.         <th>作息时间</th>
  29.         <th>星期一</th>
  30.         <th>星期二</th>
  31.         <th>星期三</th>
  32.         <th>星期四</th>
  33.         <th>星期五</th>
  34.     </thead>
  35.     <tbody>
  36.         <tr>
  37.             <td rowspan="4" class="kc">上午8:00-11:00</td>
  38.             <td>数学</td>
  39.             <td>语文</td>
  40.             <td>语文</td>
  41.             <td>英语</td>
  42.             <td>数学</td>
  43.         </tr>
  44.         <tr>
  45.             <td>语文</td>
  46.             <td>数学</td>
  47.             <td>英语</td>
  48.             <td>语文</td>
  49.             <td>语文</td>
  50.         </tr>
  51.         <tr>
  52.             <td>科学</td>
  53.             <td>英语</td>
  54.             <td>音乐</td>
  55.             <td>科学</td>
  56.             <td>体育</td>
  57.         </tr>
  58.         <tr>
  59.             <td>品德与社会</td>
  60.             <td>科学</td>
  61.             <td>数学</td>
  62.             <td>体育</td>
  63.             <td>美术</td>
  64.         </tr>
  65.         <tr>
  66.             <td colspan="6"  class="kc">午休大课间</td>
  67.         </tr>
  68.         <tr>
  69.             <td rowspan="4" class="kc">下午13:00-16:00</td>
  70.             <td>体育</td>
  71.             <td>美术</td>
  72.             <td>微机课</td>
  73.             <td>品德与社会</td>
  74.             <td>数学</td>
  75.         </tr>
  76.         <tr>
  77.             <td>微机课</td>
  78.             <td>语文</td>
  79.             <td>体育</td>
  80.             <td>劳动</td>
  81.             <td>音乐</td>
  82.         </tr>
  83.         <tr>
  84.             <td>自习</td>
  85.             <td>自习</td>
  86.             <td>自习</td>
  87.             <td>自习</td>
  88.             <td>自习</td>
  89.         </tr>
  90.         <tr>
  91.             <td>自习</td>
  92.             <td>自习</td>
  93.             <td>自习</td>
  94.             <td>自习</td>
  95.             <td>自习</td>
  96.         </tr>
  97.     </tbody>
  98. </table>
  99. </body>
  100. </html>
相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行