ASCII码 ASCII码

简单实例:图文列表、表格(课程表)

发布于:2022-04-10 12:52:49  栏目:技术文档

1、简单图文列表实例

代码

  1. <ul class="nav" style="display: flex;list-style: none">
  2. <li class="item">
  3. <a href="/static/images/cheng.jpg"><img src="/static/images/cheng.jpg" alt="城堡"></a>
  4. <a href="/static/images/cheng.jpg">城堡</a>
  5. </li>
  6. &nbsp;
  7. <li class="item">
  8. <a href="/static/images/tree.jpg"><img src="/static/images/tree.jpg" alt="圣诞树" ></a>
  9. <a href="/static/images/tree.jpg">圣诞树</a>
  10. </li>
  11. &nbsp;
  12. <li class="item">
  13. <a href="/static/images/kfc.jpg"><img src="/static/images/kfc.jpg" alt="肯德基老人"></a>
  14. <a href="/static/images/kfc.jpg">肯德基老人</a>
  15. </li>
  16. &nbsp;
  17. </ul>
  18. <style>
  19. img{
  20. width:200px;height:250px
  21. }
  22. </style>

<!-- ul.nav>li*3.item>a -->

<!-- style="display:flex" 弹性布局-->

<!-- list-style: none 没有列表标记(默认是实心圆点列表标记) -->

<!-- alt 在图像无法显示或者用户禁用图像显示时,代替图像显示在浏览器中的内容 -->

效果

2、表格实例:课程表

代码

  1. <style>
  2. td{text-align: center;}
  3. thead,tfoot{background-color: lightgray;}
  4. </style>
  5. <table border="1" width="450" cellspacing="0" cellpadding="5" align="center">
  6. <caption>
  7. <h3>五年级第一学期课程表</h3>
  8. </caption>
  9. <!-- thead>th{xx}*6 -->
  10. <thead>
  11. <th>时间</th>
  12. <th>周一</th>
  13. <th>周二</th>
  14. <th>周三</th>
  15. <th>周四</th>
  16. <th>周五</th>
  17. </thead>
  18. <tbody>
  19. <!-- tr*8>td{xxxxx}*6 -->
  20. <tr>
  21. <td rowspan="4" bgcolor="#e7f7f7">上午</td>
  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>数学</td>
  44. <td>美术</td>
  45. <td>实践</td>
  46. <td>语文</td>
  47. <td>体育</td>
  48. </tr>
  49. <tr>
  50. <td colspan="6" align="center">中午午休</td>
  51. </tr>
  52. <tr>
  53. <td rowspan="3" bgcolor="#e7f7f7">下午</td>
  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>
  75. <tfoot>
  76. <tr>
  77. <td>备注:</td>
  78. <td colspan="5">课后做完作业再回家</td>
  79. </tr>
  80. </tfoot>
  81. </table>

<!-- rowspan规定单元格可横跨的行数,垂直合并。colspan规定单元格可横跨的列数,水平合并。 -->

<!-- cellspacing规定单元格之间的空间。cellpadding规定单元边沿与其内容之间的空白。 -->

效果

相关推荐
阅读 +