html 外卖（可以随意改名）平台登录界面+ 点单界面

已于 2024-01-26 17:32:17 修改
阅读量1.2k 收藏 12
点赞数 34
文章标签： css css3 javascript
于 2024-01-26 17:09:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_62428951/article/details/135870871
版权

代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>外卖网页</title>

    <style>

        body {

            font-family: Arial, sans-serif;

            margin: 0;

            padding: 0;

            background-color: #f4f4f4;

        }

        header {

            background-color: #333;

            color: #fff;

            text-align: center;

            padding: 1em 0;

        }

        section {

            padding: 20px;

        }

        .restaurant-list {

            display: flex;

            flex-wrap: wrap;

            justify-content: space-around;

        }

        .restaurant-card {

            width: 300px;

            border: 1px solid #ccc;

            margin: 10px;

            padding: 10px;

            background-color: #fff;

            border-radius: 5px;

            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

        }

        .order-btn {

            display: block;

            width: 100%;

            padding: 10px;

            background-color: #4caf50;

            color: #fff;

            text-align: center;

            text-decoration: none;

            border: none;

            border-radius: 5px;

            cursor: pointer;

        }

        .login-form {

            max-width: 400px;

            margin: 0 auto;

            background-color: #fff;

            padding: 20px;

            border-radius: 5px;

            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

        }

        .form-group {

            margin-bottom: 20px;

        }

        .form-group label {

            display: block;

            margin-bottom: 5px;

        }

        .form-group input {

            width: 100%;

            padding: 8px;

            box-sizing: border-box;

            border: 1px solid #ccc;

            border-radius: 3px;

        }

        .login-btn {

            display: block;

            width: 100%;

            padding: 10px;

            background-color: #333;

            color: #fff;

            text-align: center;

            text-decoration: none;

            border: none;

            border-radius: 5px;

            cursor: pointer;

        }

    </style>

</head>

<body>

    <header>

        <h1>外卖服务</h1>

    </header>

   

    <section>

        <h2>个人登录</h2>

        <div class="login-form">

            <div class="form-group">

                <label for="phone">手机号：</label>

                <input type="tel" id="phone" placeholder="请输入手机号">

            </div>

            <div class="form-group">

                <label for="password">密码：</label>

                <input type="password" id="password" placeholder="请输入密码">

            </div>

            <button class="login-btn" οnclick="login()">登录</button>

        </div>

    </section>

    <section>

        <h2>选择餐馆</h2>

        <div class="restaurant-list">

            <div class="restaurant-card">

                <h3>餐馆1</h3>

                <p>提供美味的食物</p>

                <button class="order-btn" οnclick="orderFood('餐馆1')">立即订购</button>

            </div>

            <div class="restaurant-card">

                <h3>餐馆2</h3>

                <p>新鲜、健康的食品</p>

                <button class="order-btn" οnclick="orderFood('餐馆2')">立即订购</button>

            </div>

            <!-- 添加更多餐馆卡片 -->

        </div>

    </section>

    <section>

        <h2>订单信息</h2>

        <div id="order-info"></div>

    </section>

    <script>

        function login() {

            // 在这里添加登录处理逻辑，例如验证用户输入

            // 这里只是一个简单的示例，没有真正的身份验证

            alert("登录成功！");

            redirectToOrderPage();

        }

        function redirectToOrderPage() {

    // 在这里添加重定向逻辑，直接跳转到指定页面

    window.location.href = "file:///C:/科技/登陆后.html";

}

        function orderFood(restaurantName) {

            // 这里可以添加订单处理逻辑，例如向服务器发送请求

            // 在这个简单示例中，我们只是在页面上显示订单信息

            const orderInfoDiv = document.getElementById('order-info');

            orderInfoDiv.innerHTML = `<p>您已成功订购${restaurantName}的美味食物！</p>`;

        }

    </script>

</body>

</html>

请注意，path/to/your/order/page.html应该被替换为实际的订单页面路径。

