简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >图片列表，商品列表

图片列表，商品列表

shooter
shooter原创
2022年03月18日 17:32:39391浏览

  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=, initial-scale=1.0" />
  7.     <title>图文列表</title>
  8.   </head>
  9.   <body>
  10.     <div class="">
  11.       <ul
  12.         class="nav"
  13.         style="display: flex; list-style: none; text-align: center"
  14.       >
  15.         <li class="met">
  16.           <a
  17.             href="https://img0.baidu.com/it/u=4027294468,2844812981&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
  18.             ><img src="imges/1.jpg" alt="" width="200"
  19.           /></a>
  20.           <a
  21.             href="https://img0.baidu.com/it/u=4027294468,2844812981&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
  22.             >兔兔</a
  23.           >
  24.         </li>
  25.         &nbsp;
  26.         <li class="met">
  27.           <a
  28.             href="https://img0.baidu.com/it/u=4027294468,2844812981&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
  29.             ><img src="imges/1.jpg" alt="" width="200"
  30.           /></a>
  31.           <a
  32.             href="https://img0.baidu.com/it/u=4027294468,2844812981&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
  33.             >兔兔</a
  34.           >
  35.         </li>
  36.         &nbsp;
  37.         <li class="met">
  38.           <a
  39.             href="https://img0.baidu.com/it/u=4027294468,2844812981&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
  40.             ><img src="imges/1.jpg" alt="" width="200"
  41.           /></a>
  42.           <a
  43.             href="https://img0.baidu.com/it/u=4027294468,2844812981&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
  44.             >兔兔</a
  45.           >
  46.         </li>
  47.         &nbsp;
  48.         <li class="met">
  49.           <a
  50.             href="https://img0.baidu.com/it/u=4027294468,2844812981&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
  51.             ><img src="imges/1.jpg" alt="" width="200"
  52.           /></a>
  53.           <a
  54.             href="https://img0.baidu.com/it/u=4027294468,2844812981&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
  55.             >兔兔</a
  56.           >
  57.         </li>
  58.         &nbsp;
  59.         <li class="met">
  60.           <a
  61.             href="https://img0.baidu.com/it/u=4027294468,2844812981&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
  62.             ><img src="imges/1.jpg" alt="" width="200"
  63.           /></a>
  64.           <a
  65.             href="https://img0.baidu.com/it/u=4027294468,2844812981&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
  66.             >兔兔</a
  67.           >
  68.         </li>
  69.         &nbsp;
  70.         <li class="met">
  71.           <a
  72.             href="https://img0.baidu.com/it/u=4027294468,2844812981&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
  73.             ><img src="imges/1.jpg" alt="" width="200"
  74.           /></a>
  75.           <a
  76.             href="https://img0.baidu.com/it/u=4027294468,2844812981&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
  77.             >兔兔</a
  78.           >
  79.         </li>
  80.         &nbsp;
  81.         <li class="met">
  82.           <a
  83.             href="https://img0.baidu.com/it/u=4027294468,2844812981&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
  84.             ><img src="imges/1.jpg" alt="" width="200"
  85.           /></a>
  86.           <a
  87.             href="https://img0.baidu.com/it/u=4027294468,2844812981&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
  88.             >兔兔</a
  89.           >
  90.         </li>
  91.         &nbsp;
  92.       </ul>
  93.       <div class="">
  94.         <ul
  95.           class="nav"
  96.           style="display: flex; list-style: none; text-align: center"
  97.         >
  98.           <li class="met">
  99.             <a
  100.               href="https://img0.baidu.com/it/u=4027294468,2844812981&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
  101.               ><img src="imges/1.jpg" alt="" width="200"
  102.             /></a>
  103.             <a
  104.               href="https://img0.baidu.com/it/u=4027294468,2844812981&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
  105.               >兔兔</a
  106.             >
  107.           </li>
  108.           &nbsp;
  109.           <li class="met">
  110.             <a
  111.               href="https://img0.baidu.com/it/u=4027294468,2844812981&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
  112.               ><img src="imges/1.jpg" alt="" width="200"
  113.             /></a>
  114.             <a
  115.               href="https://img0.baidu.com/it/u=4027294468,2844812981&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
  116.               >兔兔</a
  117.             >
  118.           </li>
  119.           &nbsp;
  120.           <li class="met">
  121.             <a
  122.               href="https://img0.baidu.com/it/u=4027294468,2844812981&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
  123.               ><img src="imges/1.jpg" alt="" width="200"
  124.             /></a>
  125.             <a
  126.               href="https://img0.baidu.com/it/u=4027294468,2844812981&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
  127.               >兔兔</a
  128.             >
  129.           </li>
  130.           &nbsp;
  131.           <li class="met">
  132.             <a
  133.               href="https://img0.baidu.com/it/u=4027294468,2844812981&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
  134.               ><img src="imges/1.jpg" alt="" width="200"
  135.             /></a>
  136.             <a
  137.               href="https://img0.baidu.com/it/u=4027294468,2844812981&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
  138.               >兔兔</a
  139.             >
  140.           </li>
  141.           &nbsp;
  142.           <li class="met">
  143.             <a
  144.               href="https://img0.baidu.com/it/u=4027294468,2844812981&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
  145.               ><img src="imges/1.jpg" alt="" width="200"
  146.             /></a>
  147.             <a
  148.               href="https://img0.baidu.com/it/u=4027294468,2844812981&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
  149.               >兔兔</a
  150.             >
  151.           </li>
  152.           &nbsp;
  153.           <li class="met">
  154.             <a
  155.               href="https://img0.baidu.com/it/u=4027294468,2844812981&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
  156.               ><img src="imges/1.jpg" alt="" width="200"
  157.             /></a>
  158.             <a
  159.               href="https://img0.baidu.com/it/u=4027294468,2844812981&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
  160.               >兔兔</a
  161.             >
  162.           </li>
  163.           &nbsp;
  164.           <li class="met">
  165.             <a
  166.               href="https://img0.baidu.com/it/u=4027294468,2844812981&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
  167.               ><img src="imges/1.jpg" alt="" width="200"
  168.             /></a>
  169.             <a
  170.               href="https://img0.baidu.com/it/u=4027294468,2844812981&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
  171.               >兔兔</a
  172.             >
  173.           </li>
  174.           &nbsp;
  175.         </ul>
  176.       </div>
  177.     </div>
  178.   </body>
  179. </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>商品表</title>
  8.   </head>
  9.   <body>
  10.     <table
  11.       border="1"
  12.       width="1000"
  13.       cellspacing="0"
  14.       cellpadding="5"
  15.       align="center"
  16.       >
  18.       <caption>
  19.         <h1>商品表</h1>
  20.       </caption>
  21.       <!-- 表头 -->
  22.       <thead>
  23.         <tr>
  24.           <th>商品区</th>
  25.           <th>商品名称</th>
  26.           <th>数量</th>
  27.           <th>价格</th>
  28.           <th>库存</th>
  29.           <th>颜色</th>
  30.           <th>规格</th>
  31.           <th>图片</th>
  32.         </tr>
  33.       </thead>
  34.       <tbody>
  35.         <tr>
  36.           <td rowspan="4" bgcolor="purple, violet">服装区</td>
  37.           <td>男装</td>
  38.           <td>100</td>
  39.           <td>99</td>
  40.           <td>999</td>
  41.           <td>黑色，白色，蓝色</td>
  42.           <td>S,L,XL</td>
  43.           <td><img src="imges/2.jpg" alt="" width="50" /></td>
  44.         </tr>
  45.         <tr>
  46.           <td>女装</td>
  47.           <td>100</td>
  48.           <td>99</td>
  49.           <td>999</td>
  50.           <td>黑色，白色，蓝色</td>
  51.           <td>S,L,XL</td>
  52.           <td><img src="imges/3.jpg" alt="" width="50" /></td>
  53.         </tr>
  54.         <tr>
  55.           <td>男童装</td>
  56.           <td>100</td>
  57.           <td>99</td>
  58.           <td>999</td>
  59.           <td>黑色，白色，蓝色</td>
  60.           <td>3M、6M、1Y、2Y、3Y</td>
  61.           <td><img src="imges/4.jpg" alt="" width="50" /></td>
  62.         </tr>
  63.         <tr>
  64.           <td>女童装</td>
  65.           <td>100</td>
  66.           <td>99</td>
  67.           <td>999</td>
  68.           <td>黑色，白色，蓝色</td>
  69.           <td>3M、6M、1Y、2Y、3Y</td>
  70.           <td><img src="imges/5.jpg" alt="" width="50" /></td>
  71.         </tr>
  72.       </tbody>
  74.       <tbody>
  75.         <tr align="center">
  76.           <td colspan="8" bgcolor="#FF00FF">手机热卖区</td>
  77.         </tr>
  78.       </tbody>
  79.       <tbody>
  80.         <tr>
  81.           <td rowspan="4" bgcolor="scarlet">手机区</td>
  82.           <td>华为</td>
  83.           <td>100</td>
  84.           <td>3000</td>
  85.           <td>999</td>
  86.           <td>黑色，白色，蓝色</td>
  87.           <td>64G、168G、256G、512G</td>
  88.           <td><img src="imges/6.jpg" alt="" width="50" /></td>
  90.         </tr>
  91.         <tr>
  92.           <td>小米</td>
  93.           <td>100</td>
  94.           <td>3000</td>
  95.           <td>999</td>
  96.           <td>黑色，白色，蓝色</td>
  97.           <td>64G、168G、256G、512G</td>
  98.           <td><img src="imges/7.jpg" alt="" width="50" /></td>
  100.         </tr>
  101.         <tr>
  102.           <td>vivo</td>
  103.           <td>100</td>
  104.           <td>3000</td>
  105.           <td>999</td>
  106.           <td>黑色，白色，蓝色</td>
  107.           <td>64G、168G、256G、512G</td>
  108.           <td><img src="imges/8.jpg" alt="" width="50" /></td>
  110.         </tr>
  111.         <tr>
  112.           <td>苹果</td>
  113.           <td>100</td>
  114.           <td>3000</td>
  115.           <td>999</td>
  116.           <td>黑色，白色，蓝色</td>
  117.           <td>64G、168G、256G、512G</td>
  118.           <td><img src="imges/9.jpg" alt="" width="50" /></td>
  120.         </tr>
  121.         </tbody>
  122.       </tbody>
  123.     </table>
  124.   </body>
  125. </html>
上一条：用表格实现一张课程表下一条：markdown语法练习及html标签功能
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多