Blogger Information
Blog 6
fans 0
comment 0
visits 3062
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
图文列表和使用表格制作的商品表
似水流年
Original
798 people have browsed it

图文列表

代码:

  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>

预览图:
商品表预览图

Correcting teacher:PHPzPHPz

Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post