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

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>

更多相关文章

  1. Android(安卓)用源代码写layout布局
  2. android屏幕 像素 DP 相关计算
  3. 像素鸟（flapybird）的简单实现
  4. Android(安卓)ORM 框架：GreenDao 使用详解（进阶篇）
  5. android屏幕单位
  6. Android中的度量单位
  7. android : px dip
  8. Android中AlertDialog用法实例分析
  9. Android(安卓)Bitmap 缩放 旋转 水印 裁剪操作

随机推荐

  1. 如何进行Android单元测试
  2. Android SDK 更新失败解决 Failed to fet
  3. 2013.09.02(2)——— android 耳机意外拔
  4. Android 单元测试链接整理
  5. android分割线
  6. ch023 Android ContentProvider(第二部分
  7. Android:推荐学习
  8. ch031 Android AsyncTask
  9. ch016 Android 自定义对话框.
  10. Android 垂直的Slidebar 代码