web前端大作业--美团外卖1

文章目录

    • 概述
    • 代码
    • 截图
    • 代码链接

概述

web美团 登录和注册功能、页面展示。

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="main"><div class="main-left"><div class="main-left-content"><!-- 坐标的列表 --><ul><li><img src="images/美食.png" alt=""><span class="select">美食</span><i></i></li><li><img src="images/外卖.png" alt=""><span class="select"><a href="order.html">外卖</a></span><i></i></li><li><img src="images/酒店.png" alt=""><span class="select">酒店</span><i></i></li><li><img src="images/民宿.png" alt=""><span class="select">猫眼电影</span><i></i></li><li><img src="images/民宿1.png" alt=""><span class="select">民宿</span><i></i></li><li><img src="images/机票.png" alt=""><span class="select">机票</span><span>/</span><span class="select">火车票</span><i></i></li><li><img src="images/休闲娱乐.png" alt=""><span class="select">休闲娱乐</span><span>/</span><span>KTV</span><i></i></li><li><img src="images/服务.png" alt=""><span class="select">生活服务</span><i></i></li><li><img src="images/丽人.png" alt=""><span class="select">丽人</span><span>/</span><span class="select">美发</span><span>/</span><span class="select">医学美容</span><i></i></li><li><img src="images/结婚.png" alt=""><span class="select">结婚</span><span>/</span><span class="select">婚纱摄影</span><span>/</span><span class="select">婚宴</span><i></i></li><li><img src="images/亲子.png" alt=""><span class="select">亲子</span><span>/</span><span class="select">儿童乐园</span><span>/</span><span class="select">幼教</span><i></i></li><li><img src="images/运动.png" alt=""><span class="select">运动健身</span><span>/</span><span class="select">健身中心</span><i></i></li><li><img src="images/家装.png" alt=""><span class="select">家装</span><span>/</span><span class="select">建材</span><span>/</span><span class="select">家居</span><i></i></li><li><img src="images/学习.png" alt=""><span class="select">学习培训</span><span>/</span><span class="select">音乐培训</span><i></i></li><li><img src="images/医疗.png" alt=""><span class="select">医疗健康</span><span>/</span><span class="select">宠物</span><span>/</span><span class="select">爱车</span><i></i></li><li><img src="images/酒吧.png" alt=""><span class="select">酒吧</span><span>/</span><span class="select">密室逃脱</span><i></i></li></ul></div></div><!-- 中间展示 --><div class="main-middle"><div class="main-middle-content"><div class="main-middle-content-top"><!-- <div class="main-main-content-top-left"><div class="main-main-content-top-left-prev"></div><div class="main-main-content-top-left-next">啊伟大伟大</div></div> --><!-- <div class="main-main-content-top-right">啊伟大伟大</div> --></div><!-- <div class="main-middle-content-foot"><div class="main-middle-content-foot-left">你好</div><div class="main-middle-content-foot-middle">hello</div><div class="main-middle-content-foot-right">....</div></div> --></div></div><!-- 展示的右边 --><div class="main-right"><div class="main-right-content"><div class="main-right-content-top"><div class="main-right-content-top-img"></div><div class="main-right-content-top-content">Hi !你好</div><div class="main-right-content-top-login"><a href="register.HTML">注册</a></div><div class="main-right-content-top-register"><a href="login.html">登录</a></div></div><div class="main-right-content-foot"><div class="main-right-content-foot-2D"></div><div class="main-right-content-foot-content"><p>美团APP手机版</p><span class="money">1元起</span><span>吃喝玩乐</span></div></div></div></div>
</div>
</body>
</html>
    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>登录</title><link rel="shortcut icon" href="images/camera.ico"><link rel="stylesheet" href="css/login.css"><link rel="stylesheet" href="css/footer.css">
</head>
<body>
<!--头部-->
<div id="header"><!--头部中间信息--><div class="h_center"><img src="images/logo.png" alt=""><p>欢迎来到点单系统:请先登录!</p></div>
</div><!--中部-->
<div id="login_body"><div class="login_b_center"><div class="login_bg"><h1>密码登录</h1><form action="#" id="login">
<!--                //用户名--><div class="userName"><span></span><input type="text" value="账户"></div>
<!--                //密码--><div class="password"><span></span><input type="password" ></div>
<!--                //登录按钮--><div class="login_btn"><a href="index.html"><input type="button" value="登录"></a></div><div class="forgot_password"><a href="">忘记密码</a><a href="register.html">注册账号</a><a href="1.0/index.html">帮助</a></div></form></div></div>
</div><!--尾部-->
<div id="footer"><div class="link"><a href="">关于我们</a>|<a href="">联系我们</a>|<a href="">商家入驻</a>|<a href="">友情链接</a>|</div><div class="copyright">版权所属 网络</div>
</div>
</body>
</html>

