dw購物車加減css_用html做一個購物車能實現簡單的產品數量和價格的加減就行最後能計算出提交物品價格的總和

『壹』 DW中怎麼添加CSS效果

一般有四種方法:
1.<p style="color: sienna;margin-left: 20px;">
直接來把樣式寫自在代碼中格式是style=""
</p>
2.<link href="mystyle.css" rel="stylesheet" type="text/css" media="all">鏈接外部css文件,mystyle.css改成你的css路徑
3.寫到頁面頭部<head></head>之間
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style>
4.<style type=」text/css」>

</style> 用import導入css文件
其中第二種跟第三種方法比較常用!

『貳』在dw中，插入CSS規則，方框大小的這幾個屬性各是什麼意思px，pt，in，cm，mm，pc，e

這些是CSS中的度量單位

px
相對長度單位。像素（Pixel）。
像素是相對於顯示器屏幕解析度而言的。譬如，WONDOWS的用戶所使用的解析度一般是96像素/英寸。而MAC的用戶所使用的解析度一般是72像素/英寸。

em
相對長度單位。相對於當前對象內文本的字體尺寸。
如當前行內文本的字體尺寸未被人為設置，則相對於瀏覽器的默認字體尺寸。

ex
相對長度單位。相對於字元「x」的高度。此高度通常為字體尺寸的一半。
如當前對行內文本的字體尺寸未被人為設置，則相對於瀏覽器的默認字體尺寸。

pt
絕對長度單位。點（Point）。
1in = 2.54cm = 25.4 mm = 72pt = 6pc

pc
絕對長度單位。派卡（Pica）。相當於我國新四號鉛字的尺寸。
1in = 2.54cm = 25.4 mm = 72pt = 6pc

in
絕對長度單位。英寸（Inch）。
1in = 2.54cm = 25.4 mm = 72pt = 6pc

mm
絕對長度單位。毫米（Millimeter）。
1in = 2.54cm = 25.4 mm = 72pt = 6pc
cm
絕對長度單位。厘米（Centimeter）。
1in = 2.54cm = 25.4 mm = 72pt = 6pc

『叄』 dw中用CSS如何能把這樣的方框

把<input type="text" class="inputk"> 用inputk這個來控制這個輸入框的樣式，比如樓主說的設置一個圓角的邊框。字體跟字體顏色大小等。

『肆』 ecshop購物車加減css樣式代碼怎麼樣添加

在style.css里添加下面樣式


.goods_cut{
background:url("../images/plus.gif")no-repeatscroll00transparent;
border:0none;
cursor:pointer;
display:block;
float:left;
font-size:0;
height:15px;
line-height:0;margin:8px3px0;
width:15px;
}
input.goodsBuyBox,input.number{
border:1pxsolid#DDDDDD;
float:left;
font-size:10px;
height:18px;
line-height:18px;
margin:5px6px0;
padding:0;
text-align:center;
width:32px;
}
.goods_add{
background:url("../images/plus.gif")no-repeatscroll0-15pxtransparent;
border:0none;
cursor:pointer;
display:block;
float:left;
font-size:0;
height:15px;
line-height:0;
margin:8px3px0;
width:15px;
}

在flow.dwt里，看各自的模板去修改，總之要找到這串代碼：
<input type="text" name="goods_number[{$goods.rec_id}]" ……

下面是腳本，放進flow.dwt里

<scriptlanguage="javascript"type="text/javascript">
functiongoods_cut($val){
varnum_val=document.getElementById('number'+$val);
varnew_num=num_val.value;
if(isNaN(new_num)){alert('請輸入數字');returnfalse}
varNum=parseInt(new_num);
if(Num>1)Num=Num-1;
num_val.value=Num;
document.getElementById('updatecart').click();
}
functiongoods_add($val){
varnum_val=document.getElementById('number'+$val);
varnew_num=num_val.value;
if(isNaN(new_num)){alert('請輸入數字');returnfalse}
varNum=parseInt(new_num);
Num=Num+1;
num_val.value=Num;
document.getElementById('updatecart').click();
}
</script>

找到
<input type="text" name="goods_number[{$goods.rec_id}]"
搜索不到你就搜goods_number就行了
替換為：

