基于HTML5的年货购物网站前端网页设计

客官°小女子只卖身不卖艺 2024-04-03 08:10 87阅读 0赞

目 录

第一章 绪论 1  
1.1HTML5购物网站开发的背景 1  
1.2 HTML5购物网站开发的目的和意义 1  
1.3 HTML5购物网站开发的需求分析 1  
第二章 开发技术和工具的介绍 3  
2.1开发技术 3  
2.1.1 HTML5 3  
2.1.2 CSS 3  
2.1.3 Div+CSS 4  
2.2开发工具 5  
第三章 HTML5购物网站设计 6  
3.1总体设计 6  
3.2开发流程及设计 7  
3.2.1 分层开发 7  
3.2.2 代码编写 8  
3.3页面设计 9  
3.3.1模块分布 9  
3.3.2 配置颜色 9  
3.3.3 CSS元素 9  
3.4网站结构布局及设计 10  
3.4.1 网站首页结构 10  
3.4.2 板式编排布局合理性 10  
第四章 HTML5购物网站实现 12  
4.1首页 12  
4.1.1首页布局的实现 12  
4.1.2 顶部header的实现 13  
4.1.3 主体main的实现 14  
4.1.4 底部footer的实现 15  
4.2 登陆页 16  
4.1.1登陆布局的实现 16  
4.1.2登陆页主体布局的实现 16  
4.2 购物车页 17  
4.2.1购物车页布局的实现 17  
4.2.2购物车页主体布局的实现 18  
4.3 HTML5购物网站的兼容性测 19  
4.3.1浏览器之间的兼容性测试方法 19  
4.3.2验证是否符合W3C标准的方法 19  
总 结 20  
参考文献 21  
致 谢 22  
1.3 HTML5购物网站开发的需求分析  
1.HTML5购物网站目标受众：电子商品需求者、商业人士。  
2.通过HTML5购物网站HTML5购物网站：  
(1)展示商品价格、质量和类型；  
(2)传达企业人士的设计理念；  
(3)加深浏览者对商品的认识  
3.HTML5购物网站整体设计风格  
考虑HTML5购物网站的定位、主要受众群体和设计目标，我们采用的设计风格简洁大方，稳重。  
4.配色方案  
以橙色主色，以白色为辅助色，字体采用宋体设计。  
5.HTML5购物网站功能概述：  
(1)首页，商品展示；  
(2)会员注册、登录，建立完整的会员资料库；  
(3)管理员发布、管理商品信息、上传图片等；  
(4)支持商品多级分类检索、关键词模糊搜索；  
(5)支持价格的管理，包括市场价、批发价等；  
(6)方便快捷的购物车、网上支付；  
(7)可编辑的订购说明。  
JadeSnow购物网站的开发，在刚开始的时候我和我的组员讨论一下网站的布局，到底写几个页面，以及网站的页面的分配，在分配好以后我们开始讨论网站的页面的大体颜色，因为我们想做一个颜色比较鲜明的网站，所以我们就用了红黑两种颜色。颜色设置好以后我们就开始铺页面，在铺页面的过程中我们会进行交流，尽量做到页面的对称。本文转载自http://www.biyezuopin.vip/onews.asp?id=10401页面铺好以后我们就开始实现其中的一些所必须的功能，以及数据的添加，后台编写，以及数据库的创建。最后合到一起，改一下布局，最后就是修改bug。

