search

博客列表 >图文列表与商品表的实例演示

图文列表与商品表的实例演示

lucaslwk
lucaslwk原创
2022年03月22日 08:59:33581浏览

图文列表与商品表的代码实现

1. 图文列表

实现效果

图文列表实现效果

代码

  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.     <!-- 图文列表 -->
  11.     <!-- ul.nav>li.pic*5>a>img -->
  12.     <ul class="nav" style="display: grid; list-style: none">
  13.       <li class="pic">
  14.         <a href="https://www.php.cn/course/1382.html"
  15.           ><img
  16.             src="https://img.php.cn/upload/course/000/000/041/6209c897986f5556.jpg"
  17.             alt="前端开发"
  18.             style="width: 300px"
  19.           />
  20.           <div>前端开发</div>
  21.         </a>
  22.       </li>
  23.       <li class="pic">
  24.         <a href="https://www.php.cn/course/1383.html"
  25.           ><img
  26.             src="https://img.php.cn/upload/course/000/000/041/6209c922e38a3299.jpg"
  27.             alt="PHP编程"
  28.             style="width: 300px"
  29.           />
  30.           <div>PHP编程</div>
  31.         </a>
  32.       </li>
  33.       <li class="pic">
  34.         <a href="https://www.php.cn/course/1384.html"
  35.           ><img
  36.             src="https://img.php.cn/upload/course/000/000/041/6209c92a93804289.jpg"
  37.             alt="综合实战"
  38.             style="width: 300px"
  39.           />
  40.           <div>综合实战</div>
  41.         </a>
  42.       </li>
  43.     </ul>
  44.   </body>
  45. </html>

2.商品表

实现效果

商品表实现效果

代码

  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>XXX公司数字摄像头价格表</title>
  8.   </head>
  9.   <body>
  10.     <table
  11.       border="1"
  12.       width="600"
  13.       cellspacing="0"
  14.       cellpadding="5"
  15.       align="center"
  16.     >
  17.       <caption>
  18.         <h3>XXX公司数字摄像头价格表</h3>
  19.       </caption>
  20.       <thead>
  21.         <tr bgcolor="lightblue">
  22.           <th>产品类别</th>
  23.           <th>序号</th>
  24.           <th>适用范围</th>
  25.           <th>型号</th>
  26.           <th>性能概述</th>
  27.           <th>应用范围</th>
  28.           <th>结算价(元)</th>
  29.         </tr>
  30.       </thead>
  31.       <tbody>
  32.         <tr>
  33.           <td rowspan="8" bgcolor="lightgreen">数字摄像头</td>
  34.           <td>1</td>
  35.           <td>常规型USB2.0</td>
  36.           <td>500E</td>
  37.           <td>500万像素,10fps</td>
  38.           <td>常规用途1</td>
  39.           <td>1000</td>
  40.         </tr>
  41.         <tr>
  42.           <td>2</td>
  43.           <td>常规型USB3.0</td>
  44.           <td>600E</td>
  45.           <td>600万像素,60fps</td>
  46.           <td>常规用途2</td>
  47.           <td>2000</td>
  48.         </tr>
  49.         <tr>
  50.           <td>3</td>
  51.           <td>常规型USB3.0</td>
  52.           <td>1600E</td>
  53.           <td>1600万像素,15fps</td>
  54.           <td>常规用途3</td>
  55.           <td>3000</td>
  56.         </tr>
  57.         <tr>
  58.           <td>4</td>
  59.           <td>进阶型USB3.0</td>
  60.           <td>600D</td>
  61.           <td>600万像素,30fps</td>
  62.           <td>进阶用途1</td>
  63.           <td>4000</td>
  64.         </tr>
  65.         <tr>
  66.           <td>5</td>
  67.           <td>进阶型USB3.0</td>
  68.           <td>1200D</td>
  69.           <td>1200万像素,30fps</td>
  70.           <td>进阶用途2</td>
  71.           <td>5000</td>
  72.         </tr>
  73.         <tr>
  74.           <td>6</td>
  75.           <td>进阶型USB3.0</td>
  76.           <td>2000D</td>
  77.           <td>2000万像素,20fps</td>
  78.           <td>进阶用途3</td>
  79.           <td>6000</td>
  80.         </tr>
  81.         <tr>
  82.           <td>7</td>
  83.           <td>制冷型USB3.0</td>
  84.           <td>200C</td>
  85.           <td>200万像素,160fps</td>
  86.           <td>制冷用途1</td>
  87.           <td>7000</td>
  88.         </tr>
  89.         <tr>
  90.           <td>8</td>
  91.           <td>制冷型USB3.0</td>
  92.           <td>600C</td>
  93.           <td>600万像素,70fps</td>
  94.           <td>制冷用途2</td>
  95.           <td>8000</td>
  96.         </tr>
  97.         <tr>
  98.           <td colspan="7"></td>
  99.         </tr>
  100.         <tr>
  101.           <td rowspan="3" bgcolor="cyan">附件</td>
  102.           <td colspan="2">1</td>
  104.           <td>FL1</td>
  105.           <td>单色荧光模块</td>
  106.           <td rowspan="3">荧光拍摄</td>
  107.           <td>9000</td>
  108.         </tr>
  109.         <tr>
  110.           <td colspan="2">2</td>
  111.           <td>FL2</td>
  112.           <td>双色荧光模块</td>
  113.           <td>18000</td>
  114.         </tr>
  115.         <tr>
  116.           <td colspan="2">3</td>
  117.           <td>FL3</td>
  118.           <td>三色荧光模块</td>
  119.           <td>27000</td>
  120.         </tr>
  121.       </tbody>
  122.       <tfoot>
  123.         <tr>
  124.           <td colspan="7">
  125.             <dl>
  126.               <dt>备注:</dt>
  127.               <dd>
  128.                 <ol>
  129.                   <li>注意事项1</li>
  130.                   <li>注意事项2</li>
  131.                   <li>注意事项3</li>
  132.                   <li>注意事项4</li>
  133.                 </ol>
  134.               </dd>
  135.             </dl>
  136.           </td>
  137.         </tr>
  138.       </tfoot>
  139.     </table>
  140.   </body>
  141. </html>
上一条：关于 Linux Polkit 权限提升漏洞(CVE-2021-4034)的修复方法下一条：图文列表及表格学习总结
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议