基于HTML5的年货购物网站前端网页设计
目 录
第一章 绪论 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><!--top/--><div class="lsg"><h1 class="logo"><a href="index.html"><img src="data: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="data: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><!--hotWord/--></div><!--subBoxDiv/--></form><!--subBox/--><div class="gouwuche"><div class="gouCar"><img src="data: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="data:images/youjian.jpg" width="5" height="8" /> </div><!--gouCar/--><div class="myChunlv"><a href="vip.html"><img src="data:images/mychunlv.jpg" width="112" height="34" /></a></div><!--myChunlv/--></div><!--gouwuche/--></div><!--lsg/--><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><!--chilLeftNav/--></li><li><a href="product.html">PET系列</a><div class="chilInPorNav"><a href="#">PET透明杯</a><a href="#">PET透明盖</a><a href="#">PET透明沙拉盒</a></div><!--chilLeftNav/--></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><!--chilLeftNav/--></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><!--chilLeftNav/--></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><!--chilLeftNav/--></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><!--chilLeftNav/--></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><!--chilLeftNav/--></li><li><a href="product.html">纸袋/环保打包袋</a><div class="chilInPorNav"><a href="#">纸袋</a><a href="#">环保淀粉塑料袋</a><a href="#">PLA塑料袋</a><a href="#">食品袋</a></div><!--chilLeftNav/--></li></ul><!--InPorNav/--></h2></div><!--pntLeft/--><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><!--nav/--></div><!--pntRight/--><div class="clears"></div></div><!--pnt/--><div class="positions">当前位置：<a href="index.html">首页</a> > <a href="#" class="posCur">帮助中心</a></div><!--positions/--><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><!--helpNav/--></div><!--contLeft/--><div class="contRight"><h4 class="gouLiu">企业简介</h4><div class="helpPar"> 上海17实业有限公司是一家集设计、开发、生产于一体的企业，主要生产一次性纸餐具、一次性纸杯（广告纸杯、咖啡 杯、奶茶杯、雪糕杯）等产品。几年来，公司在全体200多位员工共同努力下，本着“以信为本、以诚待人、以新拓展、以质 取胜”的企业宗旨，大胆创新，不断进取，逐渐成为引领一次性纸制品发展潮流中的领先企业。
<br /> 目前公司拥有德国海德堡CP2000四色胶印机、宽幅柔版印刷机、进口全自动高速纸杯成型机、台湾模切机等一系列具有国 际先进水平的生产设备，以满足不同客户的需要。本公司本着“诚信为本、质量第一、开创新品、精益求精”的企业精神，致 力为用户提供至善至美的服务，欢迎垂询。
<br />
公司的承诺： 对工作：提供高质量的产品，传播优质理念，迅速反应，马上行动。 对客户：合作双赢，共同发展。 对员工：教育培训，成就人生。 对社会：依法经营，保护生态，回馈大众。
<br />
环保，是我们最关注的问题之一！远传在生产应用中，大量采购使用环保纸张，环保型油墨。并在生产中重点对废料、回料进 行有效处理。保证产品符合国家环保标准，符合食品卫生标准。</div><!--helpPar--></div><!--contRight/--><div class="clears"></div></div><!--cont/--><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><!--inHeList/--></div><!--inHLeft/--><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><!--inHeList/--></div><!--inHLeft/--><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><!--inHRight/--><div class="clears"></div></div><!--inHelp/--><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><!--footer/--></div><!--mianCont/--><a href="#" class="backTop"> </a>
</body>
</html>
基于HTML5的年货购物网站前端网页设计相关推荐
- 基于html+css的购物网站前端页面【折扣社】前端网站
2014年学生时代学前端的时候写的,现在回头来看,很多地方都没有考虑到,比如兼容性,分布式布局 现在已做PHP开发,在回头来看代码,发现那个时候的代码稚嫩, 慢慢的有时间 了,应该做代码重构,应该尝试 ...
- java响应式网页设计_基于HTML5的响应式网站的设计与实现(论文).docx
毕业论文 基于HTML5的响应式网站的设计与实现 摘 要 随着网络的发展和普及,各类建站技术的更新与运用,现在搭建一个网站的时间和成本越来越低,使得企业官方网站得到了极大的发展.从早期简单的网页展示, ...
- 基于html5动画效果毕业论文,毕业设计（论文）-基于HTML5和CSS3的响应式网页制作.doc...
第PAGE \* MERGEFORMAT1页(共16页) 全日制本科生毕业论文 题 目: 基于HTML5和CSS3的响应式网页制作 学 院: 计算机与信息科学学院 专业年级: 计算机科学与技术2011 ...
- html5管理开题报告,基于HTML5的响应式网站的设计与实现(论文)开题报告
[9] Brad Dayley,jQuery与JavaScript入门经典 [M].北京:人民邮电出版社,2014. [10] 王映龙,刘春阳,熊曾刚,Java EE实用教程 [M].北京:清华大学出 ...
- （附源码）基于SSM天天超市购物网站 毕业设计022101
基于SSM天天超市购物网站 摘要 近年来,随着移动互联网的快速发展,电子商务越来越受到网民们的欢迎,电子商务对国家经济的发展也起着越来越重要的作用.简单的流程.便捷可靠的支付方式.快捷畅通的物流快递. ...
- 基于JAVA潮购购物网站计算机毕业设计源码+系统+lw文档+部署
基于JAVA潮购购物网站计算机毕业设计源码+系统+lw文档+部署 基于JAVA潮购购物网站计算机毕业设计源码+系统+lw文档+部署 本源码技术栈: 项目架构:B/S架构 开发语言:Java语言 开发软 ...
- HTML5期末大作业：web网页设计与开发网站设计——爱奇艺首页(1页) HTML+CSS+JavaScript
HTML5期末大作业:web网页设计与开发网站设计--爱奇艺首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见网 ...
- ssh mysql购物商场_基于HTML5的汽车配件购物商城设计与实现(SSH,MySQL)(含录像)
基于HTML5的汽车配件购物商城设计与实现(SSH,MySQL)(含录像)(毕业论文9100字,程序代码,MySQL数据库) 系统目标 本系统的主要目标是开发一个基于Html5的汽车配件购物商城网站, ...
- 基于asp（BS架构）的网页设计网站制作 图文信息管理系统 毕业设计（带完整源代码和视频讲解）
[模块概要] 使用asp+accsss/sql server制作一个图文信息管理系统/公司网站系统,包含完整的前台页面和后台管理功能.主要功能包含:后台权限管理,初始化设置,网站设置,资讯中心,图片中 ...
最新文章
- Python之tkinter：动态演示调用python库的tkinter带你进入GUI世界(Menu的Command)
- 重要接口—Cloneable接口
- WEB前端学习一 JS预解释
- 用一个程序生成另一个程序_还有另一个报告生成器？
- htmlspecialchars() 函数过滤XSS的问题
- 如何用 IDEA 提升十倍开发效率？
- RToax / fedora-coreos-config: [sysroot.mount] mount: wrong fs type, bad option, bad superblock on /
- 抛弃jQuery：DOM API之操作元素
- 比较简单搞定S60的签名
- javascript解析dom
- XMind8 Update9下载安装
- MATLAB更改初始工作路径
- 天行健，君子以自强不息；地势坤，君子以厚德载物
- 百度地图 sdk 使用小结（行动轨迹）
- 深度学习模型试跑(十一):PaddleOCR(c++,vs2019)
- kinect v2 面部模型
- 从微信后端仓库发展史谈谈单仓和多仓
- .net 之美读书笔记
- 怎么在php中加入换行符,如何在PHP中创建换行符？
- 安卓智能语音机器人--AlphaGo？你也可以
热门文章
- tit-al00 android 6,华为TIT-AL00入网 MTK6735四核全网通手机
- 基于JAVA面相高校学生的图书共享平台计算机毕业设计源码+数据库+lw文档+系统+部署
- 基于QT（c++）的家庭财务管理系统
- python 类 子类 初始化 super
- 有5个人坐在一起，问第五个人多少岁？他说比第4个人大2岁。问第4个人岁数，他说比第3个人大2岁。问第三个人，又说比第2人大两岁。问第2个人，说比第一个人大两岁。最后问第一个人，他说是10岁。
- APP自动化遇到问题总结-持续更新
- 如何在电脑上运行知乎？
- npm安装vue，在vue/dist目录下没有产生vue.js文件
- 用ch341a刷写主板bios
- Unity技术手册-初识编辑器（上）