前端大作业-期末课程设计-手机端外卖界面制作（粥品香坊手机界面+HTML5+CSS+JS）

最新推荐文章于 2023-02-14 10:29:12 发布

~浮生~

最新推荐文章于 2023-02-14 10:29:12 发布

阅读量1.9k

点赞数 1

分类专栏：课程设计文章标签：前端 css javascript 前端大作业课程设计

本文链接： https://blog.csdn.net/qq_52889967/article/details/122276193

版权

课程设计专栏收录该内容

19 篇文章 0 订阅

订阅专栏

仿照手机端饿了吗外卖界面制作的前端项目，主要使用了HTML5、CSS和JS
其中JS部分只实现了左侧热销榜、单人特色套餐和特色粥品的部分，其他部分未实现
HTML5共计100多行代码，CSS共计400多行，JS共计190多行，合计690多行

有需要的可以自行下载！

下载链接：
https://download.csdn.net/download/qq_52889967/73096507

运行截图如下：
在iphone6/7/8 界面如下图所示，其他界面尺寸可自动适应

iphone6/7/8 plus界面：

点击热销榜的界面：

点击特色粥品的界面

部分代码截图如下：

立减 ¥

1
点赞
踩
21

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端大作业-期末课程设计-手机端外卖界面制作（粥品香坊手机界面+HTML5+CSS+JS）

仿照手机端饿了吗外卖界面制作的前端项目，主要使用了HTML5、CSS和JS其中JS部分只实现了左侧热销榜、单人特色套餐和特色粥品的部分，其他部分未实现HTML5共计100多行代码，CSS共计400多行，JS共计190多行，合计690多行有需要的可以自行下载！下载链接：https://download.csdn.net/download/qq_52889967/73096507运行截图如下：在iphone6/7/8 界面如下图所示，其他界面尺寸可自动适应iphone6/7/8 plus界.
复制链接

扫一扫

专栏目录

Vue开发的仿美团外卖Html5前端页面

xiangzhihong8的专栏

01-21

3581

今天给大家开源一个仿美团外卖的Vue项目，介绍Vue和vue-router的基本用法。工程结构工程目录结构比较简单，如下图所示。运行效果部分运行效果如下图，实现了基本的页面切换，导航菜单，购物车等功能。如何运行和其他的Vue项目一样，只需要下载源码，然后执行以下命令即可。 npm install npm run dev 源码链接 ...

web前端期末大作业：基于HTML+CSS+JS外卖服务平台10页带购物车 (web课程设计与实现)

最新发布

html精品源码

12-26

1033

👒 公司官网网站、企业官网、酒店官网、等网站的设计与制作。🏷️ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站...

参与评论您还未登录，请先登录后发表或查看评论

饿了么项目+前端页面+HTML+js+vue

12-28

一个饿了么手机页面的前端效果。项目展示： 1. 运行 “饿了么项目” ，演示应用程序效果，演示 “点餐业务线” 整体流程。 2. 本项目参照 “饿了么官网网页版”制作，演示饿了么官网效果。饿了么网页版：http://h5.ele.me/ 3. 本项目专注于完成点餐业务线功能， ”饿了么官网“中的其它功能暂不涉及。

Web前端期末大作业-在线手机商城网站设计（HTML+CSS+JS）

weixin_19164791635

12-04

2272

????作者：计算机编程-吉哥 ????简介：专业从事JavaWeb程序开发，微信小程序开发，定制化项目、源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事，生活就是快乐的。 ????心愿：点赞 ???? 收藏 ⭐评论???? ????文末获取源码联系效果展示：部分代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

粥品香坊完成.zip

10-31

纯手写原生js 的美团页面没有添加动态的那种都是静态的学完html5和css3的可以练练手

html前端--外卖点餐模板

11-26

把项目搭建到Tomcat中的appwebs文件资源中可以直接运行！

仿照手机端饿了吗外卖界面制作的前端项目.zip

01-02

仿照手机端饿了吗外卖界面制作的前端项目，详情请看我的博客

移动端手机点餐前端网页

09-06

手机点餐前端网页手机点餐前端网页手机点餐前端网页手机点餐前端网页手机点餐前端网页手机点餐前端网页手机点餐前端网页手机点餐前端网页

vue-cli项目如何使用vue-resource获取本地的json数据（模拟服务端返回数据）

01-19

最近使用vue-cli做了一个小小的项目，在项目中需要使用vue-resource来与后台进行数据交互，所以我使用了本地json数据来模仿... name: 粥品香坊（回龙观）, description: 蜂鸟专送, bulletin: 会指定餐饮服务商。, a

Java项目：ssm+jsp实现手机WAP版外卖订餐系统

09-10

379

这是一款由jsp+ssm框架（spring、springMVC、mybaits）实现的手机WAP版外卖订餐系统。本系统前台页面是手机端的，跟目前主流的饿了么、美团外卖等一样的界面风格，前台实现了用户登录注册、查看菜品信息、添加到购物车、提交订单、查看个人订单、修改个人资料等，后台管理实现了菜品分类管理、菜品管理、客户管理、订单管理等功能。前端访问地址：用户名：13212345678密码：123456。

基于HTML5+CSS+JS饿了么实战项目

07-31

基于HTML5+CSS+JS饿了么实战项目，共11个页面 1. 运行 “饿了么前端网页项目” ，演示页面效果。 2. 本项目参照 “饿了么官网网页版”制作，演示饿了么官网效果。饿了么网页版：http://h5.ele.me/ 3. 本项目中的首页，完全按照“饿了么网页版”实际效果制作，相似度达到99%。 4. 本项目中的其它页面，专注于完成一个“点餐业务线”功能，所以其它页面效果会有适当的删减。

小程序外卖订单界面的代码