<spanclass="goods_cut"onclick="goods_cut('{$goods.rec_id}');"></span>
<inputtype="text"name="goods_number[{$goods.rec_id}]"id="number{$goods.rec_id}"value="{$goods.goods_number}"size="4"class="number"onblur="if(isNaN(this.value)){alert('請輸入數字');returnfalse}else{document.getElementById('updatecart').click();}"title="{$lang.goods_number_tip}"/>
<spanclass="goods_add"onclick="goods_add('{$goods.rec_id}');"></span>

找到

其實就是更新購物車的按鈕
添加一個id=「updatecart」

『伍』想做一個簡單的購物車界面，非常簡單就行有代碼！用div+css做就可以

購物車外是可以的但是核心最好還是用程序本來的核心如果自己寫，很有單獨

『陸』求助：用css寫類似淘寶購物車步驟條

1、首先是計算一行的價格。這個功能在上篇博客里有提到，這里就不列舉出來了。

2、遍歷選中的幾行，將每行的數值相加。

3、將值賦給總金額顯示出來。當取消勾選或加減數量時，金額會相應改變。

『柒』 CSS布局購物車,應該如何寫呀

絕對定位，想怎麼布局就怎麼布局！

『捌』 DW中的『.』『#』是怎麼使用好像是css樣式表裡的。

"."和「#」分別是CSS的class選擇器和ID選擇器

1、CSS .class 選擇器

定義和用法

.class 選擇器選取帶有指定類 (class) 的元素。

實例

<!DOCTYPEhtml>
<html>
<head>
<style>
.intro{background-color:yellow;}
</style>
</head>
<body>
<h1>歡迎來到我到的主頁</h1>
<divclass="intro">
<p>我是唐老鴨。</p>
<p>我住在Duckburg。</p>
</div>

<p>我最好的朋友是米老鼠。</p>
</body>
</html>

2、CSS #id 選擇器

定義和用法

#id 選擇器為帶有指定 id 的元素設置樣式。

實例

<!DOCTYPEhtml>
<html>
<head>
<style>
#firstname{background-color:yellow;}
</style>
</head>
<body>
<h1>歡迎來到我到的主頁</h1>
<divclass="intro">
<pid="firstname">我是唐老鴨。</p>
<p>我住在Duckburg。</p>
</div>

<p>我最好的朋友是米老鼠。</p>
</body>
</html>

3、注意

使用CSS控制元素樣式，應該使用class選擇器，盡量避免使用ID選擇器。因為class選擇器設置的樣式可以重復使用，當然你也可以給多個元素相同的id來達到通過id同時設置多個元素的樣式。但是ID應該是唯一的，否者會影響到js對於dom的操作。id不唯一也是不符合W3C規范的。

『玖』 css加減法器編碼和購物車裡面那個一樣

css怎麼能加減法？？、你這個問題很奇葩我無法回答！

『拾』用html做一個購物車，能實現簡單的產品數量和價格的加減就行。最後能計算出提交物品價格的總和。

html中的購物車的增減不能直接傳送到後台，可以通過ajax，在js中發送ajax

純前端的話可以參考下面的

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>cart</title>
<styletype="text/css">
body,p,a,input{
margin:0;
padding:0;
font-size:12px;
}

.container{
width:100%;
}

.main{
width:1000px;
height:500px;

margin:100pxauto;
}

.main.cart-containertable{
width:100%;}

.main.cart-containertabletr{
text-align:center;

}

.main.cart-containertabletr:hover{
background:rgba(128,128,128,0.2);
}
.main.cart-containertable.table-header{
height:30px;
background:#d9d9d9;

font-size:1.2em;

}

.main.cart-containertable.table-headertd:first-child{
border-left:solid4pxred;
box-sizing:border-box;
}

.main.cart-containertabletrtd:nth-child(1),
.main.cart-containertabletrtd:nth-child(2){
text-align:left;

}

.main.cart-containertabletrtd:nth-child(2){
width:52%;
}
.main.cart-containertabletrtd:nth-child(3){
width:12%;
}
.main.cart-containertabletrtd:nth-child(4){
width:12%;
}
.main.cart-containertabletrtd:nth-child(5){
width:12%;
}
.main.cart-containertabletrtd:last-child{
width:10%;
}

