【案例一】a标签和img标签配合三种列表标签写出图片导航演示

直接给上代码

  1. <ul style="text-align:center" >
  2. <!-- 无序列表 -->
  3. <li>
  4. <a href="https://www.php.cn/"><img src="https://www.php.cn/static/images/PHPlogo.png" alt="php中文网"></a>
  5. <a href="https://www.php.cn/course/1209.html"><img src="https://img.php.cn/upload/course/000/000/068/626a5f6248452632.jpg" alt="TP6+AdminLTE搭建新闻后台系统(基础+实战)"></a>
  6. <a href="https://www.php.cn/course/1427.html/"><img src="https://img.php.cn/upload/course/000/000/068/629dc8e8356ad204.png" alt="基于PHP7+MVC博客系统设计"></a>
  7. </li>
  8. <hr>
  9. <!-- 有序列表 -->
  10. <ol>
  11. <li><a href="https://www.php.cn/course/1134.html"><img src="https://img.php.cn/upload/course/000/000/068/62555a16c9bf9556.png" alt="TP6.0 搭建个人博客实战(玉女心经版)"></a></li>
  12. </ol>
  13. <hr>
  14. <!-- 自定义列表 -->
  15. <dl>QQ音乐客户端实战开发</dl>
  16. <dt><a href="https://www.php.cn/course/1173.html"><img src="https://img.php.cn/upload/course/000/000/041/61b71c20206f6732.jpg" alt="QQ音乐客户端实战开发"></a></dt>
  17. </ul>

效果图

图片导航

【案例二】简单写一个课程表

  1. <table style="text-align:center" border="2" align="center" width="700" height="500" cellspacing="0" cellpadding="5">
  2. <caption><h3>课程表</h3></caption>
  3. <thead>
  4. <tr>
  5. <th colspan="2">时间</th>
  6. <th>星期一</th>
  7. <th>星期二</th>
  8. <th>星期三</th>
  9. <th>星期四</th>
  10. <th>星期五</th>
  11. </tr>
  12. </thead>
  13. <tbody>
  14. <tr>
  15. <td colspan="2" rowspan="4" style="background-color: goldenrod;">上午</td>
  16. <td>班会</td>
  17. <td>数学</td>
  18. <td>数学</td>
  19. <td>国学</td>
  20. <td>英语</td>
  21. </tr>
  22. <tr>
  23. <td>科学</td>
  24. <td>语文</td>
  25. <td>语文</td>
  26. <td>数学</td>
  27. <td>语文</td>
  28. </tr>
  29. <tr>
  30. <td>音乐</td>
  31. <td>道德</td>
  32. <td>语文</td>
  33. <td>英语</td>
  34. <td>美术</td>
  35. </tr>
  36. <tr>
  37. <td>语文</td>
  38. <td>美术</td>
  39. <td>体育</td>
  40. <td>语文</td>
  41. <td>语文</td>
  42. </tr>
  43. <tr>
  44. <td colspan="9" style="background-color: lightcoral;">午休(12:00~14:00)</td>
  45. </tr>
  46. <tr>
  47. <td colspan="2" rowspan="3" style="background-color: goldenrod;">下午</td>
  48. <td>特色</td>
  49. <td>道德</td>
  50. <td>特色</td>
  51. <td>数学</td>
  52. <td>音乐</td>
  53. </tr>
  54. <tr>
  55. <td>特色</td>
  56. <td>语文</td>
  57. <td>特色</td>
  58. <td>体育</td>
  59. <td>数学</td>
  60. </tr>
  61. <tr>
  62. <td>劳动</td>
  63. <td style="background-color: palegreen;"></td>
  64. <td>品德</td>
  65. <td>品德</td>
  66. <td style="background-color: palegreen;"></td>
  67. </tr>
  68. </tbody>
  69. <tfoot>
  70. <tr>
  71. <td style="background-color: greenyellow;">
  72. 备注
  73. </td>
  74. <td colspan="6" style="background-color: lightcyan;">值日生打扫卫生</td>
  75. </tr>
  76. </tfoot>
  77. </table>

效果图
课程表

更多相关文章

  1. 2022年PHP学习课程表-表格与图文列表
  2. 关于图片列表和课程表html写法
  3. 图文列表导航组件以及表格制作
  4. HTML基础:HTML的图片、链接、列表、表格标签属性及使用案例/用表
  5. 图片列表导航(附table课程表表格)
  6. 简单制作课程表
  7. 使用HTML标签制作简单的导航和课程表
  8. 0704作业提交
  9. HTML常用标签属性以及应用场景/怎么用表格做一个课程表

随机推荐

  1. 这52页pdf,顶10篇python自动化办公文章
  2. 学习C的第五天
  3. 刚学完python自动化系列文章,就接了一单任
  4. 学习C的第四天
  5. 开开心心爬APP,结果一坑连一坑
  6. nginx跳转 去掉工程名
  7. #6.1# 用python画出你的童年回忆
  8. centos7 中yum不能用了
  9. 看了我做的年度报表,老板大呼NB!
  10. 摆摊吧,后浪