CPan_的博客

01-02

3327

html页面 . <view class="container"> <view class="store-box"> <view class="st-bg"></view> <view class=" flex justify-between store-info"> <view class=" flex flex-direction justify-star...

低仿饿了么H5-纯前端Vue版 + 手把手教学

大灰狼的小绵羊哥哥的博客

03-07

5248

这是一个低仿饿了么H5的纯前端练手，数据是伪造的，写的比较粗糙，写这个的目的是为了加深一下熟练度，半年前看到别人写的仿cnodejs网站，我也用vue1仿了cnodeJs的网站，当时写的也是粗糙的令人发指，在线预览：https://hbxywdk.github.io/vue-cnodeJs/#!/ 半年过去，工作中很少有机会用上vue，vue也早已更新到2.+，想想学了不用也是白学了，恰好年

饿了么html css实现,饿了么day04前端网页-商家信息页面

weixin_36396810的博客

06-21

1519

html界面下面结算部分3¥12.88另需配送费3元去结算css这样写让他更好看一点要注意细节比如右上角的红色数字等.shopcar{width: 100%;height: 14vw;position: fixed;left: 0;bottom: 0;display: flex;}.shopcarleft{flex:2;background-color: #505051;display: fle...

Vue-饿了么系统项目

dkjhl的博客

02-14

1036

vue2.0实战高仿饿了么，实现饿了么诸多功能：商品列表，商品详情，店铺标签，星级评分，酷炫购物车，留言板；功能丰富，更有视频学习资料，你值得拥有

04、Vue-项目准备《饿了吗》

快把钟哥带走

07-21

135

*** 《饿了吗》外卖商家页面*** 一、项目需求分析商品页 SPA(单页面开发): 快、局部刷新、减少请求大小、体验有明显变化; 实现原理: 在页面中，如果只是锚点发生变化时，是不会有任何的请求操作的，只是在当前页面找对应的锚点位置；另外锚点值发生变化时是可以监听到的，所以可以利用JS当锚点值的改变时，向服务器发起数据请求，获取到数据之后，只需要局部刷新页面即可二、项目资源在...

饿了么--vue项目总结

七元八元

07-08

4638

来迟了来迟了，早就应该动手写了，无奈卡在webpack的学习中，深陷泥潭。 github源码地址：饿了么项目源码饿了么项目包含以下三个方面的技术点，以及所了解的知识。 1.流程及开发方法：组件化、模块化的开发模式学会模拟json后端数据，前后端分离开发了解webpack的打包原理 2.第三方组件学会使用vue-router开发单页应用 ...

（饿了么商家点餐页面Vue实战项目）总结

zZ_Terry25的博客

07-24

702

一、vue版本2.9.6

h5外卖源码php_H5仿抖音界面开发

weixin_39640573的博客

12-24

918

本文章介绍的是使用H5前端开发一款移动端应用，该应用界面仿照了抖音软件，本页面目前简单实现了图片上传功能。后续有时间将陆续实现功能，源码已打包，有兴趣的可以下载看看，成品如下图：html代码：<html> <head> <meta charset="utf-8"> <title>视频APPtitle> <me...

外卖系统web界面设计包括排序筛选搜索 html代码

06-07

好的，以下是一个简单的外卖系统 web 界面的 HTML 代码示例，包括排序、筛选和搜索功能： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>外卖系统</title> <style> /* 样式设置 */ .container { width: 1200px; margin: 0 auto; } .header { height: 80px; background-color: #ccc; } .menu { float: left; width: 20%; height: 600px; background-color: #eee; } .content { float: left; width: 80%; height: 600px; background-color: #fff; } .item { width: 30%; height: 200px; margin: 10px; float: left; border: 1px solid #ccc; padding: 10px; box-sizing: border-box; } .search { margin-top: 20px; } .search input { width: 200px; height: 30px; border: 1px solid #ccc; padding: 5px; font-size: 16px; box-sizing: border-box; } .search button { height: 32px; background-color: #f60; color: #fff; border: none; padding: 5px 20px; font-size: 16px; cursor: pointer; box-sizing: border-box; } </style> </head> <body> <div class="container"> <div class="header">  </div> <div class="menu">  <h3>菜系</h3> <ul> <li>川菜</li> <li>粤菜</li> <li>湘菜</li> </ul> <h3>口味</h3> <ul> <li>辣的</li> <li>酸的</li> <li>甜的</li> </ul> <h3>食材</h3> <ul> <li>鸡肉</li> <li>牛肉</li> <li>猪肉</li> </ul> </div> <div class="content">  <div class="search">  <input type="text" placeholder="请输入关键字"> <button>搜索</button> </div> <div class="sort">  <label for="sort">排序：</label> <select id="sort"> <option value="price">价格</option> <option value="sales">销量</option> </select> <label for="filter">筛选：</label> <select id="filter"> <option value="cuisine">菜系</option> <option value="taste">口味</option> <option value="ingredient">食材</option> </select> <input type="text" placeholder="请输入筛选条件"> <button>筛选</button> </div> <div class="items">  <div class="item"> <h3>麻辣烫</h3> <p>销量：100</p> <p>价格：10元</p> </div> <div class="item"> <h3>红烧肉</h3> <p>销量：80</p> <p>价格：20元</p> </div> <div class="item"> <h3>宫保鸡丁</h3> <p>销量：120</p> <p>价格：15元</p> </div> </div> </div> </div> </body> </html> ``` 这个示例中，采用了一个简单的布局，包括一个顶部导航栏、一个左侧菜单栏、一个商品列表和一个搜索框。在商品列表中，使用了一个简单的排序和筛选功能，可以按照价格和销量进行排序，以及按照菜系、口味和食材进行筛选。同时，搜索框可以根据关键字进行搜索。