⑴ 如何用html css javascript php制作购物车
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="---.css">
<script src="---.js"></script>
</head>
<body>
<div class="container">
<div class="shop">
<div class="header">
<input type="checkbox" class="shop-checkbox">
<span class="shop-icon"></span>
<span class="shop-name">---</span>
<span class="wangwang-icon"></span>
</div>
<div class="items">
<div class="item">
<div><input class="item-checkbox" type="checkbox" name="" id=""></div>
<div>
<span class="item-img"></span>
</div>
<div class="item-name">
<div>----</div>
<div class="promotion-icons"><span></span><span></span><span></span></div>
</div>
<div class="sku">---</div>
<div class="price">
<div class="price-1">---</div>
<div class="price-2" data-price="---">----</div>
</div>
<div class="num-control">
<span class="num-minus">-</span>
<input class="num" type="text" value="1">
<span class="num-plus">+</span>
</div>
<div class="item-price-total">
<span>￥50.13</span>
</div>
<div class="operation">
<div>---</div>
<div>---</div>
</div>
</div>
</div>
</div>
<div class="shop">
<div class="header">
<input type="checkbox" class="shop-checkbox">
<span class="shop-icon"></span>
<span class="shop-name">---</span>
<span class="wangwang-icon"></span>
</div>
<div class="items">
<div class="item">
<div><input class="item-checkbox" type="checkbox" name="" id=""></div>
<div>
<span class="item-img"></span>
</div>
<div class="item-name">
<div>----</div>
<div class="promotion-icons"><span></span><span></span><span></span></div>
</div>
<div class="sku">---</div>
<div class="price">
<div class="price-1">---</div>
<div class="price-2" data-price="---">---</div>
</div>
<div class="num-control">
<span class="num-minus">-</span>
<input class="num" type="text" value="1">
<span class="num-plus">+</span>
</div>
<div class="item-price-total">
<span>￥9.90</span>
</div>
<div class="operation">
<div>移入收藏夹</div>
<div>删除</div>
</div>
</div>
<div class="item">
<div><input class="item-checkbox" type="checkbox" name="" id=""></div>
<div>
<span class="item-img"></span>
</div>
<div class="item-name">
<div>---</div>
<div class="promotion-icons"><span></span><span></span><span></span></div>
</div>
<div class="sku">---</div>
<div class="price">
<div class="price-1">---</div>
<div class="price-2" data-price="---">---</div>
</div>
<div class="num-control">
<span class="num-minus">-</span>
<input class="num" type="text" value="1">
<span class="num-plus">+</span>
</div>
<div class="item-price-total">
<span>￥19.9</span>
</div>
<div class="operation">
<div>移入收藏夹</div>
<div>删除</div>
</div>
</div>
</div>
</body>
</html>
.container{
width: 1000px;
margin-left: auto;
margin-right: auto;
color: #444444;
}
.header{
margin: 8px;
}
.shop-icon, .wangwang-icon, .promotion-icons span{
display:inline-block;
width: 15px;
height: 15px;
background-color: rgb(117,192,241);
}
.promotion-icons span{
margin-right: 4px;
}
.items{
border: 1px solid #ebe9e9;
}
.item{
display: flex;
margin: 8px;
}
.item-img{
width:100px;
height: 100px;
display: inline-block;
background-color: aquamarine;
margin-left: 6px;
margin-right: 6px;
}
.item-name
{
display: flex;
flex-direction: column;
justify-content: space-between;
}
.sku, .price,.item-price-total,.operation,.num-control{
margin-left: 18px;
}
.num{
width: 18px;
height: 15px;
}
.num-control{
display: flex;
align-items: baseline;
}
.num-minus,.num-plus{
width: 18px;
height: 22px;
display: inline-block;
background-color: #ebe9e9;
}
.checkout{
display: flex;
justify-content: space-between;
}
.shop{
margin-bottom: 20px;
margin-top: 30px;
}
.goods,.freight,.checkout-button{
margin-left: 15px;
}
.price-1{
text-decoration: line-through;
color: gray;
}
.check-num ,.total-price{
font-size: large;
color: red;
margin-left: 3px;
margin-right: 3px;
}
.checkout-button{
height: 30px;
width: 50px;
background-color: beige;
}
.checkout{
margin-top: 15px;
}
.item-name{
width: 25%;
}
.item-price-total{
width: 5%;
}
.sku{
width: 20%;
}
function updatePrice(){
let items = document.querySelectorAll('.item');
let totalNum = 0;
let totalPrice = 0;
items.forEach(function(item){
if(item.querySelector('.item-checkbox').checked){
let num = item.querySelector('.num').value;
totalNum = totalNum + parseInt(num);
let price = item.querySelector('.price-2').getAttribute('data-price');
totalPrice = totalPrice + parseFloat(price) * num;
}
});
document.querySelector('.check-num').innerText= totalNum;
document.querySelector('.total-price').innerText = totalPrice;
}
window.onload=function(){
let itemCheckboxes = document.querySelectorAll('.item-checkbox');
itemCheckboxes.forEach(function(itemCheckbox){
itemCheckbox.onchange = function(){
updatePrice();
}
});
let minuses = document.querySelectorAll('.num-minus');
minuses.forEach(function(minus){
minus.onclick = function(event){
let num=minus.parentElement.querySelector('.num').value;
if(parseInt(num)>1)
{
minus.parentElement.querySelector('.num').value=parseInt(num)-1;
updatePrice();
}
};
});
let pluses = document.querySelectorAll('.num-plus');
pluses.forEach(function(plus){
plus.onclick = function(event){
let num=plus.parentElement.querySelector('.num').value;
plus.parentElement.querySelector('.num').value=parseInt(num)+1;
updatePrice();
}
});
}
⑵ 自己建一个网站，如何实现购物车的功能
自己建站啊？呵呵呵，可以找个合作伙伴啊！介绍一个不错的：3w网站精品店，价格也实惠。网络谷歌一下吧。
⑶ 购物网站如何设计漂亮且实用的购物车
相应的，大量的购物网站也随之出现。如何设计兼顾美观与可用性的网站购物车，是一门非常有研究价值的问题。本文为读者介绍了10个优秀购物车的设计技巧，并为读者推荐了一些国外的优秀购物车设计欣赏。1.
整版车和迷你车购物车通常有两种形式，整版页面的购物车和作为网页组件的迷你购物车。建议两种形式同时包括。迷你购物车不影响购物车以外的布局，只显示购物的列表及简要信息，并且有一个醒目的链接指向整版购物车页面，下面是一个很好的例子：相反的，整版购物车页面可以提供更详细的信息，例如产品详情、删除/添加、税收和发货选项等。以下显示了一个整版购物车页面，它的右上角同时也包含了一个迷你购物车：
2.
结账：逐步引导或一页式用逐步引导的方法使用户更容易上手。看看Apple.com结帐页面，结帐程序包含四个步骤：登录，结算及托运，付款方式和最后确认/修改。
除了循序渐进的引导，另一种方式是把所有的付费、运输和结算操作放在一个页面上。
如果设计得合理，这也是一种很好的方式。下面的网站使用了良好的单页结帐过程：
3.
使用图标链接到详细页面迷你购物车上应该有链接到详细页面的醒目图标，以引导用户进入详细页面。下面这个网页虽然是日语的，但它的图标可以清晰的显示这是购物车链接。4.
使用明显的结账/添加按钮设计电子商务购物车，重要的是要包含明确的信息
，并引导客户进入结账程序。最好使用明显的按钮，并包含清楚易懂的文字，如“添加到购物车”或“结账”。
5.
使用清晰整洁的列表设计购物车最好使用列表结构，清晰的现实信息，使用标准字体
，
并尽量避免使用复杂的背景
。6.
“继续选购”链接“继续购物”链接的作用是引导用户回到商品列表继续选购，这当然是所有网站都想要的。
7.
避免填写过多的条目尽量让用户填写最少的表格，用最快的速度完成网上购物过程。
8.
提供充分的帮助信息快速提示和通用提示是网站必不可少的组成部分，尤其是购物网站，你要让你的客户没有任何疑问和疑虑的完成购物过程。关于电子商务网站的提示技巧，请参阅：
正确使用提示文字提升用户体验9.
使用视觉辅助使用图标、箭头、文字等醒目的视觉辅助元素，引导用户的视觉流向。以下图片显示的一个极方便的单击并拖动车
。.形象的购物车图标告诉顾客，他们可以拖动物品到购物车。
10.
包含确认步骤用户必须有一个步骤来确认是不是买到了正确的货物，并且有办法及时取消选择，然后进入付款结算程序。
⑷ 怎么制作淘宝购物车链接，然后直接复制地址栏，直接到提交订单的页面
天猫装修加入购物车代码是：
<a class="J_CartPluginTrigger" href="宝贝链接" target="_blank">
<img src="http://img01.taobaocdn.com/tps/i1/T1G.1AXXNtXXXXXXXX-90-24.png" />
</a>
我觉得这里讲的应该是对的，还没有测试过，楼主看一下这个链接http://..com/question/1689662169335001068.html
⑸ 如何做一个购物车 用Macromedia Dreamweaver 8
仅仅用Macromedia Dreamweaver 8的自带功能做购物车比较困难。必须要懂点编程的知识。
⑹ 如何用C#做购物车
首先，为每一个客户生成一个虚拟的购物车，其实就是一个Datatable：
DataTable GoodsCar = new DataTable();
GoodsCar.Columns.Add("Index",typeof(int));//商品序号
下面你还可以加很多的，比如商品名称，价格，产地等等
然后，在已经存在的商品栏里把所选择的商品序号加入购物车中，就是往Datatable中增加所选择的行信息：
DataRow ChoosedGoods = GoodSCar.NewRow();
ChoosedGoods["Index"] = 你已经存在的商品序列号;
最后，选择完了结帐前，应该有一个综合显示已经选择的商品，就是现实表GoodsCar中的信息：
生成一个Datalist或者DataGrid然后绑定，显示出来。还可以往里面加入一点别的功能，比如，删除已经选择的物品等等！
这个类似的程序源代码网上很多的。随便从网络上搜一下都是一大把啊！
⑺ 淘宝网中的“加入购物车”是如何做的链接
可以打开那个量子统计，左边的页面有一个实时客户访问，在旁边一点有一个入店来源，
如果买家是加入了购物车的，从购物车进来，那个入店来源就会写购物车的。
详情请看下图：
⑻ 用dreamweaver怎么制作购物车
制作购物车属于编写动态程序，首先要选择用哪一种程序来制作，比如php，jsp等等；dreamweaver可以利用内置的可视化动态程序制作功能生成程序，不过也要了解动态程序的一些基础知识，比如安装网络服务器以便测试编写的网页，安装数据库、建立站点等等，如果对动态程序的代码一点不了解，也不能够修改出现的错误、丰富网页的功能。
像购物车这样的程序，仅仅用dreamweaver生成的程序来制作效果会非常简陋，很不专业，制作功能完善的程序还是需要学习代码，手写编程。
⑼ 网页制作中像电商购物车中的商品数量改变是怎么做的
这个用javascript实现啊.貌似不难啊