search

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

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

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

图文列表

代码：

  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 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议