<!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>17商城</title>
    <link type="text/css" href="css/css.css" rel="stylesheet" />
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/js.js"></script>
    <script src="js/wb.js" type="text/javascript" charset="utf-8"></script>
    </head>
    
    <body>
     <div class="mianCont">
      <div class="top">
       <span>您好！欢迎来到17商城 请 <a href="login.html">[登录]</a> <a href="reg.html">[注册]</a></span>
       <span class="topRight">
        <a href="vip.html">我的17</a> | 
        <a href="order.html">我的订单</a> | 
        <a href="login.html">会员中心</a> |
        <a href="contact.html">联系我们</a>
       </span>
      </div>
      <div class="lsg">
       <h1 class="logo"><a href="index.html"><img src="images/logo.png" width="217" height="90" /></a></h1>
       <form action="#" method="get" class="subBox">
        <div class="subBoxDiv">
         <input type="text" class="subLeft" />
         <input type="image" src="images/subimg.png" width="63" height="34" class="sub" />
         <div class="hotWord">
          热门搜索：
          <a href="proinfo.html">冷饮杯</a> 
          <a href="proinfo.html">热饮杯</a>  
          <a href="proinfo.html">纸杯</a> 
          <a href="proinfo.html">纸巾</a>   
          <a href="proinfo.html">纸巾</a>  
          <a href="proinfo.html">纸杯</a> 
         </div>
        </div>
       </form>
       <div class="gouwuche">
        <div class="gouCar">
         <img src="images/gouimg.png" width="19" height="20" style="position:relative;top:6px;" /> | 
         <strong class="red">0</strong> 件 |
         <strong class="red">￥ 0.00</strong> 
         <a href="order.html">去结算</a> <img src="images/youjian.jpg" width="5" height="8" />    
        </div>
        <div class="myChunlv">
         <a href="vip.html"><img src="images/mychunlv.jpg" width="112" height="34" /></a>
        </div>
       </div>
      </div>
      <div class="pnt">
       <div class="pntLeft">
        <h2 class="Title">所有商品分类
         <ul class="InPorNav">
         <li><a href="product.html">纸杯系列</a>
          <div class="chilInPorNav">
           <a href="#">单层热饮杯</a>
           <a href="#">双层中空杯</a>
           <a href="#">瓦楞隔热杯</a>
           <a href="#">双淋膜冷饮杯</a>
           <a href="#">爆米花桶</a>
           <a href="#">纸碗</a>
           <a href="#">冰淇淋纸杯</a>
           <a href="#">PS杯盖</a>
          </div>
         </li>
         <li><a href="product.html">PET系列</a>
          <div class="chilInPorNav">
           <a href="#">PET透明杯</a>
           <a href="#">PET透明盖</a>
           <a href="#">PET透明沙拉盒</a>
          </div>
         </li>
         <li><a href="product.html">饮品杯配套系列</a>
          <div class="chilInPorNav">
           <a href="#">杯袖</a>
           <a href="#">环保纸浆杯托</a>
           <a href="#">纸杯打包袋</a>
           <a href="#">吸管</a>
           <a href="#">搅拌棒</a>
           <a href="#">杯盖</a>
          </div>
         </li>
         <li><a href="product.html">纸浆环保餐具系列</a>
          <div class="chilInPorNav">
           <a href="#">纸碟</a>
           <a href="#">纸碗</a>
           <a href="#">纸浆带盖汤碗</a>
           <a href="#">连体餐盒</a>
           <a href="#">分体餐盒</a>
           <a href="#">纸浆沙拉盒</a>
           <a href="#">纸托盘</a>
          </div>
         </li>
         <li><a href="product.html">纸餐盒系列</a>
          <div class="chilInPorNav">
           <a href="#">圆底纸餐盒</a>
           <a href="#">方底纸餐盒</a>
           <a href="#">三明治纸盒</a>
           <a href="#">蛋糕盒</a>
           <a href="#">其他纸餐盒</a>
          </div>
         </li>
         <li><a href="product.html">刀叉勺餐具</a>
          <div class="chilInPorNav">
           <a href="#">PS刀叉勺系列</a>
           <a href="#">PLA刀叉勺系列</a>
           <a href="#">淀粉刀叉勺系列</a>
           <a href="#">搅拌棒/吸管</a>
          </div>
         </li>
         <li><a href="product.html">生活用纸</a>
          <div class="chilInPorNav">
           <a href="#">餐巾纸</a>
           <a href="#">抽纸</a>
           <a href="#">卫生纸</a>
           <a href="#">擦手纸</a>
           <a href="#">其他纸类</a>
          </div>
         </li>
         <li><a href="product.html">纸袋/环保打包袋</a>
          <div class="chilInPorNav">
           <a href="#">纸袋</a>
           <a href="#">环保淀粉塑料袋</a>
           <a href="#">PLA塑料袋</a>
           <a href="#">食品袋</a>
          </div>
         </li>
        </ul>
        </h2>
       </div>
       <div class="pntRight">
        <ul class="nav">
         <li><a href="index.html">商城首页</a></li>
         <li><a href="product.html">促销中心</a></li>
         <li><a href="login.html">会员中心</a></li>
         <li class="navCur"><a href="help.html">帮助中心</a></li>
         <div class="clears"></div>
         <div class="phone">TEL：021-12345678</div>
        </ul>
       </div>
       <div class="clears"></div>
      </div>
      <div class="positions">
       当前位置：<a href="index.html">首页</a> > <a href="#" class="posCur">帮助中心</a>
      </div>
      <div class="cont">
       <div class="contLeft" id="contLeft">
        <h3 class="leftTitle">帮助中心</h3>
        <dl class="helpNav">
          <dt class="help4">关于我们</dt>
          <dd><a href="#">17官网</a></dd>
          <dd><a href="contact.html">联系方式</a></dd>
          <dd><a href="about.html" class="helpCur">企业简介</a></dd>
        </dl>
       </div>
       <div class="contRight">
        <h4 class="gouLiu">企业简介</h4>
        <div class="helpPar">
         上海17实业有限公司是一家集设计、开发、生产于一体的企业，主要生产一次性纸餐具、一次性纸杯（广告纸杯、咖啡 杯、奶茶杯、雪糕杯）等产品。几年来，公司在全体200多位员工共同努力下，本着“以信为本、以诚待人、以新拓展、以质 取胜”的企业宗旨，大胆创新，不断进取，逐渐成为引领一次性纸制品发展潮流中的领先企业。
    <br />
               目前公司拥有德国海德堡CP2000四色胶印机、宽幅柔版印刷机、进口全自动高速纸杯成型机、台湾模切机等一系列具有国 际先进水平的生产设备，以满足不同客户的需要。本公司本着“诚信为本、质量第一、开创新品、精益求精”的企业精神，致 力为用户提供至善至美的服务，欢迎垂询。
    <br />
    公司的承诺：
    　        对工作：提供高质量的产品，传播优质理念，迅速反应，马上行动。
    　        对客户：合作双赢，共同发展。
    　        对员工：教育培训，成就人生。
    　        对社会：依法经营，保护生态，回馈大众。
    <br />
        环保，是我们最关注的问题之一！远传在生产应用中，大量采购使用环保纸张，环保型油墨。并在生产中重点对废料、回料进 行有效处理。保证产品符合国家环保标准，符合食品卫生标准。
        </div>
       </div>
       <div class="clears"></div>
      </div>
      <div class="inHelp">
       <div class="inHLeft">
        <h4>帮助中心</h4>
        <ul class="inHeList">
         <li><a href="help.html">购物指南</a></li>
         <li><a href="help.html">支付方式</a></li>
         <li><a href="help.html">售后服务</a></li>
         <li><a href="about.html">企业简介</a></li>
         <div class="clears"></div>
        </ul>
       </div>
       <div class="inHLeft">
        <h4>会员服务</h4>
        <ul class="inHeList">
         <li><a href="reg.html">会员注册</a></li>
         <li><a href="login.html">会员登录</a></li>
         <li><a href="order.html">购物车</a></li>
         <li><a href="order.html">我的订单</a></li>
         <div class="clears"></div>
        </ul>
       </div>
       <div class="inHRight">
        <h4>全国统一免费服务热线</h4>
        <div class="telBox">400-0000-0000</div>
        <div class="weibo">
        <wb:follow-button uid="2991975565" type="red_1" width="67" height="24" ></wb:follow-button>
        </div>
       </div>
       <div class="clears"></div>
      </div>
      <div class="footer">
       <p>
       <a href="#">进入17官网</a> | 
       <a href="index.html">商城首页</a> | 
       <a href="product.html">促销中心</a> | 
       <a href="order.html">我的订单</a> | 
       <a href="new.html">新闻动态</a> | 
       <a href="login.html">会员中心</a> | 
       <a href="help.htmll">帮助中心</a>
       </p>
       <p>
        版权所有：HTML5购物网站 版权所有  Copyright 2019   
       </p>
      </div>
     </div>
     <a href="#" class="backTop"> </a>
    </body>
    </html>

