Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 完成一个购物车（表格实现）
Blogger Information
Blog 28
fans 0
comment 1
visits 21322
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
完成一个购物车（表格实现）
南宫
Original
693 people have browsed it
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  8.     <style>
  9.         html{
  10.             /* 所有字号 */
  11.             font-size: 14px;
  12.         }
  13.         table{
  14.             /* 将单元格之间的间隙去掉    会忽略 border-spacing 和 empty-cells 属性*/
  15.             border-collapse: collapse;
  16.             width: 70%;
  17.             /* 水平居中 */
  18.             margin: auto;
  19.             color: #666;
  20.             /* 定义更细的字符 */
  21.             font-weight: lighter;
  22.             text-align: center;
  23.         }
  25.         /* 表格线直接添加到单元格上面 */
  26.         table thead th,
  27.         table td{
  28.             border-bottom: 1px solid #ccc;
  29.             padding: 10px;
  30.         }
  32.         /* 标题样式 */
  33.         table caption{
  34.             font-size: 1.5rem;
  35.             margin-bottom: 15px;
  36.             color: green;
  37.         }
  39.         table th{
  40.             font-weight: lighter;
  41.             color: green;
  42.         }
  43.         table thead tr{
  44.             background-color: cyan;
  45.         }
  46.         /* 隔行变色  也可以用:nth-of-type(even)  */
  48.         table tbody tr:nth-child(even){
  49.             background-color: yellow;
  50.         }
  51.         /* 鼠标悬停效果 */
  52.         table tbody tr:hover{
  53.             background-color: pink;
  54.         }
  55.         /* 底部样式 */
  56.         table tfoot td{
  57.             /* 去掉底部边框 */
  58.             border-bottom: none;
  59.             color: coral;
  60.             font-size: 1.2rem;
  61.             /* 字体加粗 */
  62.             font-weight: bolder;
  63.         }
  65.         /* 结算按钮 */
  66.         /* body div:last-of-type{
  67.             width: 70%;
  68.             margin: 10px auto;
  69.         } */
  71.         body div:first-of-type button{
  72.             /* 靠右 */
  73.             float: right;
  74.             width: 120px;
  75.             height: 32px;
  76.             background-color: seagreen;
  77.             color: white;
  78.             border: none;
  79.             /* 设置鼠标样式 小手 */
  80.             cursor: pointer;
  81.         }
  83.         /* 鼠标悬停时样式 */
  84.         body div:first-of-type button:hover{
  85.             background-color: coral;
  86.             font-size: 1.1rem;
  87.         }
  88.     </style>
  89. </head>
  90. <body>
  91.     <!-- 表格 -->
  92.     <table>
  93.         <!-- 标题 -->
  94.         <caption>
  95.             购物车
  96.         </caption>
  97.         <!-- 头部 -->
  98.         <thead>
  99.             <tr>
  100.                 <th>ID</th>
  101.                 <th>品名</th>
  102.                 <th>单价(元)</th>
  103.                 <th>单位</th>
  104.                 <th>数量</th>
  105.                 <th>金额(元)</th>
  106.             </tr>
  107.         </thead>
  108.         <!-- 主体 -->
  109.         <tbody>
  110.             <tr>
  111.                 <td>SN-1001</td>
  112.                 <td>MacBook Pro电脑</td>
  113.                 <td>18999</td>
  114.                 <td>台</td>
  115.                 <td>1</td>
  116.                 <td>18999</td>
  117.             </tr>
  118.             <tr>
  119.                 <td>SN-1002</td>
  120.                 <td>iPhone XS</td>
  121.                 <td>4999</td>
  122.                 <td>部</td>
  123.                 <td>2</td>
  124.                 <td>9998</td>
  125.             </tr>
  126.             <tr>
  127.                 <td>SN-1003</td>
  128.                 <td>小米音响</td>
  129.                 <td>399</td>
  130.                 <td>台</td>
  131.                 <td>5</td>
  132.                 <td>1995</td>
  133.             </tr>
  134.             <tr>
  135.                 <td>SN-1004</td>
  136.                 <td>128G三星固态移动硬盘</td>
  137.                 <td>245</td>
  138.                 <td>个</td>
  139.                 <td>2</td>
  140.                 <td>490</td>
  141.             </tr>
  142.             <tr>
  143.                 <td>SN-1005</td>
  144.                 <td>格力空调1.5匹</td>
  145.                 <td>3020</td>
  146.                 <td>台</td>
  147.                 <td>1</td>
  148.                 <td>3020</td>
  149.             </tr>
  150.         </tbody>
  151.         <!-- 底部 -->
  152.         <tfoot>
  153.             <tr>
  154.                 <td colspan="4">总计:</td>
  155.                 <td>11</td>
  156.                 <td>34502</td>
  157.             </tr>
  158.         </tfoot>
  160.         <!-- 结算按钮 -->
  161.         <div>
  162.             <button>结算</button>
  163.         </div>
  164.     </table>
  166. </body>
  167. </html>

Correcting teacher：GuanhuiGuanhui

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