注册

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>注册</title><link rel="stylesheet" href="css/register.css"><link rel="shortcut icon" href="images/camera.ico"><script src="js/register.js"></script>
</head>
<body>
<!--头部-->
<div id="reg_header"><div class="reg_h_center"><div class="reg_h_left"><img src="images/logo.png" alt=""><h3>欢迎注册</h3></div></div>
</div><!--表单内容-->
<div class="reg_back"><div class="reg_left"><p>新用户注册</p><p>USER REGISTER</p></div><div class="reg_center"><div class="reg_form"><form action="#" method="post"><table><tr><td class="td_left"><label for="username">用户名</label></td><td class="td_right"><input type="text" name="username" placeholder="请输入用户名"id="username"></td></tr><tr><td class="td_left"><label for="password">密码</label></td><td class="td_right"><input type="password" name="password" placeholder="请输入密码"id="password"></td></tr><tr><td class="td_left"><label for="Email">Email</label></td><td class="td_right"><input type="email" name="email" placeholder="请输入Email" id="Email"></td></tr><tr><td class="td_left"><label for="rename">姓名</label></td><td class="td_right"><input type="text" name="rename" placeholder="请输入真实姓名" id="rename"></td></tr><tr><td class="td_left"><label for="Telphone">手机号</label></td><td class="td_right"><input type="text" name="telphone" placeholder="请输入您的手机号"id="Telphone"></td></tr><tr><td class="td_left"><label>性别</label></td><td class="td_right"><input type="radio" name="gender" value="male" checked><input type="radio" name="gender" value="female"></td></tr><tr><td class="td_left"><label for="Birthday">出生日期</label></td><td class="td_right"><input type="date" name="birthday" id="Birthday"></td></tr><tr><td class="td_left"><label for="checkcode">验证码</label></td><td class="td_right"><input type="text" name="checkcode" id="checkcode"><img src="images/check_code.png" id="img_check"></td><!-- 10.png为验证码图片 --></tr><tr><td colspan="2" align="center"><input type="submit" value="注册" id="btn_sub" onclick="onshow()"></td></tr></table></form></div></div><div class="reg_right"><p>已有账号?<a href="login.html">立即登录</a></p></div>
</div>
<!-- 采用的jsp代码 ,函数调用--><script>function onshow(){alert("注册成功");}
</script>
</body>
</html>

截图

在这里插入图片描述

在这里插入图片描述在这里插入图片描述
在这里插入图片描述

代码链接

链接: https://pan.baidu.com/s/1c-7nDlgn_I5AektDwkVaHg?pwd=cuii 提取码: cuii
–来自百度网盘超级会员v3的分享

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/35371.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vue组件生命周期深度剖析:从创建到销毁的八大钩子实战指南

系列文章目录 Vue核心指令解析&#xff1a;探索MVVM与数据操作之美 文章目录 系列文章目录前言一、Vue生命周期是什么&#xff1f;二、钩子函数讲解1. beforeCreate( 创建前 )2. created ( 创建后 &#xff09;3. beforeMount&#xff08;挂载前&#xff09;4. mounted&#xf…

Redis-数据类型-Geospatial(地理空间索引)

文章目录 1、查看redis是否启动2、通过客户端连接redis3、切换到db5数据库4、将地理位置信息&#xff08;经度和纬度&#xff09;添加到 Redis 的键&#xff08;key&#xff09;中4.1、添加大江商厦4.2、添加西部硅谷 5、升序返回有序集key&#xff0c;让分数一起和值返回的结果…

简约的服务器监控工具Ward

什么是 Ward &#xff1f; Ward 是一个简单简约的服务器监控工具。 Ward 支持自适应设计系统。此外&#xff0c;它还支持深色主题。它仅显示主要信息&#xff0c;如果您想查看漂亮的仪表板而不是查看一堆数字和图表&#xff0c;则可以使用它。 Ward 在所有流行的操作系统上都能…

nuxt框架常见配置选项(二)