![在这里插入图片描述][3d8fe4b9130e4aa7bddfab4a609ef8cf.png_pic_center]  
![在这里插入图片描述][b850ad9059104313a6a15748122de2a2.png_pic_center]  
![在这里插入图片描述][223fc310cf56423fbdeddd7e1fe227db.png_pic_center]  
![在这里插入图片描述][443ee022adfd41ac98f0a4cfb4a55996.png_pic_center]  
![在这里插入图片描述][9fce27c7d75c424da4d86ee6adce38a4.png_pic_center]  
![在这里插入图片描述][dbe3332a11ea49a8a4d046e1265d96d4.png_pic_center]  
![在这里插入图片描述][3bb9c380e0c94ad29e4ffb68be44d2c5.png_pic_center]

![在这里插入图片描述][f52b0cc3caac4e9793c9b7d6a8630a8b.png_pic_center]  
![在这里插入图片描述][e4b8140b9a4640af9c33b9ce8c892386.png_pic_center]  
![在这里插入图片描述][f8173d03513749828d3c4cb790f7dcea.png_pic_center]  
![在这里插入图片描述][4e00c89bf31f411f835adfd51608aa0c.png_pic_center]  
![在这里插入图片描述][5b6660e1ee264bca9dc168bd801e7860.png_pic_center]  
![在这里插入图片描述][8215abbab32d42a68811000cc8d55d7c.png_pic_center]  
![在这里插入图片描述][63111dcea9c74d9fa42b253eadcad6b6.png_pic_center]  
![在这里插入图片描述][2b37489090aa4c538be23f0abecf76ab.png_pic_center]  
![在这里插入图片描述][5762845aa29d4a0f81e97478bc47af30.png_pic_center]  
![在这里插入图片描述][a225da21019e4c85acb789088914e7e1.png_pic_center]  
![在这里插入图片描述][775d1faa20a34c6e8b87d1f975326c08.png_pic_center]  
![在这里插入图片描述][8d0140c1d4624280acd7e4d36579dc31.png_pic_center]  
![在这里插入图片描述][3b873dbdbeb7419db3a2c518690300a3.jpeg_pic_center]  
![在这里插入图片描述][71a3081110944ab88810d59263503425.png_pic_center]