登录后点单页面代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>外卖网页</title>

    <style>

        body {

            font-family: Arial, sans-serif;

            margin: 0;

            padding: 0;

            background-color: #f4f4f4;

        }

        header {

            background-color: #333;

            color: #fff;

            text-align: center;

            padding: 1em 0;

        }

        section {

            padding: 20px;

        }

        .restaurant-list {

            display: flex;

            flex-wrap: wrap;

            justify-content: space-around;

        }

        .restaurant-card {

            width: 300px;

            border: 1px solid #ccc;

            margin: 10px;

            padding: 10px;

            background-color: #fff;

            border-radius: 5px;

            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

        }

        .order-btn {

            display: block;

            width: 100%;

            padding: 10px;

            background-color: #4caf50;

            color: #fff;

            text-align: center;

            text-decoration: none;

            border: none;

            border-radius: 5px;

            cursor: pointer;

        }

    </style>

</head>

<body>

    <header>

        <h1>外卖服务</h1>

    </header>

   

    <section>

        <h2>选择餐馆</h2>

        <div class="restaurant-list">

            <div class="restaurant-card">

                <h3>餐馆1</h3>

                <p>提供美味的食物</p>

                <button class="order-btn" οnclick="orderFood('餐馆1')">立即订购</button>

            </div>

            <div class="restaurant-card">

                <h3>餐馆2</h3>

                <p>新鲜、健康的食品</p>

                <button class="order-btn" οnclick="orderFood('餐馆2')">立即订购</button>

            </div>

            <!-- 添加更多餐馆卡片 -->

        </div>

    </section>

    <section>

        <h2>订单信息</h2>

        <div id="order-info"></div>

    </section>

    <script>

        function orderFood(restaurantName) {

            // 这里可以添加订单处理逻辑，例如向服务器发送请求

            // 在这个简单示例中，我们只是在页面上显示订单信息

            const orderInfoDiv = document.getElementById('order-info');

            orderInfoDiv.innerHTML = `<p>您已成功订购${restaurantName}的美味食物！</p>`;

        }

    </script>

</body>

</html>

