时间：2023-09-12 02:48:02 | 来源：网站运营
时间：2023-09-12 02:48:02 来源：网站运营
HTML5期末大作业：食品商城网站设计——食品商城购物网站(8页) HTML+CSS+JavaScript 静态网页的制作：常见网页设计作业题材有个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目,A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
在线咨询
PC电脑端关注我们1.网页作品简介 ：HTML期末大学生网页设计作业 A+水平 ,喜欢的可以下载，文章页支持手机PC响应式布局。2.网页作品编辑：作品下载后可使用任意HTML编辑软件（如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ 等任意HTML软件编辑修改网页）。3.网页作品技术：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。<!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>购物车</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:;">收藏我买网</a></li> <li class="b2"><i></i><a href="javascript:;">移动客户端</a></li> </ul> <div class="fr tW"> <ul class="fl"> <li class="login" style="white-space:nowrap;height:32px;line-height:32px;"> <b>您好，欢迎您来到顺丰优选</b> <a href="javascript:;">登录</a> <a href="javascript:;">注册</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:;">我的选项卡</a> </div> <div> <a href="javascript:;">我的优惠券</a> </div> </div> </li> <li class="webnav"> <strong class="top_icon"><a href="javascript:;"> 服务中心 </a></strong> <div class="top_hidebox"> <div class=""> <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:;">客服邮箱</a> </div> <div> <a href="javascript:;">投诉与建议</a> </div> </div> </li> <li class="webnavdh" style="background:none"> <strong class="top_icon"><a href="javascript:;"> 网站导航 </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:;">营养养生</a> </li> <li class="line"></li> <li class="dh_wenzi"> <h4>饼干点心</h4> <a class="dh_oneTle"href="javascript:;">服饰</a><s>|</s> <a href="javascript:;">图书</a><s>|</s> <a href="javascript:;">办公直通车</a><s>|</s> <a href="javascript:;">视频购物</a><s>|</s> <a href="javascript:;">品牌街</a><s>|</s> <a href="javascript:;">礼品卡</a><s>|</s> <a href="javascript:;">电子书</a><s>|</s> <a href="javascript:;">运动馆</a> </li> <li class="line"></li> <li class="dh_wenzi"> <h4>冲调茶饮</h4> <a class="dh_oneTle"href="javascript:;">商旅</a><s>|</s> <a href="javascript:;">保险</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:;">应用商店</a><s>|</s> <a href="javascript:;">苏宁云</a><s>|</s> <a href="javascript:;">社区</a><s>|</s> <a href="javascript:;">客户端</a><s>|</s> <a href="javascript:;">对公销售</a><s>|</s> <a href="javascript:;">会员联盟</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>融创</font>旗下朔源产品在线商城</div> </div> <div class="processor" > <ol class="processorBox oh"> <li class="current"> <div class="step_inner fl"> <span class="icon_step">1</span> <h4>我的购物车</h4> </div> </li> <li> <div class="step_inner"> <span class="icon_step">2</span> <h4>确认订单信息</h4> </div> </li> <li> <div class="step_inner fr"> <span class="icon_step">3</span> <h4>付款，完成购买</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>我的购物车</em></div> <div class="cart_login">现在<a href="javascript:;">登录</a>，购物车中商品将被永久保存</div> </div> <script type="text/javascript"> $(document).ready(function () { //jquery特效制作复选框全选反选取消(无插件) // 全选 $(".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(); }); // 所有复选(:checkbox)框点击事件 $(".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;"> <!---商品加减算总数--> <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">单价</th> <th class="cart_amount">数量（件）</th> <th class="cart_sum">小计（元）</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">水之密语凝润水护洗发露600ml水之密语凝润水护洗发露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">水之密语凝润水护洗发露600ml水之密语凝润水护洗发露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> <!---商品加减算总数--> <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> <!---总数--> <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;">商品应付总额:</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">结算</span> <a href="#" style="display:none;"class="jz2 openlogin fl" id="jz2">结算</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>购物指南</strong></dt> <dd> <div><a href="#">购物流程</a></div> <div><a href="#">会员介绍</a></div> <div><a href="#">团购/机票</a></div> <div><a href="#">常见问题</a></div> <div><a href="#">大家电</a></div> <div><a href="#">联系客服</a></div> </dd> </dl> <dl class="fore2"> <dt><b></b><strong>配送方式</strong></dt> <dd> <div><a href="#">上门自提</a></div> <div><a href="#">211限时达</a></div> <div><a href="#">配送服务查询</a></div> <div><a href="#">配送费收取标准</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:;" >公司转账</a></div> </dd> </dl> <dl class="fore4"> <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:;">取消订单</a></div> </dd> </dl> </div> <div class="footer_center"> <div class="links"> <a href="javascript:;">关于我们</a>| <a href="javascript:;">联系我们</a>| <a href="javascript:;">友情链接</a>| <a href="javascript:;">免责条款</a>| <a href="javascript:;">广告服务</a>| <a href="javascript:;">食品流通许可证</a>| <a href="javascript:;">营业执照</a> </div> </div> <div class="footer_copyright"> <p> Copyright © 2014-2019 5RICE.吾米网 版权所有 黑ICP备11002788号 保留一切权利。 客服热线：400-400-5555 </p> <p>京公网安备 110105001608 | 京ICP证111033号 | 食品流通许可证 SP1101051110165515（1-1） | 营业执照</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>~ 关注我，点赞博文~ 每天带你涨知识!相关问题可以相互学习，可关注↓公Z号 获取更多源码 !web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程) 适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站 HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他* 可满足大学生网页大作业网页设计需求, 喜欢的可以下载! 关键词：商城,食品,设计,作业
