search

博客列表 >HTML+CSS 购物车(table)版

HTML+CSS 购物车(table)版

零龙
零龙原创
2020年06月24日 08:59:062164浏览

购物车table版

  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>购物车</title>
  7. </head>
  8. <style>
  9.     *{       
  10.         margin: 0px auto;
  11.     }
  12.     .table{
  13.          width: 70%;
  14.          border-collapse: collapse;
  15.          color: burlywood;
  16.          font-weight: lighter;
  17.          text-align: center;
  19.     }
  20.     table caption {
  21.         font-size: 1.5rem;
  22.         margin-bottom: 15px;
  23.         color: green;
  24.       }
  25.     table thead th,
  26.     table td{
  27.         border-bottom: 1px solid #ccc;
  28.         padding: 10px;
  29.             }
  30.     table th {
  31.         font-weight: lighter;
  32.         color: green;
  33.       }
  34.     table thead tr:first-of-type {
  35.         background-color: rgb(195, 232, 233);
  36.       }
  37.      table tbody tr:nth-of-type(even) {
  38.         background-color: rgb(241, 241, 225);
  39.       }
  40.        table tbody tr:hover {
  41.         background-color: rgb(223, 223, 223);
  42.         color: white;
  43.       }
  44.       table tfoot td {
  45.         border-bottom: none;
  46.         color: coral;
  47.         font-size: 1.2rem;
  48.         font-weight: bolder;
  49.       }
  50.       body div:last-of-type {
  51.         width: 70%;
  52.         margin: 10px auto;
  53.       }
  55.       body div:first-of-type button {       
  56.         float: right;
  57.         width: 120px;
  58.         height: 32px;
  59.         background-color: seagreen;
  60.         color: white;
  61.         border: none;       
  62.         cursor: pointer;
  63.       }
  65.       body div:first-of-type button:hover {
  66.         background-color: coral;
  67.         font-size: 1rem;
  68.       }
  69. </style>
  70. <body>
  71.     <table class="table">
  72.          <caption>购物车</caption>
  73.          <thead> 
  74.              <tr>
  75.                  <th>序号</th>
  76.                  <th>品名</th>
  77.                  <th>单价</th>
  78.                  <th>数量</th>
  79.                  <th>金额</th>
  80.              </tr>
  81.          </thead>
  82.          <colgroup>
  83.         <col width="50" />
  84.         <col width="250" />
  85.         <col width="70" />
  86.         <col width="60" />
  87.         <col width="70" />
  88.       </colgroup>
  89.          <tbody>
  90.            <tr>
  91.                <td>1</td>
  92.                <td>联想Thinkpad笔记本电脑</td>
  93.                <td>3566</td>
  94.                <td>1</td>
  95.                <td>3566</td>
  96.            </tr>
  97.            <tr>
  98.                <td>2</td>
  99.                <td>雷柏机械键盘套装</td>
  100.                <td>356</td>
  101.                <td>1</td>
  102.                <td>356</td>
  103.            </tr>
  104.            <tr>
  105.                <td>3</td>
  106.                <td>苹果MAC笔记本电脑</td>
  107.                <td>14500</td>
  108.                <td>1</td>
  109.                <td>14500</td>
  110.            </tr>
  111.            <tr>
  112.                <td>4</td>
  113.                <td>奥迪A8 V12运动版</td>
  114.                <td>1250000</td>
  115.                <td>1</td>
  116.                <td>1250000</td>
  117.            </tr>
  118.          </tbody>
  120.     </table>
  121.     <div>
  122.       <button>结算</button>
  123.     </div>
  124. </body>
  125. </html>

  • 实例效果图

上一条：html+css用户注册模板下一条：WebSocket即时通讯原理实战
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多