[3d8fe4b9130e4aa7bddfab4a609ef8cf.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/a977d8dd4b3943aa9e1638bf27ea0c80.png
[b850ad9059104313a6a15748122de2a2.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/84bb2915b8ab4c3bad9200f164b16e19.png
[223fc310cf56423fbdeddd7e1fe227db.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/756b41481f254a838e7b6a01d76ff442.png
[443ee022adfd41ac98f0a4cfb4a55996.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/18885f9f6adb42e7a8f80307d695f5e1.png
[9fce27c7d75c424da4d86ee6adce38a4.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/14d42f1e424b46778671b88ba2b79cd0.png
[dbe3332a11ea49a8a4d046e1265d96d4.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/d7d5384332e24dd9b5f95732bb650a9e.png
[3bb9c380e0c94ad29e4ffb68be44d2c5.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/16d2464240ad41698fee9967e0db2655.png
[f52b0cc3caac4e9793c9b7d6a8630a8b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/8da87b72958b4838b8fca21986985b98.png
[e4b8140b9a4640af9c33b9ce8c892386.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/5118ede5d1cb4c2baa1c2a9d8327394f.png
[f8173d03513749828d3c4cb790f7dcea.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/db0dedb0be2142a9ac5f145b1c546ee6.png
[4e00c89bf31f411f835adfd51608aa0c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/3337f2892b7a4b1195fa54adf19ac431.png
[5b6660e1ee264bca9dc168bd801e7860.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/0f50260dac154cd69cde9178d8b1e053.png
[8215abbab32d42a68811000cc8d55d7c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/038ed19df6fc498c8942f2f3577c6e16.png
[63111dcea9c74d9fa42b253eadcad6b6.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/5af3bf70aa684fa1bfc29d3ea31e3b7b.png
[2b37489090aa4c538be23f0abecf76ab.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/3692ed23cf304252ab4ba96c98a5c95c.png
[5762845aa29d4a0f81e97478bc47af30.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/a34a20b7d5bc403eb539fbb8131a0f51.png
[a225da21019e4c85acb789088914e7e1.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/bfed3811dc9848e9918ddde44897e95c.png
[775d1faa20a34c6e8b87d1f975326c08.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/d04eec3348384bc0b6c17d76bad3a17a.png
[8d0140c1d4624280acd7e4d36579dc31.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/6e95700ab01348f9829fb3db3f72206d.png
[3b873dbdbeb7419db3a2c518690300a3.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/09be4d00684f480f82bfeeeec2fc5fcb.jpeg
[71a3081110944ab88810d59263503425.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/b9c1513b3c334844b77d79b03a725e8c.png