HTML+CSS实现购物车表格

最新推荐文章于 2024-03-18 23:01:18 发布
最新推荐文章于 2024-03-18 23:01:18 发布
阅读量8.8k 收藏 58
点赞数 9
分类专栏： 代码实例 文章标签： css css3 html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37086980/article/details/109665200
版权

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;
}

 

夹心776655
关注
  • 9
    点赞
  • 踩
  • 58
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
CSS+DIV从入门到精通
11-20
你理解了你的结构，就可以加对应的ID在DIV上。DIV容器中可以包含任何内容块，也可以嵌套另一个DIV。内容块可以包含任意的HTML元素---标题、段落、图片、表格、列表等等。 根据上面讲述的，你已经知道如何结构化HTML，现在你可以进行布局和样式定义了。每一个内容块都可以放在页面上任何地方，再指定这个块的颜色、字体、边框、背景以及对齐属性等等。 使用选择器是件美妙的事 id的名称是控制某一内容块的手段,通过给这个内容块套上DIV并加上唯一的id,你就可以用CSS选择器来精确定义每一个页面元素的外观表现,包括标题、列表、图片、链接或者段落等等
html实现仿淘宝购物车功能
04-16
实现了淘宝的购物车功能，可添加购物车，删除商品，等等功能，界面美观
使用HTML简单实现购物车
weixin_45775120的博客
12-13 5097
<head> <meta charset="UTF-8"> <title>我的购物车</title> <style type="text/css"> tr { height: 50px; } </style> <!--第一步引入jq--> <script type="text/j...
简易购物车（HTML/CSS/JS）
最新发布
weixin_52841164的博客
03-18 476
简易购物车，使用html，js，css。能够新增减少商品数量；能够新增商品种类；能够计算商品总价，总价随着商品数量变化而变化。
HTML+CSS+JavaScript实现网络购物车
weixin_43396749的博客
11-24 9210
HTML+CSS+JavaScript实现网络购物车
[JavaScript实训] -- 制作简易的购物车页面
一只大数据专业的傻猪猪
04-05 1万+
JavaScript实现制作简易的购物车页面
HTML代码实现简易购物车
热门推荐
lin123_00的博客
07-09 2万+
网上关于购物车实现的代码非常多，本次的这篇文章主要是和大家分享了HTML代码实现简易购物车，有需要的小伙伴可以看一下，接下来讲解一下具体的实现。 1、用html实现内容； 2、用css修饰外观； 3、用js(jq)设计动效。 第一步：首先是进行html页面的设计，我用一个大的p将所有商品包含，然后用不同的p将不同的商品进行封装，商品列表中我用了ul li实现，具体实现代码如下（代码中涉及到的商品都是网上随便copy的，不具有参考价值）： 打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更
HTML+JS（购物车案例）
2301_77638787的博客
08-21 1929
尽量帮助初学者减少初级的困难，其实一旦掌握了之后，会发现它其实是非常容易
用JavaScript+html+css制作当当购物车
weixin_46409887的博客
03-13 1万+
body,ul,li,div,p,h1,h2,ol{margin: 0;padding: 0;} ul,li,ol{list-style: none;} .content{width: 810px; margin: 0 auto; font-family: "微软雅黑";} .logo{margin: 10px 0;} .logo span{ display: inline-block...
Html购物车
weixin_64938628的博客
03-12 1万+
一.登陆界面 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>登陆界面</title> <style type="text/css"> html,body{ height:100%;/*高度为屏幕的百分之百*/ margin: 0px;/**/ } body{/*背景图片*/
HTML5+CSS3实现华为商城和购物车（课程设计大作业）
m0_63512120的博客
11-26 2734
这是我用HTML5+CSS3实现的华为商城和华为购物车页面 其中华为商城有二级页面！ 页面结构相对简单不太复杂，适合给大家当个课程设计作业！ 还有一些其他关于华为的页面，比如登录、购物车、官网之类的，都放在文章末尾网盘里面了！还有一些其他类型的页面大家可以参考一下，每个网页都很有特色 HTML5+CSS3+JS实现小米商城和购物车 HTML5+CSS3实现小米商城 HTML5+CSS3实现小米官网 HTML5+CSS3实现哔哩哔哩主页 HTML5+CSS3实现QQ注册页面 HTML5+CSS3实现华为官网
layui使用数据表格实现购物车功能
12-11
本文实例为大家分享了layui使用数据表格实现购物车功能的具体代码，供大家参考，具体内容如下 html部分 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>layui数据表格实现类购物车功能</title> <link rel="stylesheet" type="text/css" href="//layui.hcwl520.com.cn/layui/css/layui.css?v=201801090202" rel="external nofollow" /> <script src
html购物车
12-06
很简单的html购物车，适合刚开始学习html的同学，非常实用。
javaWeb+servlet实现简单的购物车系统
12-30
javaWeb+servlet实现简单的购物车系统 1、技术栈 javaWeb + servlet + tomcat + html + css 2、需求说明 （1）设计一个商品展示html页面 ...将商品添加到购物车后跳转到另一个Servlet，在这个Servlet中使用表格显示
基于javaWeb实现简易的购物车系统
10-27
基于javaWeb实现简易的购物车系统 1、技术栈 javaWeb + servlet + tomcat + html + css 2、需求说明 （1）设计一个商品展示html页面 ...将商品添加到购物车后跳转到另一个Servlet，在这个Servlet中使用表格显示
Projects-Steps-Project：创建进度步骤的项目，类似于使用HTML CSS和JavaScript制作的购物车或表格
02-18
项目-步骤-项目 一个创建进度步骤的项目，类似于用HTML CSS和JavaScript制作的购物车或表格。
web前端期末大作业：基于HTML+CSS+JS外卖服务平台10页 带购物车 (web课程设计与实现)
html精品源码
12-26 999
👒 公司官网网站 、企业官网、酒店官网、等网站的设计与制作。🏷️ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站...
原生html+js+css添加购物车效果
Dreamweaver_Bob的博客
03-06 650
【代码】原生html+js+css添加购物车效果。
HTML5+CSS3移动商城-购物车
记录和分享属于我的“IT”时光
04-29 3492
HTML5+CSS3移动商城-购物车
JS+CSS+HTML写出购物车表格 加减总价小计
05-26
好的，以下是一个简单的购物车表格的示例代码，包括加减按钮和总价小计功能： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>购物车</title> <style> table { border-collapse: collapse; width: 100%; } th, td { text-align: center; padding: 8px; border: 1px solid #ddd; } th { background-color: #f2f2f2; } .total { font-weight: bold; } </style> </head> <body> <table> <thead> <tr> <th>商品名称</th> <th>单价</th> <th>数量</th> <th>小计</th> </tr> </thead> <tbody> <tr> <td>商品1</td> <td>10.00</td> <td> <button class="reduce">-</button> <span class="amount">1</span> <button class="add">+</button> </td> <td class="subtotal">10.00</td> </tr> <tr> <td>商品2</td> <td>20.00</td> <td> <button class="reduce">-</button> <span class="amount">1</span> <button class="add">+</button> </td> <td class="subtotal">20.00</td> </tr> <tr> <th colspan="3" class="total">总价</th> <td id="totalPrice">30.00</td> </tr> </tbody> </table> <script> // 获取元素 const reduceBtns = document.querySelectorAll('.reduce'); const addBtns = document.querySelectorAll('.add'); const amountEles = document.querySelectorAll('.amount'); const subtotalEles = document.querySelectorAll('.subtotal'); const totalPriceEle = document.querySelector('#totalPrice'); // 定义变量 let totalPrice = 0; // 绑定事件 for (let i = 0; i < reduceBtns.length; i++) { reduceBtns[i].addEventListener('click', function() { let amount = parseInt(amountEles[i].textContent); if (amount > 1) { amount--; amountEles[i].textContent = amount; let price = parseFloat(subtotalEles[i].textContent) / (amount + 1); subtotalEles[i].textContent = (price * amount).toFixed(2); totalPrice = parseFloat(totalPrice) - price; totalPriceEle.textContent = totalPrice.toFixed(2); } }); } for (let i = 0; i < addBtns.length; i++) { addBtns[i].addEventListener('click', function() { let amount = parseInt(amountEles[i].textContent); amount++; amountEles[i].textContent = amount; let price = parseFloat(subtotalEles[i].textContent) / (amount - 1); subtotalEles[i].textContent = (price * amount).toFixed(2); totalPrice = parseFloat(totalPrice) + price; totalPriceEle.textContent = totalPrice.toFixed(2); }); } // 计算初始总价 for (let i = 0; i < subtotalEles.length; i++) { totalPrice += parseFloat(subtotalEles[i].textContent); } totalPriceEle.textContent = totalPrice.toFixed(2); </script> </body> </html> ``` 代码解释： 1. HTML部分：使用`<table>`标签创建表格，包括表头和表体两部分。每个商品行都有一个数量`<td>`单元格，里面包含一个减少按钮、一个显示数量的`<span>`元素和一个增加按钮。总价小计使用`<td>`标记，总价使用`<td>`标记和一个`id`属性。 2. CSS部分：设置表格样式，包括边框、对齐和背景色。 3. JavaScript部分：获取所有需要操作的元素，并定义一个变量`totalPrice`用于统计总价。为减少按钮和增加按钮绑定`click`事件，用于修改数量和小计，并更新总价。在页面加载时计算初始总价。 以上代码仅供参考，实际应用中可能需要根据实际情况进行调整和优化。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值