時(shí)間：2023-09-12 02:48:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-09-12 02:48:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)
HTML5期末大作業(yè)：食品商城網(wǎng)站設(shè)計(jì)——食品商城購(gòu)物網(wǎng)站(8頁(yè)) HTML+CSS+JavaScript 靜態(tài)網(wǎng)頁(yè)的制作：常見(jiàn)網(wǎng)頁(yè)設(shè)計(jì)作業(yè)題材有個(gè)人、 美食、 公司、 學(xué)校、 旅游、 電商、 寵物、 電器、 茶葉、 家居、 酒店、 舞蹈、 動(dòng)漫、 明星、 服裝、 體育、 化妝品、 物流、 環(huán)保、 書(shū)籍、 婚紗、 軍事、 游戲、 節(jié)日、 戒煙、 電影、 攝影、 文化、 家鄉(xiāng)、 鮮花、 禮品、 汽車、 其他等網(wǎng)頁(yè)設(shè)計(jì)題目,A+水平作業(yè), 可滿足大學(xué)生網(wǎng)頁(yè)大作業(yè)網(wǎng)頁(yè)設(shè)計(jì)需求, 喜歡的可以下載!
在線咨詢
PC電腦端關(guān)注我們1.網(wǎng)頁(yè)作品簡(jiǎn)介 ：HTML期末大學(xué)生網(wǎng)頁(yè)設(shè)計(jì)作業(yè) A+水平 ,喜歡的可以下載，文章頁(yè)支持手機(jī)PC響應(yīng)式布局。2.網(wǎng)頁(yè)作品編輯：作品下載后可使用任意HTML編輯軟件（如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ 等任意HTML軟件編輯修改網(wǎng)頁(yè)）。3.網(wǎng)頁(yè)作品技術(shù)：Div+CSS、鼠標(biāo)滑過(guò)特效、Table、導(dǎo)航欄效果、banner、表單、二級(jí)三級(jí)頁(yè)面等，視頻、 音頻元素 、Flash，同時(shí)設(shè)計(jì)了logo（源文件），基本期末作業(yè)所需的知識(shí)點(diǎn)全覆蓋。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>購(gòu)物車</title><script type="text/javascript" src="js/jquery-1.8.3.min.js"></script><script src="js/jquery1.42.min.js" type="text/javascript"></script><script src="js/jquery.SuperSlide.2.1.1.js" type="text/javascript"></script><script src="js/publicNav.js" type="text/javascript"></script><script src="js/index.js" type="text/javascript"></script><script type="text/javascript" src="js/showCartBox.js"></script><link href="css/base.css" rel="stylesheet" type="text/css" /></head><body><!--頂部top--><div class="topMenu"> <div class="indexCont"> <ul class="fl tW tL" style="width:190px;"> <li class="b1"><i></i><a href="javascript:;">收藏我買(mǎi)網(wǎng)</a></li> <li class="b2"><i></i><a href="javascript:;">移動(dòng)客戶端</a></li> </ul> <div class="fr tW"> <ul class="fl"> <li class="login" style="white-space:nowrap;height:32px;line-height:32px;"> <b>您好，歡迎您來(lái)到順豐優(yōu)選</b> <a href="javascript:;">登錄</a> <a href="javascript:;">注冊(cè)</a> <a href="userOrder.html">我的訂單</a> </li> </ul> <ul id="tMenu" class="fr tW tmCont"> <li class="webnav"> <strong class="top_icon"><a href="javascript:;"> 我的素品 </a></strong> <div class="top_hidebox wdsp"> <div class=""> <a href="userOrder.html">我的訂單</a> </div> <div> <a href="javascript:;">我的積分</a> </div> <div> <a href="javascript:;">我的收藏</a> </div> <div> <a href="javascript:;">賬戶余額</a> </div> <div> <a href="javascript:;">我的選項(xiàng)卡</a> </div> <div> <a href="javascript:;">我的優(yōu)惠券</a> </div> </div> </li> <li class="webnav"> <strong class="top_icon"><a href="javascript:;"> 服務(wù)中心 </a></strong> <div class="top_hidebox"> <div class=""> <a href="javascript:;">購(gòu)物指南</a> </div> <div> <a href="javascript:;">配送服務(wù)</a> </div> <div> <a href="javascript:;">支付方式</a> </div> <div> <a href="javascript:;">售后服務(wù)</a> </div> <div> <a href="javascript:;">客服郵箱</a> </div> <div> <a href="javascript:;">投訴與建議</a> </div> </div> </li> <li class="webnavdh" style="background:none"> <strong class="top_icon"><a href="javascript:;"> 網(wǎng)站導(dǎo)航 </a></strong> <div class="top_hidebox"> <ul class="dh-list"> <li class="dh_title"> <a href="javascript:;"style="padding-left:0;">生鮮食品</a> <a href="javascript:;">酒水飲料</a> <a href="javascript:;">糧油副食</a> <a href="javascript:;">休閑食品</a> <a href="javascript:;">營(yíng)養(yǎng)養(yǎng)生</a> </li> <li class="line"></li> <li class="dh_wenzi"> <h4>餅干點(diǎn)心</h4> <a class="dh_oneTle"href="javascript:;">服飾</a><s>|</s> <a href="javascript:;">圖書(shū)</a><s>|</s> <a href="javascript:;">辦公直通車</a><s>|</s> <a href="javascript:;">視頻購(gòu)物</a><s>|</s> <a href="javascript:;">品牌街</a><s>|</s> <a href="javascript:;">禮品卡</a><s>|</s> <a href="javascript:;">電子書(shū)</a><s>|</s> <a href="javascript:;">運(yùn)動(dòng)館</a> </li> <li class="line"></li> <li class="dh_wenzi"> <h4>沖調(diào)茶飲</h4> <a class="dh_oneTle"href="javascript:;">商旅</a><s>|</s> <a href="javascript:;">保險(xiǎn)</a><s>|</s> <a href="javascript:;">彩票</a><s>|</s> <a href="javascript:;">水電煤</a><s>|</s> <a href="javascript:;">游戲</a><s>|</s> <a href="javascript:;">PPTV下載</a> </li> <li class="line"></li> <li class="dh_wenzi"> <h4>美食用品</h4> <a class="dh_oneTle"href="javascript:;">應(yīng)用商店</a><s>|</s> <a href="javascript:;">蘇寧云</a><s>|</s> <a href="javascript:;">社區(qū)</a><s>|</s> <a href="javascript:;">客戶端</a><s>|</s> <a href="javascript:;">對(duì)公銷售</a><s>|</s> <a href="javascript:;">會(huì)員聯(lián)盟</a><s>|</s> <a href="javascript:;">商家入駐</a> </li> </ul> </div> </li> </ul> </div> </div></div><!--頂部top]]--><div class="header"> <div class="logo"> <img src="images/logogs.gif" width="260" height="75"/> <div class="logo-text"><font>融創(chuàng)</font>旗下朔源產(chǎn)品在線商城</div> </div> <div class="processor" > <ol class="processorBox oh"> <li class="current"> <div class="step_inner fl"> <span class="icon_step">1</span> <h4>我的購(gòu)物車</h4> </div> </li> <li> <div class="step_inner"> <span class="icon_step">2</span> <h4>確認(rèn)訂單信息</h4> </div> </li> <li> <div class="step_inner fr"> <span class="icon_step">3</span> <h4>付款，完成購(gòu)買(mǎi)</h4> </div> </li> </ol> <div class="step_line"></div> </div></div></div><div class="cartShowline"></div><div class="jdCont"> <div class="carTip"> <div class="lt"><i></i><em>我的購(gòu)物車</em></div> <div class="cart_login">現(xiàn)在<a href="javascript:;">登錄</a>，購(gòu)物車中商品將被永久保存</div> </div> <script type="text/javascript"> $(document).ready(function () { //jquery特效制作復(fù)選框全選反選取消(無(wú)插件) // 全選 $(".allselect").click(function () { $(".gwc_tb2 input[name=newslist]").each(function () { $(this).attr("checked", true); // $(this).next().css({ "background-color": "#3366cc", "color": "#ffffff" }); }); GetCount(); }); //反選 $("#invert").click(function () { $(".gwc_tb2 input[name=newslist]").each(function () { if ($(this).attr("checked")) { $(this).attr("checked", false); //$(this).next().css({ "background-color": "#ffffff", "color": "#000000" }); } else { $(this).attr("checked", true); //$(this).next().css({ "background-color": "#3366cc", "color": "#000000" }); } }); GetCount(); }); //取消 $("#cancel").click(function () { $(".gwc_tb2 input[name=newslist]").each(function () { $(this).attr("checked", false); // $(this).next().css({ "background-color": "#ffffff", "color": "#000000" }); }); GetCount(); }); // 所有復(fù)選(:checkbox)框點(diǎn)擊事件 $(".gwc_tb2 input[name=newslist]").click(function () { if ($(this).attr("checked")) { //$(this).next().css({ "background-color": "#3366cc", "color": "#ffffff" }); } else { // $(this).next().css({ "background-color": "#ffffff", "color": "#000000" }); } }); // 輸出 $(".gwc_tb2 input[name=newslist]").click(function () { // $("#total2").html() = GetCount($(this)); GetCount(); //alert(conts); });});//******************function GetCount() { var conts = 0; var aa = 0; $(".gwc_tb2 input[name=newslist]").each(function () { if ($(this).attr("checked")) { for (var i = 0; i < $(this).length; i++) { conts += parseInt($(this).val()); aa += 1; } } }); $("#shuliang").text(aa); $("#zong1").html((conts).toFixed(2)); $("#jz1").css("display", "none"); $("#jz2").css("display", "block");}</script> <div class="gwc groups_wrapper" style=" margin:auto;"> <!---商品加減算總數(shù)--> <script type="text/javascript"> $(function () { var t = $("#text_box1"); $("#min1").click(function () { t.val(parseInt(t.val()) - 1) setTotal(); GetCount(); if(t.val()==1){ $('.dis_min').attr('disabled','disabled'); $('.dis_min').addClass('disabled'); }else if (t.val()>=1){ $('.dis_min').removeAttr('disabled'); $('.dis_min').removeClass('disabled'); } }) $("#add1").click(function () { t.val(parseInt(t.val()) + 1) setTotal(); GetCount(); if(t.val()==1){ $('.dis_min').attr('disabled','disabled'); $('.dis_min').addClass('disabled'); }else if (t.val()>=1){ $('.dis_min').removeAttr('disabled'); $('.dis_min').removeClass('disabled'); } }) function setTotal() { $("#total1").html((parseInt(t.val()) * 9).toFixed(2)); $("#newslist-1").val(parseInt(t.val()) * 9); } setTotal(); }) </script> <table cellpadding="0" width="100%" cellspacing="0" class="gwc_tb2 order_contents"> <tr> <th class="cart_cx"style="width: 70px;"> <div class="pre_header"> <input id="Checkbox1"type="checkbox" class="allselect inputComStyle"/> <label class="label_style">全選</label> </div> </th> <!-- <th class="tb1_th1">全選</th> --> <th class="cart_name">地友素品</th> <th class="cart_price">單價(jià)</th> <th class="cart_amount">數(shù)量（件）</th> <th class="cart_sum">小計(jì)（元）</th> <th class="cart_operate">操作</th> </tr> <tr> <td class=" cart_cx"><input type="checkbox" value="1" name="newslist" id="newslist-1" /></td> <td class="cart_name"><div class="cart_things"> <a class="cart_img"><img src="images/showCart1.jpg" width="60" height="60"/></a> <a class="cart_infro">水之密語(yǔ)凝潤(rùn)水護(hù)洗發(fā)露600ml水之密語(yǔ)凝潤(rùn)水護(hù)洗發(fā)露600ml</a> </div></td> <td class="cart_price">68.00</td> <td class="cart_amount"><input id="min1" name="" class="cart_minus dis_min disabled" type="button" value="-"disabled/> <input id="text_box1" name="" type="text" value="1" class="cart_mid"/> <input id="add1"class="cart_minus" type="button" value="+" /></td> <td class="cart_sum"><label id="total1" class="tot" style="color:#ff5500;font-size:14px; font-weight:bold;"></label></td> <td class="cart_operate"><a href="javascript:;" class="cart_remove">刪除</a></td> </tr> <tr> <td class="cart_cx"><input type="checkbox" value="1" name="newslist" id="newslist-2" /></td> <td class="cart_name"><div class="cart_things"><a class="cart_img"><img src="images/showCart2.jpg" width="60" height="60"/></a><a class="cart_infro">水之密語(yǔ)凝潤(rùn)水護(hù)洗發(fā)露600ml水之密語(yǔ)凝潤(rùn)水護(hù)洗發(fā)露600ml</a> </div></td> <td class="cart_price">68.00</td> <td class="cart_amount"><input id="min2" class="cart_minus dis_min2 disabled"type="button" value="-" disabled/> <input id="text_box2" name="" type="text" value="1"class="cart_mid"/> <input id="add2" name="" class="cart_minus"type="button" value="+" /></td> <td class="cart_sum"><label id="total2" class="tot" style="color:#ff5500;font-size:14px; font-weight:bold;"></label></td> <td class="cart_operate"><a href="javascript:;"class="cart_remove">刪除</a></td> </tr> </table> <!---商品加減算總數(shù)--> <script type="text/javascript"> $(function () { var t = $("#text_box2"); $("#add2").click(function () { t.val(parseInt(t.val()) + 1) setTotal(); GetCount(); if(t.val()==1){ $('.dis_min2').attr('disabled','disabled'); $('.dis_min2').addClass('disabled'); }else if (t.val()>=1){ $('.dis_min2').removeAttr('disabled'); $('.dis_min2').removeClass('disabled'); } }) $("#min2").click(function () { t.val(parseInt(t.val()) - 1) setTotal(); GetCount(); if(t.val()==1){ $('.dis_min2').attr('disabled','disabled'); $('.dis_min2').addClass('disabled'); }else if (t.val()>=1){ $('.dis_min2').removeAttr('disabled'); $('.dis_min2').removeClass('disabled'); } }) function setTotal() { $("#total2").html((parseInt(t.val()) * 8).toFixed(2)); $("#newslist-2").val(parseInt(t.val()) * 8); } setTotal(); }) $(function(){ $('.cart_remove').click(function(){ $(this).parent().parent().remove(); }) }) </script> <!---總數(shù)--> <script type="text/javascript"> $(function () { $(".quanxun").click(function () { setTotal(); //alert($(lens[0]).text()); }); function setTotal() { var len = $(".tot"); var num = 0; for (var i = 0; i < len.length; i++) { num = parseInt(num) + parseInt($(len[i]).text()); } //alert(len.length); $("#zong1").text(parseInt(num).toFixed(2)); $("#shuliang").text(len.length); } //setTotal(); }) </script> <div class="option_account"> <div class="l_btn"> <div class="lr5" style="margin-left: 20px;"> <input id="checkAll" class="allselect inputComStyle" type="checkbox"/> <label class="label_style">全選</label> </div> <div class="lr5"> <input id="invert" type="checkbox" class="inputComStyle"/> <label class="label_style">反選</label> <!-- <input id="cancel" type="checkbox" class="inputComStyle"/><label class="label_style">取消</label> --> </div> </div> <div class="r_btn"> <span class="last_select">已選商品 <label id="shuliang" class="select_data">0</label> 件</span> <div class="last_moy"><span class="fl"style="white-space:nowrap;">商品應(yīng)付總額:</span><span class="m_num">￥</span> <label id="zong1" class="m_num">0.00</label> </div> <div class="fl"> <span id="jz1" class="fl disbtn">結(jié)算</span> <a href="#" style="display:none;"class="jz2 openlogin fl" id="jz2">結(jié)算</a> </div> </div> </div> </div></div><!--footer搜索--><div class="indexContFooter"> <!--footer搜索end--> <!--底層foot-start--> <div class="footer"> <div class="foot-cont"> <dl class="fore1"> <dt><b></b><strong>購(gòu)物指南</strong></dt> <dd> <div><a href="#">購(gòu)物流程</a></div> <div><a href="#">會(huì)員介紹</a></div> <div><a href="#">團(tuán)購(gòu)/機(jī)票</a></div> <div><a href="#">常見(jiàn)問(wèn)題</a></div> <div><a href="#">大家電</a></div> <div><a href="#">聯(lián)系客服</a></div> </dd> </dl> <dl class="fore2"> <dt><b></b><strong>配送方式</strong></dt> <dd> <div><a href="#">上門(mén)自提</a></div> <div><a href="#">211限時(shí)達(dá)</a></div> <div><a href="#">配送服務(wù)查詢</a></div> <div><a href="#">配送費(fèi)收取標(biāo)準(zhǔn)</a></div> <div><a href="#">海外配送</a></div> </dd> </dl> <dl class="fore3"> <dt><b></b><strong>支付方式</strong></dt> <dd> <div><a href="javascript:;">貨到付款</a></div> <div><a href="javascript:;" >在線支付</a></div> <div><a href="javascript:;" >分期付款</a></div> <div><a href="javascript:;" >郵局匯款</a></div> <div><a href="javascript:;" >公司轉(zhuǎn)賬</a></div> </dd> </dl> <dl class="fore4"> <dt><b></b><strong>售后服務(wù)</strong></dt> <dd> <div><a href="javascript:;" >售后政策</a></div> <div><a href="javascript:;">價(jià)格保護(hù)</a></div> <div><a href="javascript:;">退款說(shuō)明</a></div> <div><a href="javascript:;">返修/退換貨</a></div> <div><a href="javascript:;">取消訂單</a></div> </dd> </dl> </div> <div class="footer_center"> <div class="links"> <a href="javascript:;">關(guān)于我們</a>| <a href="javascript:;">聯(lián)系我們</a>| <a href="javascript:;">友情鏈接</a>| <a href="javascript:;">免責(zé)條款</a>| <a href="javascript:;">廣告服務(wù)</a>| <a href="javascript:;">食品流通許可證</a>| <a href="javascript:;">營(yíng)業(yè)執(zhí)照</a> </div> </div> <div class="footer_copyright"> <p> Copyright ? 2014-2019 5RICE.吾米網(wǎng) 版權(quán)所有 黑ICP備11002788號(hào) 保留一切權(quán)利。 客服熱線：400-400-5555 </p> <p>京公網(wǎng)安備 110105001608 | 京ICP證111033號(hào) | 食品流通許可證 SP1101051110165515（1-1） | 營(yíng)業(yè)執(zhí)照</p> </div> <div class="footer_cx"> <p> <a href="javascript:;"><img src="images/footerbomC.png" width="112"height="40"></a> <a href="javascript:;"><img src="images/footerbomX.gif" width="112"height="40"></a> </p> </div> </div></div><!--底層foot]]--></body></html>~ 關(guān)注我，點(diǎn)贊博文~ 每天帶你漲知識(shí)!相關(guān)問(wèn)題可以相互學(xué)習(xí)，可關(guān)注↓公Z號(hào) 獲取更多源碼 !web前端 零基礎(chǔ)-入門(mén)到高級(jí) (視頻+源碼+開(kāi)發(fā)軟件+學(xué)習(xí)資料+面試題) 一整套 (教程) 適合入門(mén)到高級(jí)的童鞋們?nèi)胧謣送1000套HTML+CSS+JavaScript模板網(wǎng)站 HTML5期末考核大作業(yè)源碼 包含 個(gè)人、 美食、 公司、 學(xué)校、 旅游、 電商、 寵物、 電器、 茶葉、 家居、 酒店、 舞蹈、 動(dòng)漫、 明星、 服裝、 體育、 化妝品、 物流、 環(huán)保、 書(shū)籍、 婚紗、 軍事、 游戲、 節(jié)日、 戒煙、 電影、 攝影、 文化、 家鄉(xiāng)、 鮮花、 禮品、 汽車、 其他* 可滿足大學(xué)生網(wǎng)頁(yè)大作業(yè)網(wǎng)頁(yè)設(shè)計(jì)需求, 喜歡的可以下載! 關(guān)鍵詞：商城,食品,設(shè)計(jì),作業(yè)
客戶&案例
營(yíng)銷資訊
關(guān)于我們
客戶&案例
營(yíng)銷資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
