失眠网 > DIV布局——化妆品商城-功能齐全(43页) HTML+CSS+JavaScript web大作业静态网页

DIV布局——化妆品商城-功能齐全(43页) HTML+CSS+JavaScript web大作业静态网页

时间：2022-05-04 03:33:51

HTML5期末大作业：化妆品商城网站设计——化妆品商城-功能齐全(43页) HTML+CSS+JavaScript web大作业静态网页

文章目录

HTML5期末大作业：化妆品商城网站设计——化妆品商城-功能齐全(43页) HTML+CSS+JavaScript web大作业静态网页一、作品展示二、文件目录三、代码实现四、获取更多源码

一、作品展示

二、文件目录

三、代码实现

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html class="hb-loaded" xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>提交订单</title><meta name="generator" content="化妆品 B2B - www.chinahzp.wang"><link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico"><link rel="bookmark" type="image/x-icon" href="images/favicon.ico"><link rel="archives" title="化妆品[中国]" href="http://chinahzp.wang/archiver/"><link rel="stylesheet" type="text/css" href="css/style.css"><link href="css/home_header.css" rel="stylesheet" type="text/css"><link href="css/base1.css" rel="stylesheet" type="text/css"><link rel="stylesheet" type="text/css" href="css/mall.css"><script src="js/hm.js"></script><script type="text/javascript">window.onerror=function(){return true;}</script><script type="text/javascript" src="js/lang.js"></script><script type="text/javascript" src="js/config.js"></script><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/common.js"></script><script type="text/javascript" src="js/page.js"></script><script type="text/javascript">var searchid = 16;</script><script type="text/javascript">$(function(){//searchvar act = "index";if (act == "store_list"){$("#search").children('ul').children('li:eq(1)').addClass("current");$("#search").children('ul').children('li:eq(0)').removeClass("current");}$("#search").children('ul').children('li').click(function(){$(this).parent().children('li').removeClass("current");$(this).addClass("current");$('#search_act').attr("value",$(this).attr("act"));$('#keyword').attr("placeholder",$(this).attr("title"));});$("#keyword").blur();});</script></head><body><div class="public-top-layout w"><div class="topbar wrapper"><div class="user-entry">您好，欢迎来到 <a href="index.html" title="首页" alt="首页">中国化妆品网 </a> 【<span id="destoon_member"><span class="f_b" title="批发商">黄金</span> <a href="http://chinahzp.wang/member/line.php" title="在线，点击隐身"><img src="images/user_online.png" align="absmiddle" height="10" width="10"></a> | <a href="http://chinahzp.wang/member/">商务中心</a> | <a href="http://chinahzp.wang/member/member_message.html">站内信(<span class="head_t" id="destoon_message"><strong>1</strong><div style="float:left;"><embed src="images/message_1.swf" quality="high" type="application/x-shockwave-flash" height="0" hidden="true" width="0"></div></span>)</a> | <a href="http://chinahzp.wang/member/chat.php">新对话(<span class="head_t" id="destoon_chat">0</span>)</a> | <a href="http://chinahzp.wang/member/logout.php">退出</a></span>】</div><div class="quick-menu"><dl><dt><a href="member_order.html" rel="nofollow">我的订单</a><i></i></dt><dd><ul><li><a href="member_order.html?action=order&fields=0&kw=&status=1&fromtime=&totime=&itemid=0&mallid=0&seller=" rel="nofollow">待付款订单</a></li><li><a href="member_order.html?action=order&fields=0&kw=&status=3&fromtime=&totime=&itemid=0&mallid=0&seller=" rel="nofollow">待确认收货</a></li><li><a href="member_order.html?action=order&fields=0&kw=&status=4&fromtime=&totime=&itemid=0&mallid=0&seller=" rel="nofollow">成功交易</a></li></ul></dd></dl><dl><dt><a href="http://chinahzp.wang/member/favorite.php" rel="nofollow">我的收藏</a><i></i></dt><dd><ul><li><a href="http://chinahzp.wang/member/favorite.php" rel="nofollow">商机收藏</a></li></ul></dd></dl><dl><dt>客户服务<i></i></dt><dd><ul><li><a href="http://chinahzp.wang/about/" rel="nofollow">帮助中心</a></li><li><a href="http://chinahzp.wang/about/" rel="nofollow">售后服务</a></li><li><a href="http://chinahzp.wang/about/" rel="nofollow">客服中心</a></li></ul></dd></dl><dl><dt>站点导航<i></i></dt><dd><ul><li><a target="_blank" href="index.html" rel="nofollow">资讯频道</a></li><li><a target="_blank" href="index.html" rel="nofollow">社区圈子</a></li><li><a target="_blank" href="index.html" rel="nofollow">微商城</a></li><li><a target="_blank" href="index.html" rel="nofollow">商城首页</a></li></ul></dd></dl><dl class="weixin"><dt>关注我们<i></i></dt><dd><h4>扫描二维码<br>关注商城微信号</h4><img src="images/18-01-43-98-1.jpg" rel="nofollow"> </dd></dl></div></div></div><script type="text/javascript">//动画显示边条内容区域$(function() {$(function() {$('#activator').click(function() {$('#content-cart').animate({'right': '-250px'});$('#content-compare').animate({'right': '-150px'});$('#ncToolbar').animate({'right': '-60px'}, 300,function() {$('#ncHideBar').animate({'right': '59px'},300);});$('div[nctype^="bar"]').hide();});$('#ncHideBar').click(function() {$('#ncHideBar').animate({'right': '-79px'},300,function() {$('#content-cart').animate({'right': '-250px'});$('#content-compare').animate({'right': '-250px'});$('#ncToolbar').animate({'right': '0'},300);});});});$("#compare").click(function(){if ($("#content-compare").css('right') == '-210px') {loadCompare(false);$('#content-cart').animate({'right': '-210px'});$("#content-compare").animate({right:'50px'});} else {$(".close").click();$(".chat-list").css("display",'none');}});$("#rtoolbar_cart").click(function(){if ($("#content-cart").css('right') == '-210px') {$('#content-compare').animate({'right': '-210px'});$("#content-cart").animate({right:'50px'});if (!$("#rtoolbar_cartlist").html()) {$("#rtoolbar_cartlist").load('index.php?act=cart&op=ajax_load&type=html');}} else {$(".close").click();$(".chat-list").css("display",'none');}});$(".close").click(function(){$(".content-box").animate({right:'-210px'});});$(".quick-menu dl").hover(function() {$(this).addClass("hover");},function() {$(this).removeClass("hover");});$('a[nctype="close-barLoginBox"]').click(function(){$('div[nctype="barLoginBox"]').toggle();});});</script> <div class="header-wrap"><header class="public-head-layout wrapper"><h1 class="site-logo"><a href="index.html"><img src="images/logo.png" class="pngFix" title="中国化妆品网" alt="化妆品中国"></a></h1><div class="head-app"><span class="pic"></span><div class="download-app"><div class="qrcode"><img src="images/mb_app.htm" rel="nofollow"></div><div class="hint"><h4>扫描二维码</h4>下载手机客户端</div><div class="addurl"><a href="order.html?itemid=25&s1=0&s2=0&s3=0" target="_blank" rel="nofollow"><i class="icon-android"></i>Android</a><a href="order.html?itemid=25&s1=0&s2=0&s3=0" target="_blank" rel="nofollow"><i class="icon-apple"></i>iPhone</a></div></div></div><script type="text/javascript">var searchid = 16;</script><div class="head-search-bar search-form "><form id="destoon_search" action="list.htmlsearch.php" class="search-form" onsubmit="return Dsearch();"><input name="moduleid" value="16" id="destoon_moduleid" type="hidden"><input name="spread" value="0" id="destoon_spread" type="hidden"><div id="search"><ul class="tab"></ul> <input name="kw" id="destoon_kw" class="input-text" value="请输入关键词" onfocus="if(this.value=='请输入关键词') this.value='';" onkeyup="STip(this.value);" autocomplete="off" type="text"><input value="搜索" class="input-submit" type="submit"> </div></form><div class="keyword">热门搜索： <ul><li><a href="list.htmlsearch.php?kw=%E9%98%B2%E6%99%92" rel="nofollow">防晒</a></li><li><a href="list.htmlsearch.php?kw=%E9%9D%A2%E8%86%9C" rel="nofollow">面膜</a></li><li><a href="list.htmlsearch.php?kw=%E6%B4%97%E9%9D%A2%E5%A5%B6" rel="nofollow">洗面奶</a></li><li><a href="list.htmlsearch.php?kw=%E5%85%B6%E4%BB%96" rel="nofollow">其他</a></li><li><a href="list.htmlsearch.php?kw=%E5%8C%96%E5%A6%86%E5%93%81" rel="nofollow">化妆品</a></li><li><a href="list.htmlsearch.php?kw=%E5%8C%96%E5%A6%86" rel="nofollow">化妆</a></li><li><a href="list.htmlsearch.php?kw=Mistine" rel="nofollow">Mistine</a></li><li><a href="list.htmlsearch.php?kw=%E9%9F%A9%E5%9B%BD" rel="nofollow">韩国</a></li></ul></div></div><div class="head-user-menu"><dl class="my-mall"><dt><span class="ico"></span><a href="http://chinahzp.wang/member/my.php?mid=5&action=add" rel="nofollow">发布货源</a></dt> </dl><dl class="my-cart"><dt><span class="ico"></span><a href="cart.html" rel="nofollow">购物车</a> (<span class="head_t" id="destoon_cart">0</span>)</dt></dl></div></header></div><nav class="public-nav-layout "><div class="wrapper"><div class="all-category"><div class="title"><i></i><h3><a href="http://chinahzp.wang/sitemap/">全部分类</a></h3></div> </div><ul class="site-menu"><li><a href="index.html">首页</a></li><li><a href="list.html" class="current">一件代发专区</a></li><li><a href="sell.html">找货源</a></li><li><a href="buy.html">看求购</a></li><li><a href="company.html">批发商</a></li><li><a href="invest.html">招代理</a></li><li><a href="brand.html">品牌汇</a></li><li><a href="news.html">资讯圈</a></li></ul></div></nav><style type="text/css">.head-app {display: none; }.public-nav-layout {width: 1000px; }.public-nav-layout .site-menu {max-width: 788px;}.wrapper {width: 1000px !important; }.no-content {font: normal 16px/20px Arial, "microsoft yahei"; color: #999999; text-align: center; padding: 150px 0; }</style><div class="m b10"> </div><script type="text/javascript">var errimg = 'http://chinahzp.wang/skin/shangshop/image/nopic50.gif';</script><div class="m"><div class="left_box"><div class="pos">您的位置: <a href="index.html">首页</a> » <a href="list.html">一件代发专区</a>» 提交订单</div><div class="b10"> </div><form method="post" action="order.html" onsubmit="return check();"><input name="submit" value="1" type="hidden"><div><div class="f_r" style="padding:10px 50px 0 0;"><a href="cart.html" class="b">返回购物车重新挑选</a></div>  <img src="images/buy_1.gif" alt="" height="30" width="160"> </div><div style="margin:10px 40px 10px 40px;" class="c_b"><table bgcolor="#E4E4E4" cellpadding="6" cellspacing="1" width="100%"><tbody><tr align="center" bgcolor="#EEEEEE"><td width="60">图片</td><td>商品</td><td width="60">库存</td><td width="60">价格</td><td width="100">数量</td><td width="60">物流</td><td width="60">运费</td><td width="90">小计</td><td width="90">现金券可用</td></tr><tr align="center" bgcolor="#FFFFFF"><td><a href="list.htmlshow-25.html" target="_blank"><img src="images/13-27-35-94-1.jpg" alt="bynanda来自星星的你彩妆正品口红防水不掉色唇彩" onerror="this.src=errimg;" width="50"></a></td><td style="/* line-height:24px; */color:#666666;" align="left"><a href="list.htmlshow-25.html" target="_blank" class="b" title="bynanda来自星星的你彩妆正品口红防水不掉色唇彩">bynanda来自星星的你彩妆正品口红防水不..</a><br><img src="images/vip_1.gif" alt="一站通" title="一站通:1级" align="absmiddle"> <a href="http://chinahzp.wang/m/xileimaoyi/" target="_blank">上海曦蕾贸易有限公司</a><div style="padding:3px 0 3px 0;">备注：<input name="post[25-0-0-0][note]" size="20" style="border:#CCCCCC 1px solid;" maxlength="100" title="限100字以内" type="text"> <a href="http://chinahzp.wang/member/chat.php?touser=xileimaoyi&mid=16&itemid=25" target="_blank" rel="nofollow"><img src="images/online_002.gif" title="点击交谈/留言" alt="" onerror="this.src=DTPath+'file/image/web-off.gif';" align="absmiddle"></a> <a href="/msg.aw?v=2&uid=%E6%B1%9F%E6%95%8F%E8%95%BE&site=cnalichn&s=6&charset=UTF-8" target="_blank" rel="nofollow"><img src="images/online.gif" title="点击旺旺交谈/留言" alt="" onerror="this.src=DTPath+'file/image/ali-off.gif';" onload="if(this.width>20)this.src=SKPath+'image/ali-off.gif';" align="absmiddle"></a> </div>品牌:bynanda </td><td>1500<span class="dsn" id="amount_25-0-0-0">1500</span></td><td><span class="f_price" id="price_25-0-0-0">3.50</span></td><td><img src="images/arrow_l.gif" alt="减少" class="c_p" onclick="alter('25-0-0-0', '-')" height="8" width="16"> <input name="post[25-0-0-0][number]" value="1" size="3" class="cc_inp" id="number_25-0-0-0" onblur="calculate();" type="text"> <img src="images/arrow_r.gif" alt="增加" class="c_p" onclick="alter('25-0-0-0', '+')" height="8" width="16"><span class="dsn" id="amount_25-0-0-0">1500</span></td><td><select name="post[25-0-0-0][express]" id="express_25-0-0-0" onchange="calculate();Dd('receive').value=this.options[selectedIndex].innerHTML;"><option selected="selected" value="1">快递</option></select><input id="fee_start_25-0-0-0_1" value="10.00" type="hidden"><input id="fee_step_25-0-0-0_1" value="0.00" type="hidden"><input id="fee_start_25-0-0-0_2" value="0.00" type="hidden"><input id="fee_step_25-0-0-0_2" value="0.00" type="hidden"><input id="fee_start_25-0-0-0_3" value="0.00" type="hidden"><input id="fee_step_25-0-0-0_3" value="0.00" type="hidden"></td><td><span class="f_price" id="fee_25-0-0-0">10.00</span></td><td><span class="f_price" id="total_25-0-0-0">13.50</span></td><td><span style="display: none;" id="percent_25-0-0-0">0.00</span><span class="f_price" id="cashcoupon_25-0-0-0">0.00</span></td></tr></tbody></table><div class="b10"> </div><div class="cart_foot" style="text-align:left;"><span class="f_r">共选中 <span class="f_red f_b px16" id="total_good">1</span> 种商品     总价：<span class="f_red f_b px16" id="total_amount">13.50</span> 元<br> <br>可使用现金券: <span class="f_red f_b px16" id="total_cashcoupon_usable">0.00</span> 元<br> <br><input name="use_cashcoupon" id="use_cashcoupon" checked="checked" onclick="calculate_cc();" type="checkbox">使用现金券 (可用余额：<span class="f_red f_b" id="cashcoupon_balance" name="cashcoupon_balance">0.00</span> 元)<br> <br>最终需要支付: <span class="f_red f_b px16" id="total_needpay">13.5</span> 元 </span>  提示：实际的运费可能因为收货地址的不同而有差异，具体以提交之后系统计算或与卖家协商为准<br><br>  在本店领取的优惠券:<select name="couponid" id="couponid" onchange="calculate_cc();"><option selected="selected" value="0">选择要使用的优惠券</option></select></div></div>if(Dd('express_'+itemid).value > 0) {var fee = parseFloat(Dd('fee_start_'+itemid+'_'+Dd('express_'+itemid).value).value) + parseFloat(Dd('fee_step_'+itemid+'_'+Dd('express_'+itemid).value).value)*(num-1);Dd('fee_'+itemid).innerHTML = fee.toFixed(2);Dd('total_'+itemid).innerHTML = (good+fee).toFixed(2);_good += fee;}_cashcoupon += cashcoupon;_good += good;}Dd('total_amount').innerHTML = _good.toFixed(2);Dd('total_cashcoupon_usable').innerHTML = _cashcoupon.toFixed(2);calculate_cc();}function calculate_cc(){var cashc_balance = parseFloat(Dd('cashcoupon_balance').innerHTML);var total_amount = parseFloat(Dd('total_amount').innerHTML);var total_cc_usable = parseFloat(Dd('total_cashcoupon_usable').innerHTML);var coupons = new Array();var coupon_id = Dd('couponid').value;if(coupon_id > 0){total_amount = total_amount - coupons[coupon_id];}if(Dd('use_cashcoupon').checked){if(cashc_balance > total_cc_usable){Dd('total_needpay').innerHTML = (total_amount- total_cc_usable);}else{Dd('total_needpay').innerHTML = total_amount- cashc_balance;}}else{Dd('total_needpay').innerHTML = total_amount ;}}calculate();</script><br><div id="faq"><div id="footer" class="wrapper">(c)- CHINAHZP.WANG SYSTEM All Rights Reserved.<br>Powered by <span><a href="index.html" target="_self" title="化妆品批发">中国化妆品网</a></span> | <a href="http://www./" target="_blank" rel="nofollow">苏ICP备14028353号-3</a><br></div><script type="text/javascript">var destoon_userid = 35;var destoon_username = 'hjl416148489';var destoon_message = 1;var destoon_chat = 0;var destoon_cart = substr_count(get_cookie('cart'), ',');var destoon_member = '';destoon_member += '<span class="f_b" title="批发商">黄金</span> <a href="http://chinahzp.wang/member/line.php" title="在线，点击隐身"><img src="js/image/user_online.png" width="10" height="10" align="absmiddle"/></a> | <a href="http://chinahzp.wang/member/">商务中心</a> | <a href="http://chinahzp.wang/member/member_message.html">站内信(<span class="head_t" id="destoon_message"><strong>1</strong>'+sound('message_1')+'</span>)</a> | <a href="http://chinahzp.wang/member/chat.php">新对话(<span class="head_t" id="destoon_chat">0</span>)</a> | <a href="http://chinahzp.wang/member/logout.php">退出</a>';$('#destoon_member').html(destoon_member);$('#destoon_cart').html(destoon_cart ? '<strong>'+destoon_cart+'</strong>' : 0);$('#back2top').click(function() {$("html, body").animate({scrollTop:0}, 200);});</script><div style="display:none;"><script>var _hmt = _hmt || [];(function() {var hm = document.createElement("script");hm.src = "///hm.js?d4a56a89b79f7e34b6b8f7001c8f9055";var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s);})();</script></div> </div></body></html>