简体中文（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

博客列表 >完成一个购物车（表格实现）

完成一个购物车（表格实现）

南宫
南宫原创
2020年06月22日 15:33:25683浏览
  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>

上一条：即拼商城系统开发下一条：盒模型的基础和居中（0617）
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多