冷色单调
关注
  • 34
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html+外卖+点餐+平台+界面
08-17
html+外卖+点餐+平台+界面
基于JavaWeb的在线外卖系统平台设计
毕业作品网站
07-14 2181
本项目旨在为买家与卖家搭建一个在线食品交易平台，既能帮助不方便出门的顾客购买食物，又能帮助食品实体店的店家通过本平台赚钱。通过天黑黑外卖系统卖家可以发布各种各样食品的信息（价格、简介、图片等），买家可以通过浏览店铺或者搜索菜名找到心仪的食品并下单购买。管理员可对用户信息进行查看和管理；管理员对商家进行查看和管理；数据库建表，服务器平台搭建，网页界面设计。用户修改个人信息，电话，送餐地址，密码等。用户登录，包括商家、用户。
java图形界面swing 连接sql server数据库 实现外卖点餐系统（适用于课设、大作业）
weixin_46671666的博客
01-04 7841
因学校课设要求，在前段时间完成了一个Java Swing图形界面实现的外卖点餐系统，该系统连接SQL server数据库，下面详细讲述该系统： 一、数据库的字段表贴图，方便大家阅读理解该系统： 1、顾客表： 2、派送表： 3、派送单与顾客产生的关系表： 4、订单细节表： 5、评价表： 6、原料表： 7、菜单表： 8、订单表： 9、购买表： 10、商家表： 11、供应商表： 12、供应表： 二、外卖点餐系统结构： 1、用户登录界面 2、用户注册界面 3、管理员登录界面 4、用户首
大学生网页设计制作作业实例代码 (全网最全,建议收藏) HTML+CSS+JS
热门推荐
HTML网页设计
10-03 21万+
临近期末，大一新生的各种考试和专业结课作业纷至沓来。web实训大作业、网页期末作业、web课程与设计、网页设计等，简直让人头大。你还在为网页设计老师的作业要求感到头大？网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求, 废话不多说，直接看效果。📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确
瑞吉外卖项目1 + 源码
lwj_07的博客
09-14 2万+
效果展示：软件开发整体介绍： 注1：这里是把项目中所用到的所有的表都放入到db_reggie.sql文件当中了，我们只需要向reggie库中导入该.sql文件即可把该项目所用到的所有的表导入到该reggie库当中了。注2：注意该.sql文件不要放在中文的目录下，因为放在中文目录下的话会导入表失败。通过上面的操作点击开始后，就能把.sql文件中的所有表结构和数据创建导入成功了（刷新一下）：对上面各个表解释：创建的是maven形式的项目格式： 项目创建好之后，一定要注意检查项目的编码、项目maven仓
Android仿美团外卖菜单界面
08-26
主要为大家详细介绍了Android仿美团外卖菜单界面，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
基于SpringBoot+Mybatis-Plus的仿美团外卖点单系统源码+数据库（毕设）.zip
02-03
基于SpringBoot+Mybatis-Plus的仿美团外卖点单系统源码+数据库（毕设）.zip 已获导师指导并通过的高分项目，下载即用无需修改。 基于SpringBoot+Mybatis-Plus的仿美团外卖点单系统源码+数据库（毕设）.zip 已获...
ios-外卖点单界面.zip
07-11
模仿美团外卖点餐功能，主要在于处理cell重用问题
CSS浮动（CSS从入门到精通学习第四天）
m0_49067926的博客
05-22 1052
圆角边框、盒子阴影、CSS浮动、浮动特性、清除浮动
css实现图片边缘模糊效果
工作中遇到问题记录
05-22 264
css实现图片边缘模糊效果
前端已死? Bootstrap--CSS&组件
金灰的博客
05-14 1162
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多。通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。(这里的屏幕大小 是为了在前端显示的时候更好看,显示的更全.)用的时候href引用一下就行(link标签)( - 后面可加数字,总共12份就行.)--分的份数加起来是12就行了.v5--里面的图标更多.
scss 的基本使用
新疆程序员阿达西的博客
05-23 642
SCSS（Sassy CSS）是Sass（Syntactically Awesome Stylesheets）的一种语法，是对CSS的扩展。它提供了变量、嵌套规则、混合（mixins）、继承等功能，使得CSS开发更加高效和维护更加方便。本文将介绍SCSS的基本使用方法，适合初学者入门。SCSS通过提供变量、嵌套、混合、继承等高级特性，大大提升了CSS的可维护性和开发效率。通过合理使用这些特性，你可以写出更加简洁、可读和可复用的样式代码。
前端 CSS 经典：filter 滤镜
weixin_64684095的博客
05-17 444
什么叫滤镜呢，就是把元素里的。
百度页面奔跑的白熊html、css
2302_80141844的博客
05-16 1052
用keyframes定义动画（类似定义类选择器）@keyframes动画名称{0%{100%{
HTML+CSS+JS简易计算器
2201_75813676的博客
05-18 404
index.css idnex.js 运行结果
前端学习CSS-2
Kongfutu的博客
05-20 140
盒子模型盒子模型相关属性一些盒子模型的样式示例。
解决vite打包只生成了一个css和js文件问题
最新发布
@必意玲
05-23 326
这样肯定是不行的，因为这样这个文件的包大小很大，第一次访问会。今天整了一个项目，试了下打包，发下打包后只生成了。我看了我的页面路由代码，果然是这样引入的。原因是因为这种写法是路由懒加载（已经根据页面分js和css了。
CSS表单样式
qq_41807399的博客
05-19 849
表单中可以设置CSS文本框，包括边框，背景，补白，大小，输入字体样式，圆角，阴影等样式。
用html写一个外卖登录界面
06-01
以下是一个简单的外卖系统登录界面的HTML代码： ``` <!DOCTYPE html> <html> <head> <title>外卖系统登录</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> form { display: flex; flex-direction: column; align-items: center; padding: 20px; border: 1px solid #ccc; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); } input[type=text], input[type=password] { padding: 10px; margin: 10px 0; border: none; border-radius: 3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); } button { padding: 10px; margin: 10px 0; background-color: #4CAF50; color: white; border: none; border-radius: 3px; cursor: pointer; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); } button:hover { background-color: #3e8e41; } a { color: #4CAF50; text-decoration: none; } a:hover { text-decoration: underline; } </style> </head> <body> <form> <h2>外卖系统登录</h2> <label for="username">用户名：</label> <input type="text" id="username" name="username" placeholder="请输入用户名" required> <label for="password">密码：</label> <input type="password" id="password" name="password" placeholder="请输入密码" required> <button type="submit">登录</button> <p>还没有账号？<a href="register.html">立即注册</a></p> <p><a href="#">忘记密码？</a></p> </form> </body> </html> ``` 以上代码使用了HTML和CSS语言，实现了一个简单的外卖系统登录界面。其中包含一个表单、两个输入框、两个按钮和两个链接。用户可以通过输入用户名和密码来登录系统，也可以点击注册按钮跳转到注册页面。同时也提供了忘记密码的链接，方便用户找回密码。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值