关于图片列表和课程表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>

更多相关文章

  1. html制作课程表格代码（用HTML5标签设计课程表）
  2. 使用APICloud AVM多端框架开发课程表功能
  3. 图文列表与课程表的演示
  4. Android多功能课程表项目实现（完整版）
  5. 简单实例：图文列表、表格（课程表）
  6. 图文列表和课程表
  7. Emmet插件使用和HTML知识及课程表作业
  8. 图文列表和课程表
  9. html中做图片,链接,列表,图文列表 及一个课程表

随机推荐

  1. 下拉列表(Spinner)
  2. android当方法数超过64k时(android studi
  3. android的ListView
  4. android中application标签说明
  5. Android Wi-Fi AutoConnect to Ap take l
  6. Android 复习笔记之图解Actionbar
  7. android UI适配简单记录二
  8. Android(不)联动的顶层菜单栏tabLayout+v
  9. Android常用Support库
  10. Android 获取存储信息