Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 图文列表与商品表的实例演示
Blogger Information
Blog 33
fans 0
comment 0
visits 17121
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
图文列表与商品表的实例演示
lucaslwk
Original
578 people have browsed it

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

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>
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