nuxt.config.js 常见配置 module.exports {head: { title: Nuxt App, meta: [ { charset: utf-8 }, { name: viewport, content: widthdevice-width, initial-scale1 }, // 其他 meta 配置... ], link: [ { rel: icon, type: image/x-icon, href: /favicon.ico } //…

Redis缓存机制详解(数据淘汰策略、缓存击穿、缓存穿透、缓存雪崩)

Redis缓存机制详解 Redis 作为一个高效的内存数据库&#xff0c;常用于缓存系统。 其缓存机制有助于提高数据访问速度、减轻后端数据库压力。 由于 Redis 是基于内存的数据库&#xff0c;内存资源有限&#xff0c;因此需要有合理的数据淘汰策略以管理内存使用。 1. 内存数据淘…

解决chrome浏览器总是将对站点的http访问改为https的问题

问题&#xff1a;vue项目本地运行出来的地址是http开头的&#xff0c;但在chrome浏览器中无法访问&#xff0c;在Edge浏览器就可以&#xff0c;发现是chrome总是自动将http协议升级为https。 已试过的有效的方法&#xff1a; 一、无痕模式下访问 无痕模式下访问不会将http自…

Tkinter PyQt或PySide、Kivy 的区别

选择Python GUI框架时&#xff0c;最好的选择取决于你的具体需求、项目类型以及你对外观和用户体验的期望。这里是一些常用的Python GUI框架&#xff0c;以及它们的优势和劣势&#xff1a; 1. Tkinter 优势&#xff1a; 内置于Python标准库中&#xff0c;无需安装额外的包即可…

java基于ssm+jsp 超市进销存管理系统

1前台首页功能模块 宜佰丰超市进销存管理系统&#xff0c;在系统首页可以查看首页、商品信息、新闻资讯、留言反馈、我的、跳转到后台、购物车等内容&#xff0c;如图1所示。 图1前台首页功能界面图 用户注册&#xff0c;在用户注册页面可以填写用户名、密码、姓名、联系电话、…

代码随想录——跳跃游戏(Leecode55)

题目链接 贪心 class Solution {public boolean canJump(int[] nums) {int cover 0;if(nums.length 1){return true;}// 只有一个元素可以达到for(int i 0; i < cover; i){// 在cover内选择跳跃步数cover Math.max(i nums[i],cover);if(cover > nums.length - 1)…

数据库开发规范

一、引言 数据库开发规范是确保数据库系统稳定性、安全性、可维护性和性能的重要指导原则。本规范旨在明确数据库开发过程中的各项标准&#xff0c;包括命名规范、设计规范、编码规范、安全规范以及性能优化等方面&#xff0c;以指导开发人员和数据库管理员进行高效的数据库开…

出现 defineProps is a compiler macro and no longer needs to be imported. 解决方法

目录 1. 问题所示2. 原理分析3. 解决方法1. 问题所示 执行前端代码的时候,出现如下问题: [@vue/compiler-sfc] defineProps is a compiler macro and no longer needs to be imported.[@vue/compiler-sfc] defineEmits is a compiler macro and no longer needs to be impo…

【排序 队列】1585. 检查字符串是否可以通过排序子字符串得到另一个字符串

本文涉及知识点 排序 队列 LeetCode1585. 检查字符串是否可以通过排序子字符串得到另一个字符串 给你两个字符串 s 和 t &#xff0c;请你通过若干次以下操作将字符串 s 转化成字符串 t &#xff1a; 选择 s 中一个 非空 子字符串并将它包含的字符就地 升序 排序。 比方说&a…

Makefile中strip函数的用法

在Makefile中&#xff0c;strip 函数的作用是去除变量值两端的空白字符&#xff08;空格和制表符&#xff09;。它的基本语法如下&#xff1a; stripped : $(strip variable)其中&#xff0c;variable 是要去除空白字符的变量名或表达式。strip 函数通常用于确保变量的值不包含…

Scikit-learn中的Fit方法:机器学习模型的灵魂

Scikit-learn中的Fit方法&#xff1a;机器学习模型的灵魂 在机器学习的世界里&#xff0c;Scikit-learn&#xff08;简称sklearn&#xff09;是一个广受欢迎的Python库&#xff0c;以其简洁、高效而著称。而在这个库中&#xff0c;fit方法扮演了一个至关重要的角色。本文将深入…

LLM大语言模型-AI大模型全面介绍

简介&#xff1a; 大语言模型&#xff08;LLM&#xff09;是深度学习的产物&#xff0c;包含数十亿至数万亿参数&#xff0c;通过大规模数据训练&#xff0c;能处理多种自然语言任务。LLM基于Transformer架构&#xff0c;利用多头注意力机制处理长距离依赖&#xff0c;经过预训…

政策护航新能源:政策红利激发行业活力,助推绿色经济腾飞

随着全球气候变化问题日益严重&#xff0c;新能源行业的发展成为推动绿色经济腾飞的重要引擎。近年来&#xff0c;各国政府纷纷出台政策支持新能源产业&#xff0c;旨在激发行业活力&#xff0c;促进经济可持续发展。本文将从政策红利的角度&#xff0c;探讨新能源行业发展的现…

什么是CMSIS || 标准库与HAL库

一&#xff0c;ARM&#xff08;Cortex Microcontroller Software Interface Standard&#xff09; ARM Cortex™ 微控制器软件接口标准&#xff08;Cortex Microcontroller Software Interface Standard&#xff09;是 CortexM 处理器系列的与供应商无关的硬件抽象层。…

docker的安装配置及使用

一.Docker的由来 Docker 最初是 dotCloud 公司创始人Solomon Hykes 在法国期间发起的一个公司内部项目。 2010年的专门做PAAS平台&#xff0c;但是到了2013年的时候&#xff0c;像亚马逊&#xff0c;微软&#xff0c;Google都开始做PAAS平台。 到了2013年&#xff0c;公司资金链…

空调器的铜管

1)、 全新开发的空调器&#xff0c;在钣金、塑料件结构方案设计的同时&#xff0c;进行配管结构设计,充分考虑整体空间的合理分配&#xff0c;以避免配管设计在其它结构方案确定之后&#xff0c;只局限在有限的空间内进行。 2)、 制冷系统以外的结构件已定型的产品&#xff0c…

仿真模拟--静态浮动路由

目录 静态路由 浮动路由 静态路由 浮动路由