HTML+CSS实现购物车表格

最新推荐文章于 2024-01-11 16:24:23 发布

夹心776655

最新推荐文章于 2024-01-11 16:24:23 发布

阅读量1.1w

点赞数 12

CC 4.0 BY-SA版权

分类专栏：代码实例文章标签： css css3 html html5

本文链接：https://blog.youkuaiyun.com/qq_37086980/article/details/109665200

代码实例专栏收录该内容

72 篇文章

订阅专栏

博客提及了HTML和CSS相关内容，但未给出具体信息。HTML和CSS是前端开发的重要技术，HTML用于构建网页结构，CSS用于设计网页样式。

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

HTML:

<main>
        <div class="container">
            <table border="0" cellspacing = "0" id = "shoppingcartinfo">
                <thead>                
                    <tr>
                        <th width = "75px" height = "42px">
                            <label for="checkall">
                                <input type="checkbox" name="checkall" id="checkall" class="checkall">
                                <span></span>全选
                            </label>
                        </th>
                        <th width = "400px" height = "42px">商品</th>
                        <th width = "135px" height = "42px">单价</th>
                        <th width = "230px" height = "42px">购买数量</th>
                        <th width = "150px" height = "42px">小计</th>
                        <th width = "200px" height = "42px">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td width = "75px" height = "90px" colspan="2" align="left" valign = "top" class="pt20">
                            <label for="checkall1">
                                <input type="checkbox" name="checkall" id="checkall1" class="checkall">
                                <span class = "checkallspan fl"></span>
                            </label>
                            <img src="../images/k5.webp" alt="cosmetics" class ="shoppingitem fl"> 
                            <div class="shoppingdesc fl">
                                Texamo黛末烁影系列26支化妆刷子套装眼
                                <br><br>
                                <b>颜色分类:粉红&nbsp;&nbsp;刷毛材质:人造纤维</b>
                            </div>
                            <div style="clear: both;"></div>
                        </td>
                        <td width = "135px" height = "90px" align="center" valign="top" class="price pt20">￥109.00</td>
                        <td width = "230px" height = "90px" align="center" valign="top" class="purchasenum pt20">
                            <i class="minus iconfont icon-subtract"></i>
                            <input type="number" min="1" step="1" value="1">
                            <i class="plus iconfont icon-jiahao"></i>
                        </td>
                        <td width = "150px" height = "90px" align="center" valign="top" class="pt20 sumup">￥318.00</td>
                        <td width = "115px" height = "90px" align="left" valign="top" class="pt20 pl85 operation">
                            <strong>删除</strong><br>
                            <strong>移入收藏夹</strong>
                        </td>
                    </tr>
                    <tr>
                        <td width = "75px" height = "90px" colspan="2" align="left" valign = "top" class="pt20">
                            <label for="checkall2">
                                <input type="checkbox" name="checkall" id="checkall2" class="checkall">
                                <span class = "checkallspan fl"></span>
                            </label>
                            <img src="../images/hot_item3.jpg" alt="laundry" class ="shoppingitem fl"> 
                            <div class="shoppingdesc fl">
                                 白猫无磷洗衣液3kg*4瓶整箱装
                                <br><br>
                                <b>颜色分类:蓝色&nbsp;&nbsp;版本:洁净柔香</b>
                            </div>
                            <div style="clear: both;"></div>
                        </td>
                        <td width = "135px" height = "90px" align="center" valign="top" class="price pt20">￥20.00</td>
                        <td width = "230px" height = "90px" align="center" valign="top" class="purchasenum pt20">
                            <i class="minus iconfont icon-subtract"></i>
                            <input type="number" min="1" step="1" value="1">
                            <i class="plus iconfont icon-jiahao"></i>
                        </td>
                        <td width = "150px" height = "90px" align="center" valign="top" class="pt20 sumup">￥80.00</td>
                        <td width = "115px" height = "90px" align="left" valign="top" class="pt20 pl85 operation">
                            <strong>删除</strong><br>
                            <strong>移入收藏夹</strong>
                        </td>
                    </tr>
                    <tr>
                        <td width = "75px" height = "90px" colspan="2" align="left" valign = "top" class="pt20">
                            <label for="checkall3">
                                <input type="checkbox" name="checkall" id="checkall3" class="checkall">
                                <span class = "checkallspan fl"></span>
                            </label>
                            <img src="../images/hot_item7.jpg" alt="kettle" class ="shoppingitem fl"> 
                            <div class="shoppingdesc fl">
                                苏泊尔电热水壶家用不锈钢防烫大容量自动断电
                                <br><br>
                                <b>颜色分类:玫瑰金&nbsp;&nbsp;服务: 全面保修2年</b>
                            </div>
                            <div style="clear: both;"></div>
                        </td>
                        <td width = "135px" height = "90px" align="center" valign="top" class="price pt20">￥99.00</td>
                        <td width = "230px" height = "90px" align="center" valign="top" class="purchasenum pt20">
                            <i class="minus iconfont icon-subtract"></i>
                            <input type="number" min="1" step="1" value="1">
                            <i class="plus iconfont icon-jiahao"></i>
                        </td>
                        <td width = "150px" height = "90px" align="center" valign="top" class="pt20 sumup">￥99.00</td>
                        <td width = "115px" height = "90px" align="left" valign="top" class="pt20 pl85 operation">
                            <strong>删除</strong><br>
                            <strong>移入收藏夹</strong>
                        </td>
                    </tr>
                    <tr>
                        <td width = "75px" height = "90px" colspan="2" align="left" valign = "top" class="pt20">
                            <label for="checkall4">
                                <input type="checkbox" name="checkall" id="checkall4" class="checkall">
                                <span class = "checkallspan fl"></span>
                            </label>
                            <img src="../images/huaweiphone_02.png" alt="huaweiphone" class ="shoppingitem fl"> 
                            <div class="shoppingdesc fl">
                                HUAWEI nova8 SE 5G 超清四摄
                                <br><br>
                                <b>颜色分类:天空蓝&nbsp;&nbsp;版本:6GB+128GB</b>
                            </div>
                            <div style="clear: both;"></div>
                        </td>
                        <td width = "135px" height = "90px" align="center" valign="top" class="price pt20">￥2599.00</td>
                        <td width = "230px" height = "90px" align="center" valign="top" class="purchasenum pt20">
                            <i class="minus iconfont icon-subtract"></i>
                            <input type="number" min="1" step="1" value="1">
                            <i class="plus iconfont icon-jiahao"></i>
                        </td>
                        <td width = "150px" height = "90px" align="center" valign="top" class="pt20 sumup">￥2599.00</td>
                        <td width = "115px" height = "90px" align="left" valign="top" class="pt20 pl85 operation">
                            <strong>删除</strong><br>
                            <strong>移入收藏夹</strong>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="paddingpanel clearfix">
                <div class="conclude clearfix">
                    <div class="concludeleft fl">
                        <label for="checkall5">
                            <input type="checkbox" name="checkall" id="checkall5" class="checkall">
                            <span></span>全选
                        </label>
                        <a href="#">删除选中商品</a>
                    </div>
                    <div class="concluderight fr">
                        <span class="fl">已选择<strong>1</strong>件商品</span>
                        <dl class="fl">
                            <dt></dt>
                            <dd>总价：￥3096.00</dd>
                            <dd>优惠：￥200.00</dd>
                            <dd>合计：<strong>￥2886.00</strong></dd>
                        </dl>
                        <div style="clear:both"></div>
                    </div>
                </div>
                <div class="continueorsubmit fr">
                    <button type="button" class="continue">继续购物</button>
                    <button type="submit" class="submit">提交订单</button>
                </div>
                
            </div>
        </div>
    </main>