.cart-good{

height:60px;
}
.cart-goodimg{
float:left;
margin:10px;
width:60px;
}

.cart-goodtdp{
margin:10px0px;
}


/*加、減按鈕*/

.cart-goodtdinput[type='button']{
width:20px;
height:20px;
background:#00f300;
outline:none;
border:none;
}

.cart-goodtdinput[type='button']:disabled{
background:grey;
}

.cart-goodtdinput[type='button']:first-child{
margin-right:-4px;
}
.cart-goodtdinput[type='button']:last-child{
margin-left:-4px;
}
.cart-goodtdinput[type='text']{
width:30px;
height:20px;
outline:none;
border:none;
text-align:center;


}


.table-footer{
display:flex;
justify-content:space-between;
line-height:40px;
}


.table-footerdiv{
font-size:1.2em;

}
.table-footerdivbutton{
background:red;
width:120px;
height:40px;
color:white;
}
</style>
</head>
<body>
<divclass="container">
<header></header>
<sectionclass="main">
<divclass="cart-container">
<tablecellspacing="0">
<trclass="table-header">
<td><inputtype="checkbox"id="chk_alla"></td>
<td>聚美優品發貨</td>
<td>聚美價</td>
<td>數量</td>
<td>小計</td>
<td>操作</td>
</tr>
<!--<trclass="cart-good">-->
<!--<td><inputtype="checkbox"id="001"></td>-->
<!--<td>-->
<!--<imgsrc="https://p2.jmstatic.com/proct/001/293/1293263_std/1293263_60_60.jpg"alt="">-->
<!--<p>[極速免稅]PITTAMASK口罩3枚入</p>-->
<!--<p>型號：新版防曬款容量：3枚入</p>-->
<!--</td>-->
<!--<td>89.00</td>-->
<!--<td>-->
<!--<inputtype="button"value="-">-->
<!--<inputtype="text"value="1">-->
<!--<inputtype="button"value="+">-->
<!--</td>-->
<!--<td>89.00</td>-->
<!--<td><ahref="#">刪除</a></td>-->
<!--</tr>-->
</table>
<divclass="table-footer">
<div>
<inputtype="checkbox"id="chk_allb"><labelfor="chk_allb">全選</label>
<spanstyle="margin-left:20px">繼續購物|清空選中商品</span>
</div>
<div>
共<spanid="good_count">5</span>件商品商品應付總額：<spanid="goods_total">¥229.00</span>
<buttonclass="btn_menu">去結算</button>
</div>
</div>
</div>
</section>
</div>
<script>
(function(){
varskin_procts=[
{
"id":"002",
"title":"EsteeLauder多效智妍精華霜15ml",
"img_url":"http://p0.jmstatic.com/proct/003/565/3565880_std/3565880_350_350.jpg",
"price":249.0,
"number":6,
"acount":"520",
"ischecked":true
},
{
"id":"004",
"title":"EsteeLauder肌透修護潔面乳30ml",
"img_url":"http://p4.jmstatic.com/proct/003/155/3155764_std/3155764_350_350.jpg",
"price":49.9,
"number":1,
"acount":"5911",
"ischecked":false
},
{
"id":"008",
"title":"雅詩蘭黛無痕持妝粉底液",
"img_url":"http://p3.jmstatic.com/proct/003/662/3662318_std/3662318_350_350.jpg",
"price":69.9,
"number":2,
"acount":"3972",
"ischecked":true
},
{
"id":"0012",
"title":"EsteeLauder肌初賦活原生液30ml",
"img_url":"http://p4.jmstatic.com/proct/003/565/3565914_std/3565914_350_350.jpg",
"price":159.0,
"number":1,
"acount":"2338"
},
{
"id":"001",
"title":"雅詩蘭黛無痕持妝粉底液30ml",
"img_url":"http://p2.jmstatic.com/proct/001/648/1648502_std/1648502_350_350.jpg",
"price":298.0,
"number":4,
"acount":"5071",
"ischecked":false
},
{
"id":"009",
"title":"雅詩蘭黛眼部精華霜15ml",
"img_url":"http://p1.jmstatic.com/proct/001/049/1049746_std/1049746_350_350.jpg",
"price":399.0,
"number":1,
"acount":"4022",
"ischecked":false
}
]

//添加商品

functionload(){
vartbody=document.querySelector('.cart-containertabletbody');
for(letgoodofskin_procts){
tbody.innerHTML+=`<trclass="cart-good"id="${good.id}">
<td><inputtype="checkbox"class="good-check"${good.ischecked?"checked":''}></td>
<td>

<imgsrc="${good.img_url}"alt="">
<p>[極速免稅]PITTAMASK口罩3枚入</p>
<p>型號：新版防曬款容量：3枚入</p>

</td>
<td>${good.price}</td>
<td>

<inputtype="button"value="-"${good.number<=1?"disabled":''}>
<inputtype="text"value="${good.number}">
<inputtype="button"value="+">
</td>
<td>${good.price*good.number}</td>
<td><ahref="#">刪除</a></td>
</tr>`
}

totalAcount();
}
load();
//endall..........

//1.為table注冊單擊事件

vartable01=document.querySelector('.cart-containertable');

table01.onclick=function(event){

varnode=event.target
if(node.getAttribute('type')=='button'){
//alert(event.target.value);
changeNumber(event);
subtotal(event);
checkedRow(event);
checkedAllRows();

}elseif(node.className=='good-check'){
checkedAllRows();

}elseif(node.id=='chk_alla'){
varf=event.target.checked;
varchks=document.querySelectorAll('.good-check');
for(varckofchks){
ck.checked=f;
}

for(vargoodofskin_procts){
good.ischecked=f;
}


}elseif(node.nodeName.toLowerCase()=='a'){
vartr=event.target.parentNode.parentNode;
for(vari=0;i<skin_procts.length;i++){
if(skin_procts[i].id==tr.id){
skin_procts.splice(i,1);
console.log(skin_procts);
}
}

tr.parentNode.removeChild(tr);

}
totalAcount();
};

//單擊增加或減少按鈕的方法
functionchangeNumber(event){

varnode=event&&event.target;
varv=0;
if(node.value&&node.value=='+'){
//node.previousElementSibling.value=parseInt(node.previousElementSibling.value)+1;
node.previousElementSibling.value++;
v=node.previousElementSibling.value;
node.previousElementSibling.previousElementSibling.disabled=false;

}else{
//if(node.value&&node.value=='+')
if(node.nextElementSibling.value>1){
node.nextElementSibling.value--;
v=node.nextElementSibling.value;
if(v==1){
node.disabled=true;
}
}
}


//存儲商品數量

varid=node.parentNode.parentNode.id;

for(vargoodofskin_procts){
if(id==good.id){
good.number=v;
}
}

}

//每個商品小計的方法

functionsubtotal(event){
varnode=event&&event.target;

//varid=node.parentNode.parentNode.id;

//for(vargofskin_procts){
//if(g.id==id){
//alert(g.price);
//}
//}


//varprice=；

varprice=node.parentNode.previousElementSibling.innerText;
varnum=node.parentNode.children[1].value;
node.parentNode.nextElementSibling.innerText=(num*price).toFixed(2);
}

//檢驗該商品是否選中
functioncheckedRow(event){
event.target.parentNode.parentNode.firstElementChild.firstElementChild.checked=true;
//event.target.parentNode.parentNode.cells[0].firstElementChild.checked=true;
//vartbody=event.target.parentNode.parentNode.parentNode;
//event.target.parentNode.parentNode.parentNode.rows[3].cells[0].firstElementChild.checked=true;
}
//檢查是否全選

functioncheckedAllRows(){
varchks=document.querySelectorAll('.good-check');
varflag=true;
for(varckofchks){
if(!ck.checked){
flag=false;
break;
}
}
document.querySelector('#chk_alla').checked=flag;

}


//統計商品總量和總價格

functiontotalAcount(){

vartotal=0;
vartotal_price=0;
varchks=document.querySelectorAll('.good-check');
for(varckofchks){
if(ck.checked){
id=ck.parentNode.parentNode.id;
for(vargoodofskin_procts){
if(id==good.id){
total+=~~good.number;
total_price=total_price+(good.number*good.price);
good.ischecked=true;


}
}


}
}

document.querySelector('#good_count').innerText=total;
document.querySelector('#goods_total').innerText=total_price;


}

})();
</script>
</body>
</html>

dw購物車加減css

與dw購物車加減css相關的內容