phpjshtmlcss
A. java js css html php他们分别是干什么的
java是用来开发APP的，安卓上应用、WINDOS应用都有许多是JAVA来写的，源程序是*.java，编译为*.class，可以执行的，打包（和资源一起）后一般为*.jar
php用是来开发动态网站的，在网站服务器上执行，执行的结果才通过网络传输到用户的浏览器上显示，执行的结果一般是html+js+css，三种都可以同时有。*.php是源程序，一般不编译，解释执行。
html、js、css都是做网页的，服务器上不执行，在浏览器上执行，*.html、*.js、*.css都是源码的文件，都是可以直接用记事本查看和修改的。核心的html，实际上是显示的内容加上格式编码，css是格式编码的抽象化，可以理解为按主题设置格式。js是显示内容的动作执行，一定程度上实现显示内容动态化，或者简单运算和数据加工。
这些都不难，都可以自学，建议你网络一下相应的网络解释。
B. 网站制作：HTML,CSS,JS和PHP的关系
HTML和JS是前端技术，
PHP是后台技术。
你讲到可以这样理解。
HTML是静态界面代码。CSS是设置界面到样式和布局。
JS是前端脚本
PHP是动态到调用后台到数据
C. 如何用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();
}
});
}