CSS:

.fl{
    float: left;
}
.fr{
    float: right;
}
#shoppingcartinfo thead{
    background-color: #f5f5f5;
    /* border: 1px solid #dcdcdc; */
}

#shoppingcartinfo tr th{
    font: 12px/1 "宋体";
    color:#666666;
}
#shoppingcartinfo tr{
    border: 1px solid #dcdcdc;
}
#shoppingcartinfo tr:hover{
    background-color: #fef9f6;
}
main .container .checkall{
    display: none;
}
main .container .checkall[type=checkbox]+span{
    display: inline-block;
    width:14px;
    height: 14px;
    border: 1px solid #d7d7d7;
    color:#b5b5b5;
    vertical-align: bottom;
    margin-right: 12px;
    
}
main .container .checkall[type=checkbox]:checked+span:after{
    content:'\2714';
    display: inline-block;
    font-size: 14px;
    width:14px;
    height: 14px;
    border: 1px solid #F36B10;
    color:#F36B10;
    text-align: center;
}
main .container .checkallspan{
    display: inline-block;
    margin: 0px 22px 0 16px;
}
main .container .shoppingitem{
    margin: 0px 15px 0 6px;
    width: 70px;
    height: 70px;
}
main .container .shoppingdesc{
    font: 12px/20px "宋体";
}
main .container .shoppingdesc > b{
    color:#888888;
}
main .container .price{
    font:14px/1 "Arial";
}
main .container .purchasenum > i,
main .container .purchasenum > input{
    display: inline-block;
    width: 30px;
    height:30px;
    line-height: 30px;
    text-align: center;
    color:#bbbbbb;
    border: 1px solid #cecece;
}
main .container .purchasenum > input{
    width:45px;
    box-sizing: content-box;
    vertical-align: top;
    margin-left: -4px;
    border-left-style: none;
}
main .container .purchasenum .plus{
    margin-left: -4px;
}
main .container .sumup{
    font: 16px/1 "Arial";
    color:#F36B10;
}
main .container .operation{
    font: 12px/25px "宋体";
    cursor: pointer;
}
main .container .operation strong:hover{
    color:#F36B10;
    text-decoration: underline;
}