购物车html

这是一个简单的HTML页面,展示了购物车的示例。页面包含两个部分:商品列表和购物车。商品列表包括商品名称、单价、颜色、库存和好评率,每个商品都有一个'加入购物车'的按钮。购物车部分展示已选择的商品,可以调整数量和计算总价,并提供删除选项。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>购物车</title>
    <style style="text/css">
    h1{
    text-align:center;
    }
    table{
    margin:0 auto;
    width:60%;
    border:2px solid #aaa;
    border-collapse:collapse;
    }
    table th,table td{
    border:2px solid #aaa;
    padding:5px;    
    }
    th{
    background-color:#eee;
    }
    </style>
</head>
<body>
    <h1>真划算</h1>
    <table>
        <tr>
        <th>商品</th>
        <th>单价(元)</th>
        <th>颜色</th>
        <th>库存</th>
        <th>好评率</th>
        <th>操作</th>        
        </tr>
        <tr>
        <td>罗技M185鼠标</td>
        <td>80</td>
        <td>黑色</td>
        <td>893</td>
        <td>98%</td>
        <td align="center">
        <input type="button" value="加入购物车"/>
        </td>
        </tr>
        <tr>
            <td>微软键盘</td>
            <td>150</td>
            <td>黑色</td>
            <td>9028</td>
            <td>96%</td>
            <td align="center">
            <input type="button" value="加入购物车"/>
            </td>
        </tr>
            <tr>
            <td>洛克手机壳</td>
            <td>60</td>
            <td>透明</td>
            <td>672</td>
            <td>99%</td>
            <td align="center" >
            <input type="button" value="加入购物车">
            </td>                        
            </tr>
            <tr>
            <td>蓝牙二级</td>
            <td>100</td>
            <td>蓝色</td>
            <td>8937</td>
            <td>95%</td>
            <td align="center" >
            <input type="button" value="加入购物车">    
            </td>        
            </tr>            
        <tr>
            <td>金士顿U盘</td>
            <td>70</td>
            <td>红色</td>
            <td>482</td>
            <td>100%</td>
            <td align="center" >
            <input type="button" value="加入购物车">    
            </td>        
        </tr>
         </table>
         
         <h1>购物车</h1>
         <table>
             <thead>
             <tr>
                 <th>商品</th>
                 <th>单价(元)</th>
                 <th>数量</th>
                 <th>金额(元)</th>
                 <th>删除</th>             
             </tr>
             </thead>
             <tbody id="goods">
             <tr>
             <td>罗技M185鼠标</td>
             <td>80</td>
             <td align="center">
             <input type="button" value="-"/>
             <input type="text" size="3" readonly/>
             <input type="button" value="+"/>             
             </td>
            <td>80</td>         
            <td align="center"><input type="button" value="x"/></td>
             </tr>             
             </tbody>
             <tfoot>
             <tr>
             <td colspan="3" align="right">总计</td>
             <td id="total"></td>
             </tr>                          
             </tfoot>             
         </table>
</body>
</html>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值