博客列表 >图文列表和使用表格制作的商品表

图文列表和使用表格制作的商品表

似水流年
似水流年原创
2022年03月18日 17:34:18814浏览

图文列表

代码:

  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>作业:图文列表</title>
  8. </head>
  9. <body>
  10. <div style="width: 600px;">
  11. <ul class="nav" style="display: flex;list-style: none;">
  12. <li style="padding-left: 10px;">
  13. <a href="https://www.php.cn/" style="text-decoration: none;">
  14. <img src="static/1.jpg" alt="" style="width: 150px;">
  15. <p>课程二</p>
  16. </a>
  17. </li>
  18. <li style="padding-left: 10px;">
  19. <a href="https://www.php.cn/" style="text-decoration: none;">
  20. <img src="static/2.jpg" alt="" style="width: 150px;">
  21. <p>课程二</p>
  22. </a>
  23. </li>
  24. <li style="padding-left: 10px;">
  25. <a href="https://www.php.cn/" style="text-decoration: none;">
  26. <img src="static/13.jpg" alt="" style="width: 150px;">
  27. <p>课程三</p>
  28. </a>
  29. </li>
  30. </ul>
  31. </div>
  32. </body>
  33. </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>用html表格制作商品表</title>
  8. </head>
  9. <body>
  10. <table border="1" width="600" >
  11. <caption>今日手机报价表</caption>
  12. <thead>
  13. <tr>
  14. <th>品牌</th>
  15. <th>型号</th>
  16. <th>价格</th>
  17. <th>成色</th>
  18. </tr>
  19. </thead>
  20. <tbody>
  21. <tr>
  22. <td rowspan="2">苹果</td>
  23. <td>iPhone 13</td>
  24. <td>9800</td>
  25. <td rowspan="5">全新</td>
  26. </tr>
  27. <tr>
  28. <td>iPhone 13 Plus</td>
  29. <td>12800</td>
  30. </tr>
  31. <tr>
  32. <td>华为</td>
  33. <td>MAte6</td>
  34. <td>5988</td>
  35. </tr>
  36. <tr>
  37. <td>小米</td>
  38. <td>Red Mi 6</td>
  39. <td>3988</td>
  40. </tr>
  41. <tr>
  42. <td>荣耀</td>
  43. <td>荣耀6</td>
  44. <td>2988</td>
  45. </tr>
  46. <tr>
  47. <td colspan="4">备注:当日含税价</td>
  48. </tr>
  49. </tbody>
  50. <tfoot></tfoot>
  51. </table>
  52. </body>
  53. </html>

预览图:
商品表预览图

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议