食品商城网站设计—食品商城购物网站(8页) HTML+CSS+JavaScript 静态网页的 ...

忿忿的泥巴坨  金牌会员 | 2022-6-25 14:46:21 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 967|帖子 967|积分 2901

HTML5期末大作业：食品商城网站设计——食品商城购物网站(8页) HTML+CSS+JavaScript 静态网页的制作


文章目录



一、作品展示





二、文件目录


三、代码实现

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>购物车</title>
  12. <link href="css/base.css" rel="stylesheet" type="text/css" />
  13. </head>
  15. <body>
  18.   
  19.     <ul class="fl tW tL" style="width:190px;">
  20.       <li class="b1"><i></i><a target="_blank" href="https://blog.csdn.net/javascript:;">收藏我买网</a></li>
  21.       <li class="b2"><i></i><a target="_blank" href="https://blog.csdn.net/javascript:;">移动客户端</a></li>
  22.     </ul>
  23.    
  24.       <ul class="fl">
  25.         <li class="login" style="white-space:nowrap;height:32px;line-height:32px;"> <b>您好，欢迎您来到顺丰优选</b> <a target="_blank" href="https://blog.csdn.net/javascript:;">登录</a> <a target="_blank" href="https://blog.csdn.net/javascript:;">注册</a> <a target="_blank" href="https://blog.csdn.net/userOrder.html">我的订单</a> </li>
  26.       </ul>
  27.       <ul id="tMenu" class="fr tW tmCont">
  28.         <li class="webnav"> <strong class="top_icon"><a target="_blank" href="https://blog.csdn.net/javascript:;"> 我的素品 </a></strong>
  29.          
  30.              <a target="_blank" href="https://blog.csdn.net/userOrder.html">我的订单</a>
  31.              <a target="_blank" href="https://blog.csdn.net/javascript:;">我的积分</a>
  32.              <a target="_blank" href="https://blog.csdn.net/javascript:;">我的收藏</a>
  33.              <a target="_blank" href="https://blog.csdn.net/javascript:;">账户余额</a>
  34.              <a target="_blank" href="https://blog.csdn.net/javascript:;">我的选项卡</a>
  35.              <a target="_blank" href="https://blog.csdn.net/javascript:;">我的优惠券</a>
  36.          
  37.         </li>
  38.         <li class="webnav"> <strong class="top_icon"><a target="_blank" href="https://blog.csdn.net/javascript:;"> 服务中心 </a></strong>
  39.          
  40.              <a target="_blank" href="https://blog.csdn.net/javascript:;">购物指南</a>
  41.              <a target="_blank" href="https://blog.csdn.net/javascript:;">配送服务</a>
  42.              <a target="_blank" href="https://blog.csdn.net/javascript:;">支付方式</a>
  43.              <a target="_blank" href="https://blog.csdn.net/javascript:;">售后服务</a>
  44.              <a target="_blank" href="https://blog.csdn.net/javascript:;">客服邮箱</a>
  45.              <a target="_blank" href="https://blog.csdn.net/javascript:;">投诉与建议</a>
  46.          
  47.         </li>
  48.         <li class="webnavdh" style="background:none"> <strong class="top_icon"><a target="_blank" href="https://blog.csdn.net/javascript:;"> 网站导航 </a></strong>
  49.          
  50.             <ul class="dh-list">
  51.               <li class="dh_title"> <a  target="_blank" href="https://blog.csdn.net/javascript:;"style="padding-left:0;">生鲜食品</a> <a target="_blank" href="https://blog.csdn.net/javascript:;">酒水饮料</a> <a  target="_blank" href="https://blog.csdn.net/javascript:;">粮油副食</a> <a target="_blank" href="https://blog.csdn.net/javascript:;">休闲食品</a> <a  target="_blank" href="https://blog.csdn.net/javascript:;">营养养生</a> </li>
  52.               <li class="line"></li>
  53.               <li class="dh_wenzi">
  54.                 <h4>饼干点心</h4>
  55.                 <a class="dh_oneTle"target="_blank" href="https://blog.csdn.net/javascript:;">服饰</a><s>|</s> <a target="_blank" href="https://blog.csdn.net/javascript:;">图书</a><s>|</s> <a target="_blank" href="https://blog.csdn.net/javascript:;">办公直通车</a><s>|</s> <a target="_blank" href="https://blog.csdn.net/javascript:;">视频购物</a><s>|</s> <a target="_blank" href="https://blog.csdn.net/javascript:;">品牌街</a><s>|</s> <a target="_blank" href="https://blog.csdn.net/javascript:;">礼品卡</a><s>|</s> <a target="_blank" href="https://blog.csdn.net/javascript:;">电子书</a><s>|</s> <a target="_blank" href="https://blog.csdn.net/javascript:;">运动馆</a> </li>
  56.               <li class="line"></li>
  57.               <li class="dh_wenzi">
  58.                 <h4>冲调茶饮</h4>
  59.                 <a   class="dh_oneTle"target="_blank" href="https://blog.csdn.net/javascript:;">商旅</a><s>|</s> <a   target="_blank" href="https://blog.csdn.net/javascript:;">保险</a><s>|</s> <a   target="_blank" href="https://blog.csdn.net/javascript:;">彩票</a><s>|</s> <a   target="_blank" href="https://blog.csdn.net/javascript:;">水电煤</a><s>|</s> <a   target="_blank" href="https://blog.csdn.net/javascript:;">游戏</a><s>|</s> <a   target="_blank" href="https://blog.csdn.net/javascript:;">PPTV下载</a> </li>
  60.               <li class="line"></li>
  61.               <li class="dh_wenzi">
  62.                 <h4>美食用品</h4>
  63.                 <a   class="dh_oneTle"target="_blank" href="https://blog.csdn.net/javascript:;">应用商店</a><s>|</s> <a   target="_blank" href="https://blog.csdn.net/javascript:;">苏宁云</a><s>|</s> <a   target="_blank" href="https://blog.csdn.net/javascript:;">社区</a><s>|</s> <a   target="_blank" href="https://blog.csdn.net/javascript:;">客户端</a><s>|</s> <a   target="_blank" href="https://blog.csdn.net/javascript:;">对公销售</a><s>|</s> <a   target="_blank" href="https://blog.csdn.net/javascript:;">会员联盟</a><s>|</s> <a   target="_blank" href="https://blog.csdn.net/javascript:;">商家入驻</a> </li>
  64.             </ul>
  65.          
  66.         </li>
  67.       </ul>
  68.    
  69.   
  73.    <img src="https://blog.csdn.net/images/logogs.gif" width="260" height="75"/>
  74.     <font>融创</font>旗下朔源产品在线商城
  75.   
  76.   
  77.     <ol class="processorBox oh">
  78.       <li class="current">
  79.          1
  80.           <h4>我的购物车</h4>
  81.         
  82.       </li>
  83.       <li>
  84.          2
  85.           <h4>确认订单信息</h4>
  86.         
  87.       </li>
  88.       <li>
  89.          3
  90.           <h4>付款，完成购买</h4>
  91.         
  92.       </li>
  93.     </ol>
  94.    
  95.   
  100.   
  101.     <i></i><em>我的购物车</em>
  102.     现在<a target="_blank" href="https://blog.csdn.net/javascript:;">登录</a>，购物车中商品将被永久保存
  103.   
  104.   
  105.    
  106.    
  107.      
  108.    
  109.     <table cellpadding="0" width="100%" cellspacing="0" class="gwc_tb2 order_contents">
  110.       <tr>
  111.         <th class="cart_cx"style="width: 70px;">
  112.             <input id="Checkbox1"type="checkbox" class="allselect inputComStyle"/>
  113.             <label class="label_style">全选</label>
  114.          
  115.         </th>
  116.         
  117.         <th class="cart_name">地友素品</th>
  118.         <th class="cart_price">单价</th>
  119.         <th class="cart_amount">数量（件）</th>
  120.         <th class="cart_sum">小计（元）</th>
  121.         <th class="cart_operate">操作</th>
  122.       </tr>
  123.       <tr>
  124.         <td class=" cart_cx"><input type="checkbox" value="1" name="newslist" id="newslist-1" /></td>
  125.         <td class="cart_name"> <a class="cart_img"><img src="https://blog.csdn.net/images/showCart1.jpg" width="60" height="60"/></a> <a class="cart_infro">水之密语凝润水护洗发露600ml水之密语凝润水护洗发露600ml</a> </td>
  126.         <td class="cart_price">68.00</td>
  127.         <td class="cart_amount"><input id="min1" name="" class="cart_minus dis_min disabled" type="button" value="-"disabled/>
  128.           <input id="text_box1" name="" type="text" value="1" class="cart_mid"/>
  129.           <input id="add1"class="cart_minus" type="button" value="+" /></td>
  130.         <td class="cart_sum"><label id="total1" class="tot" style="color:#ff5500;font-size:14px; font-weight:bold;"></label></td>
  131.         <td class="cart_operate"><a target="_blank" href="https://blog.csdn.net/javascript:;" class="cart_remove">删除</a></td>
  132.       </tr>
  133.       <tr>
  134.         <td class="cart_cx"><input type="checkbox" value="1" name="newslist" id="newslist-2" /></td>
  135.         <td class="cart_name"><a class="cart_img"><img src="https://blog.csdn.net/images/showCart2.jpg" width="60" height="60"/></a><a class="cart_infro">水之密语凝润水护洗发露600ml水之密语凝润水护洗发露600ml</a> </td>
  136.         <td class="cart_price">68.00</td>
  137.         <td class="cart_amount"><input id="min2" class="cart_minus dis_min2 disabled"type="button" value="-" disabled/>
  138.           <input id="text_box2" name="" type="text" value="1"class="cart_mid"/>
  139.           <input id="add2" name="" class="cart_minus"type="button" value="+" /></td>
  140.         <td class="cart_sum"><label id="total2" class="tot" style="color:#ff5500;font-size:14px; font-weight:bold;"></label></td>
  141.         <td class="cart_operate"><a target="_blank" href="https://blog.csdn.net/javascript:;"class="cart_remove">删除</a></td>
  142.       </tr>
  143.     </table>
  144.      
  145.      
  146.      
  147.    
  148.    
  149.       
  150.         
  151.           <input id="checkAll" class="allselect inputComStyle" type="checkbox"/>
  152.           <label class="label_style">全选</label>
  153.         
  154.         
  155.           <input id="invert" type="checkbox" class="inputComStyle"/>
  156.           <label class="label_style">反选</label>
  157.            
  158.         
  159.       
  160.        已选商品
  161.         <label id="shuliang" class="select_data">0</label>
  162.         件
  163.         商品应付总额:￥
  164.           <label id="zong1" class="m_num">0.00</label>
  165.         
  166.          结算
  167.         <a target="_blank" href="https://blog.csdn.net/#" style="display:none;"class="jz2 openlogin fl" id="jz2">结算</a>
  168.       
  169.    
  170.   
  175.    
  176.   
  177.   
  178.    
  179.       <dl class="fore1">
  180.         <dt><b></b><strong>购物指南</strong></dt>
  181.         <dd>
  182.           <a target="_blank" href="https://blog.csdn.net/#">购物流程</a>
  183.           <a target="_blank" href="https://blog.csdn.net/#">会员介绍</a>
  184.           <a target="_blank" href="https://blog.csdn.net/#">团购/机票</a>
  185.           <a target="_blank" href="https://blog.csdn.net/#">常见问题</a>
  186.           <a target="_blank" href="https://blog.csdn.net/#">大家电</a>
  187.           <a target="_blank" href="https://blog.csdn.net/#">联系客服</a>
  188.         </dd>
  189.       </dl>
  190.       <dl class="fore2">
  191.         <dt><b></b><strong>配送方式</strong></dt>
  192.         <dd>
  193.           <a target="_blank" href="https://blog.csdn.net/#">上门自提</a>
  194.           <a target="_blank" href="https://blog.csdn.net/#">211限时达</a>
  195.           <a target="_blank" href="https://blog.csdn.net/#">配送服务查询</a>
  196.           <a target="_blank" href="https://blog.csdn.net/#">配送费收取标准</a>
  197.           <a target="_blank" href="https://blog.csdn.net/#">海外配送</a>
  198.         </dd>
  199.       </dl>
  200.       <dl class="fore3">
  201.         <dt><b></b><strong>支付方式</strong></dt>
  202.         <dd>
  203.           <a target="_blank" href="https://blog.csdn.net/javascript:;">货到付款</a>
  204.           <a target="_blank" href="https://blog.csdn.net/javascript:;" >在线支付</a>
  205.           <a target="_blank" href="https://blog.csdn.net/javascript:;" >分期付款</a>
  206.           <a target="_blank" href="https://blog.csdn.net/javascript:;" >邮局汇款</a>
  207.           <a target="_blank" href="https://blog.csdn.net/javascript:;" >公司转账</a>
  208.         </dd>
  209.       </dl>
  210.       <dl class="fore4">
  211.         <dt><b></b><strong>售后服务</strong></dt>
  212.         <dd>
  213.           <a target="_blank" href="https://blog.csdn.net/javascript:;" >售后政策</a>
  214.           <a target="_blank" href="https://blog.csdn.net/javascript:;">价格保护</a>
  215.           <a target="_blank" href="https://blog.csdn.net/javascript:;">退款说明</a>
  216.           <a target="_blank" href="https://blog.csdn.net/javascript:;">返修/退换货</a>
  217.           <a target="_blank" href="https://blog.csdn.net/javascript:;">取消订单</a>
  218.         </dd>
  219.       </dl>
  220.    
  221.    
  222.        <a target="_blank" href="https://blog.csdn.net/javascript:;">关于我们</a>| <a target="_blank" href="https://blog.csdn.net/javascript:;">联系我们</a>| <a target="_blank" href="https://blog.csdn.net/javascript:;">友情链接</a>| <a target="_blank" href="https://blog.csdn.net/javascript:;">免责条款</a>| <a target="_blank" href="https://blog.csdn.net/javascript:;">广告服务</a>| <a target="_blank" href="https://blog.csdn.net/javascript:;">食品流通许可证</a>| <a target="_blank" href="https://blog.csdn.net/javascript:;">营业执照</a>
  223.    
  224.    
  225.       <p> Copyright © 2014-2019 5RICE.吾米网 版权所有 黑ICP备11002788号 保留一切权利。 客服热线：400-400-5555 </p>
  226.       <p>京公网安备 110105001608 | 京ICP证111033号 | 食品流通许可证 SP1101051110165515（1-1） | 营业执照</p>
  227.    
  228.    
  229.       <p> <a target="_blank" href="https://blog.csdn.net/javascript:;"><img src="https://blog.csdn.net/images/footerbomC.png" width="112"height="40"></a> <a target="_blank" href="https://blog.csdn.net/javascript:;"><img src="https://blog.csdn.net/images/footerbomX.gif" width="112"height="40"></a> </p>
  230.    
  231.   
  234. </body>
  235. </html>
复制代码

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

忿忿的泥巴坨

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表