购物车代码（html+css）

在购物车使用js实现的功能的出现的问题（好烦！！！！）
效果如下：

body部分：

<div class="cart"><div class="cart-title">我的购物车</div><table class="cart-table"><tr><th width="60"><span class="cart-all">全选</span></th><th>商品</th><th width="120">单价</th><th width="100">数量</th><th width="120">小计</th><th width="80">操作</th></tr><tr class="cart-item"><td><input type="checkbox" checked="checked" class="cart-check" /></td><td class="cart-txt-left"><span class="cart-name">loading...</span></td><td><span class="cart-price">0</span></td><td><span class="cart-reduce">-</span><span class="cart-num">0</span> <span class="cart-add">+</span> </td><td><span class="cart-subtotal">0</span></td><td><span class="cart-del">删除</span></td></tr><tr class="cart-bottom"><td colspan="6"><span class="cart-bottom-span">已选择<span class="cart-total-num">0</span>件商品</span><span class="cart-bottom-span">总计：<span class="cart-total-price">0</span></span><span class="cart-bottom-btn">提交订单</span></td></tr></table></div>

css部分：

<style type="text/css">.cart{width: 700px;padding: 0 10px 10px;border: 1px solid #D5E5F5;}.cart-title{margin-bottom: 10px;font-size: 14px;border-bottom: 1px solid #AED2FF;line-height: 30px;height: 30px;font-weight:700;text-indent: 15px;color:#333;font-family:'Microsoft YaHei' ;}/* border-bottom底部边框 ,text-indent：首行缩进*/.cart-table{width: 100%;margin: 0 auto;border-color: collapse;font-size: 12px;font-family: Verdana,"Microsoft YaHei";color: #333333;}.cart-table th{border-bottom: 2px solid #B2D1FF;font-weight: normal;height: 35px;line-height:1.4375rem ;}.cart-item{background-color: #FAFCFF;border-bottom: 1px dotted #84B3FD;}.cart-item td{height:55px; text-align: center;}.cart-item .cart-txt-left{text-align:left;}.cart-name{color: #3366D4;font-weight: bold;}.cart-subtotal{color: #FF3334;font-weight: bold;}.cart-reduce,.cart-add{display: inline-block;width: 16px;height: 16px;line-height: 16px;color: #FFF;background-color: #BDBDBD;border: 0;cursor: pointer;border-radius: 2px;font-family:'Arial' ;font-size: 0.833331rem;}.cart-raduce:hover,.cart-add:hover{background-color: #FF9900;}.cart-num{margin: 5px;width: 35px;text-align: center;height: 20px;line-height: 20px;padding: 0 3px;display: inline-block;background: #fff;border: 1px solid #bbb;}.cart-del,.cart-all{color: #3366D4;}.cart-del:hover,.cart-all:hover{text-decoration: underline;cursor: pointer;}.cart-bottom{height: 55px;text-align: right;}.cart-bottom .cart-all{position:relative;top:1px;}.cart-total-price{color: #FF3334;font-weight: bold;font-size: 16px;}.cart-bottom-btn{color: #FFF;font-size: 14px;font-weight: 600px;cursor: pointer;margin: 0 20px;background: #FE8502;border: 1px solid #FF6633;border-radius: 5px 5px 5px 5px;padding: 6px 12px;}.cart-bottom-btn:hover{background: #FF6600;}</style>

购物车代码（html+css）相关推荐

解释如何优化css选择器_购物车解释了CSS选择器
解释如何优化css选择器 by Kevin Kononenko 凯文·科诺年科(Kevin Kononenko) 购物车解释了CSS选择器 (CSS Selectors Explained By Go ...
京东购物车（html+css+js）
效果图展示 html+js部分关于购物车实现的功能 1.仿京东购物车页面效果实现 2.购物车已有商品展示 3.数量增减 4.小计 5.汇总 6.全选 7.全选并汇总 8.单个商品复选 9.单个商品复 ...
python做购物车代码大全-python 字典实现简单购物车
# -*- coding: utf-8 -*- #总金额 asset_all=0 i1=input('请输入总资产:') asset_all=int(i1) #商品列表 goods=[ {'name' ...
代码：CSS——reset.css
代码:CSS--reset.css http://www.cnblogs.com/qq21270/p/5577856.html 图片列表 A链接标签: /*链接样式.文字颜色*/a{color:#66 ...
html阴影特效作品及代码,纯CSS做特效网页(阴影,透明,画圆圈等等)
每天进步一点,其实是很了不起的事情了. 废话不多说,直接看图! 效果2 效果2 第一步(可以先把背景图搞出来,当然你也可以先画主体,最后在搞背景,看自己心情嘛) html body {margin: ...
css-net 中华版,使用C＃代码选择CSS样式（ASP.net）
我在我的Default.aspx页面中的嵌入式CSS中有两个类.如果需要,我可以将代码转移到外部CSS.使用C#代码选择CSS样式(ASP.net) 我可以在C#中创建一个代码,点击一个按钮后,我可以 ...
【Python 学习_第2周_程序代码】金角大王培训第二周练习_购物车代码，将写的代码和老师代码比较，记录下收获...
培训第二周,课堂练习为编写一段购物车代码,需求描述如下: 1.提示用户输入薪水 2.用户输入薪水后,打印商品编号.内容及价格 3.提醒用户输入商品代码,若余额大于等于商品价格,可购买:若小于,提示用户 ...
html间隔代码_HTML+CSS基础入门开发，经典Loading加载缩放动画特效
大家好,本篇文章分享经典Loading加载缩放动画特效,欢迎参考和指正. 效果图: Loading加载缩放动画特效 HTML代码: CSS代码: 知识点: animation:是CSS3的动画属性,这 ...
html代码js正则,过滤所有HTML代码和CSS,JS
过滤所有HTML代码和CSS,JS 复制代码代码如下: Function RemoveHTML(strHTML) '过滤HTML代码的函数包括过滤CSS和JS StrHtml = Replac ...
购物车及商品php代码_简单的php购物车代码
本文介绍一个php实现的购物车代码,功能实现完整,具有一定的参考价值这里我们为你提供个简单的php购物车代码,从增加购物产品与发生购买了,在商城开发中,这个功能是少不了的具体分析如下: 对购物车里 ...

购物车代码（html+css）

购物车代码（html+css）相关推荐

最新文章

热门文章