基于web的网上点餐系统设计与开发—前台设计与实现

基于web的网上点餐系统设计与开发—前台设计与实现内容摘要：

个button 按钮一个用于确认提交，一个用于清空信息重新输入。 其中手机、 Email，邮编，送货地址相应信息的填写设置了验证。 界面如下图 48 所示 图 48 订单 页面 用户注册页面 （ 1）用户注册。 添 加 6 个 textbox 用于输入相关信息，一个按钮用于确认创建用户。 界面如下图 49 所示 图 49 用户注册页面 6 5 系统前台页面兼容性解决 (1)何谓兼容性 所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。 在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。 所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。 因此这里主要从浏览器解析差异的角度来分析兼容性问题。 (2)常见问题及解决 方案 1)浏览器兼容问题一 ：不同浏览器的标签默认的外补丁和内补丁不同。 问题症状：随便写几个标签，不加样式控制的情况下，各自的 margin 和 padding差异较大。 解决方案： CSS 里 使用通配符 *。 备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的 CSS文件开头都会用通配符 *来设置各个标签的内外补丁是 0。 2) 浏览器兼容问题二：块属性标签 float 后，又有横行的 margin 情况下，在IE6 显示 margin 比设置的大。 问题症状 ： 常见症状是 IE6 中后面的一块被顶到下一行。 解决方案：在 float 的标签样式控制中加入 display:inline， 将其转化为行内属性。 备注：我们最常用的就是 div+CSS 布局了，而 div 就是一个典型的块属性标签，横向布局的时候我们通常都是用 div float 实现的，横向的间距设置如果用 margin实现，这就是一个必然会碰到的兼容性问题。 3) 浏览器兼容问题 三 ：图片默认有间距 问题症状：几个 img 标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。 解决方案：使用 float 属性为 img 布局。 备注：因为 img 标签 是行内属性标签，所以只要不超出容器宽度， img 标签都会排在一行里，但是部分浏览器的 img 标签之间会有个间距。 去掉这个间距使用 float是正道。 7 结论与谢辞 基于 web 的网上点餐系统采用了 VS 2020 和 SQL server 2020 等应用软件来开发。 实现了 用户注册、 登录、 用户发布信息、查询浏览、 订单、留言 、 菜品管理、用户管理等功能。 这次毕业设计的完成我明白了团队合作的重要性，一份需要团队完成的工作，一个要想考虑的非常全面是比较困难的。 但是如果有这样一个积极向上，合作融洽的团队我相信一切问题都可以迎刃而解。 大学三年转眼即逝，真正的要离开学校走向社会。 实习回来的几天里我深深的感觉到了压力。 我就要离开这个生活了三年的地方了，离开那些整日一起学习一起打闹的同学们了，离开为我们的学业忙忙碌碌的老师们了，心里充满了不舍之情。 难忘校园，难忘友情，难忘师恩非常感谢老师和同学为我提出的有益建议和意见，有了他们的支持、鼓励和帮助，我才能充实的度过大学三年。 在大学的这段时间收获还是挺多的，尝试了以前不敢做的，让我不再觉得遗憾。 经过一个多月的努力，我的毕业设计 —— 基于 web 的网上点餐系统终于顺利完成了。 在此我要特别感谢的是我 的指导老师王静，在她的细心指导下使我搞懂我如何运用自己所学的知识，学以致用，在巩固了老师教给我的知识以外，还学会了如何自主学习从而不断的提高自己，持续发展。 王老师不管多忙，都会热心的帮助我解决问题，在此表示我崇高的谢意和敬意。 此外我还要感谢那些帮助过我的同学，如果没有他们，我的设计不可能这么快就顺利完成的。 谢谢 8 参考文献 [1] 石志国 . ASP 动态网站编程 [M]. 清华大学出版社 , 2020. [2] 屈喜龙 . ASP +Dreamweaver 开发动态网站实例荟 . 机械工业出版社 , 2020. [3] 刘积仁 . 软件开发项目管理 [M]. 人民邮电出版社 , 2020. [4] 赵永霞 . 数据库系统原理与应用 . 武汉大学出版社 , 2020. [5] 邓佑权 . 零基础学 DREAMWEAVER CS3+ , 2020. [6] 薛小龙 . ASP 经典模块开发大全 .电子工业出版社 , 2020. [7] 罗兵，刘艺，孟武生． C程序设计大学教程 [M]．北京：机械工业出版社， 2020. [8] 张国良． 项目实战教程 [M]．山东教育出版社， 2020. [9] 游祖元． C案例教程 [M]． 电子工业大学出版社， 2020. [10] 施燕妹 .陈培，陈发吉． C语言程序设计教程 [M]．北京：中国水利水电出版社，2020. 9 附件 1：程序清单 (1) 网页母版代码 html xmlns= xml:lang=en head runat=server title/title /head body form id=form1 runat=server div class=header style=zindex: 101。 left: 0px。 top: 0px h1 style=left: 37px。 top: 17px span style=color: 0000ff欢迎光临 span style=fontsize: 20pt。 color: ff0033。 fontfamily: 华文彩云。 textdecoration: underline金职网上在线/span/span/h1 h2 style=left: 38px。 width: 194px。 fontfamily: 39。 Arial Black39。 top: 59px span style=color: ffff66。 backgroundcolor: ccccff/span/h2 asp:Menu ID=menua runat=server DataSourceID=SiteMapDataSource1 CssClass=menua Orientation=Horizontal MaximumDynamicDisplayLevels=0 SkipLinkText= StaticDisplayLevels=2 BackColor=CCFFFF FontBold=True FontSize=14pt Style=right: 16px。 width: 421px。 height: 17px。 / div class=nav asp:SiteMapPath ID=SiteMapPath1 runat=Server PathSeparator= RenderCurrentNodeAsLink=true / asp:LoginStatus ID=LoginStatus1 runat=server / /div 10 /div div align=center !以下代码用来显示 flash div style=zindex: 102。 left: 24px。 width: 960px。 position: absolute。 top: 83px。 height: 100px /div object classid=clsid:D27CDB6EAE6D11cf96B8444553540000 codebase=version=6,0,29,0 style=width: 760px。 height: 120px。 position: static。 param name=movie value=Images/ param name=quality value=high param name=SCALE value=exactfit embed embed height=280 pluginspage= quality=high scale=exactfit src=Images/ type=application/xshockwaveflash width=150/embed /object br / !asp:ContentPlaceHolder ID=Main runat=server /asp:ContentPlaceHolder div class=footerbg div class=footer br / asp:Menu ID=menub runat=server 11 DataSourceID=SiteMapDataSource1 CssClass=menub Orientation=Horizontal。