html+外卖+点餐+平台+界面_点餐菜单html资源-CSDN文库

共155个文件

jpg：59个

gif：43个

png：23个

16 浏览量 2023-08-17 11:12:00 上传评论 1 收藏 2.46MB RAR 举报

HTML（HyperText Markup Language）是构建网页的基础语言，用于描述网页的结构和内容。在这个“html+外卖+点餐+平台+界面”的项目中，我们可以理解为使用HTML技术来开发一个外卖点餐平台的前端界面。这个平台可能包括用户浏览菜单、选择菜品、下单支付、查看订单状态等功能。我们需要了解HTML的基本结构。HTML文档通常由一系列的元素组成，这些元素以标签对的形式存在，如`<html>`, `<head>`, `<body>`等。`<head>`部分包含了页面元信息，如标题（`<title>`），而`<body>`则包含了用户可见的内容。在创建外卖点餐界面时，我们可能需要用到以下HTML元素： 1. **表格（`<table>`）**：用于展示菜单，可以清晰地排列菜品名称、图片、价格等信息。 2. **列表（`<ul>`和`<li>`）**：展示分类菜单，比如菜品类别或者商家推荐。 3. **按钮（`<button>`）**：用于提交订单、添加或减少菜品数量。 4. **表单（`<form>`）**：用户输入配送地址、联系方式等信息。 5. **图像（`<img>`）**：显示菜品图片，增加视觉吸引力。 6. **链接（`<a>`）**：指向商家详情页或者其他相关页面。 7. **段落和标题（`<p>`和`<h1>`-`<h6>`）**：用于介绍商家信息、菜品描述等。 8. **输入框（`<input>`）**：收集用户数据，如搜索关键词、数量选择等。此外，为了实现动态交互，我们还需要配合CSS（Cascading Style Sheets）来美化界面，设置布局和样式，以及JavaScript来处理用户的交互行为，如验证表单、更新页面内容等。例如，使用JavaScript可以实现菜品数量的加减功能，或者当用户点击某个菜品时，实时显示菜品的详细信息。在实际开发过程中，我们还可能需要考虑响应式设计，确保界面在不同设备上（如手机、平板、电脑）都能良好显示。这可以通过使用媒体查询（`@media`）和Bootstrap等框架来实现。对于一个完整的外卖点餐平台，后端接口的调用也是必不可少的。前端通过发送HTTP请求（如GET、POST）与服务器进行数据交换，如获取菜品列表、提交订单等。这需要掌握AJAX（Asynchronous JavaScript and XML）技术，虽然标签中没有明确提到，但它是现代Web应用中实现前后端分离的重要手段。 "html+外卖+点餐+平台+界面"的项目涵盖了HTML基础、交互设计、响应式布局、前后端交互等多个知识点，需要开发者具备扎实的HTML功底，并且熟悉JavaScript和CSS等相关技术。通过这个项目，开发者不仅可以提升自身的前端技能，还能更好地理解和实践Web应用的开发流程。

资源推荐

资源详情

资源评论

收起资源包目录

html+外卖+点餐+平台+界面（155个子文件）

main.css 17KB

Thumbs.db 317KB

xj.gif 24KB

time.gif 16KB

33.gif 12KB

dl_03.gif 10KB

j_03.gif 8KB

j_06.gif 6KB

h_11.gif 4KB

h_03.gif 4KB

reg.gif 4KB

li.gif 4KB

b_05.gif 4KB

qa.gif 3KB

about.gif 3KB

l_03.gif 3KB

tel.gif 3KB

s_03.gif 3KB

a_07.gif 3KB

l_13.gif 3KB

new_01.gif 3KB

lo_03.gif 3KB

l_15.gif 3KB

t_07.gif 3KB

h_14.gif 2KB

m_03.gif 2KB

t_03.gif 2KB

h_18.gif 2KB

h_20.gif 2KB

a_03.gif 2KB

r_03.gif 2KB

ic_03.gif 2KB

h_06.gif 2KB

h_16.gif 2KB

l_08.gif 1KB

m_07.gif 1KB

b_03.gif 1KB

sp.gif 1KB

l_10.gif 1KB

l_19.gif 1KB

in_01.gif 1KB

m_18.gif 1KB

ico_09.gif 1KB

l_07.gif 1KB

l_y.gif 1KB

index.html 15KB

dc.html 12KB

admin.html 11KB

reg.html 9KB

订单中心.html 9KB

dingcan.html 9KB

yg.html 8KB

lights.html 8KB

xq.html 8KB

new_list.html 8KB

jifen.html 8KB

qianggou.html 8KB

detailed.html 7KB

nickname.html 7KB

add.html 7KB

phone.html 7KB

password.html 7KB

about.html 7KB

ztzd.html 7KB

gszd.html 7KB

details.html 6KB

help.html 6KB

ad3.jpg 410KB

ad1.jpg 250KB

ad2.jpg 235KB

zt.jpg 136KB

1.jpg 129KB

co_01.jpg 115KB

lo.jpg 79KB

ab.jpg 79KB

q_bj.jpg 75KB

xj.jpg 70KB

banner_ad.jpg 50KB

light.jpg 43KB

b_06.jpg 33KB

logo.jpg 33KB

hot_day.jpg 25KB

cart3.jpg 20KB

cart1.jpg 16KB

cart_index.jpg 16KB

right_help.jpg 15KB

yg.jpg 14KB

nav_sel.jpg 12KB

p3.jpg 12KB

new.jpg 11KB

p1.jpg 10KB

nav_s2.jpg 9KB

avatar.jpg 9KB

clock_footer.jpg 9KB

top_jifen.jpg 9KB

nav_bottom.jpg 9KB

look.jpg 9KB

concat_footer.jpg 9KB

top_cart.jpg 8KB

共 155 条

<!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>点伴</title> <link href="styles/main.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/jquery.1.4.2-min.js"></script> <script type="text/javascript" src="js/header.js"></script> <script type="text/javascript" src="js/index_ad.js"></script>  <script language=javascript>  </script>  <script type="text/javascript"> function FloatMenu(){ var animationSpeed=1500; var animationEasing='easeOutQuint'; var scrollAmount=$(document).scrollTop(); var newPosition=menuPosition+scrollAmount; if($(window).height()<$('#fl_menu').height()+$('#fl_menu .wddc').height()){ $('#fl_menu').css('top',menuPosition); } else { $('#fl_menu').stop().animate({top: newPosition}, animationSpeed, animationEasing); } } $(window).load(function(){ menuPosition=$('#fl_menu').position().top; FloatMenu(); }); $(window).scroll(function(){ FloatMenu(); }); $(document).ready(function(){ var fadeSpeed=500; $("#fl_menu").hover(function(){ $("#fl_menu .wddc").fadeIn(fadeSpeed); },function(){ $("#fl_menu .wddc").fadeOut(fadeSpeed); }); }); </script>  </head> <body> <div id="top-bar"> <div id="header"> <div style="width:1000px"> <div class="h_left"> <div class="text_l"></div> <div class="text_c"> <div><img src="images/avatar.jpg" width="20" height="20" /></div> <ul class="top_nav"> <li><a href="#">mylg 您好！</a></li> <li class="jifen"><a href="#">当前积分:800</a> | </li> <li class="ico_01"><a href="#">我的午餐</a> <span><a href="#">我的午餐</a><a href="#">我的午2餐我的午餐</a><a href="#">我的午餐</a></span> </li> </ul> <div class="clear"></div> </div> <div class="text_r"></div> <div class="clear"></div> </div> <div class="h_right"> <a href="">设为首页</a> | <a href="">收藏此页</a> | <a href="login.html">登录</a> | <a href="reg.html">注册</a> | <a href="help.html">帮助中心</a> </div> <div class="clear"></div> </div> </div> <div id="top"> <div class="logo"><a href="index.html"><img src="images/logo.jpg" width="134" height="78" /></a></div> <div class="time"></div> <div class="countdown"> <span class="hour red">00</span>时 <span class="minute red">00</span>分 <span class="second red">00</span>秒 </div> </div> <div class="nav"> <div class="navc"> <ul class="menu"> <li class="index"><a href="index.html" ></a> <span><a href="dc.html">我要点餐</a><a href="gszd.html">公司制定</a><a href="ztzd.html">组团制定</a><a href="yg.html">菜品预告</a></span></li> <li class="activity"><a href="qianggou.html"></a> <span><a href="qianggou.html">抢饭活动</a><a href="jifen.html">积分商城</a></span></li> <li class="user"><a href="admin.html"></a> <span><a href="login.html">会员登陆</a><a href="reg.html">会员注册</a><a href="admin.html">个人中心</a></span></li> <li class="about"><a href="about.html"></a> <span><a href="intro.html">点伴介绍</a><a href="dt.html">公司动态</a><a href="zlbz.html">质量保证</a><a href="contact.html">联系方式</a></span></li> </ul> <input type="text" class="nav_s1" value="请输入关键字"> <input type="button" class="nav_s2"> </div> <div class="navr"></div> <div class="clear"></div> <div class="tel"><img src="images/tel.gif" /></div> <div id="gpr"></div>  <div id="fl_menu"> <div class="label"><img src="images/mc.png" width="46" height="127" /></div> <div class="wddc"> <img src="images/cart1.jpg" width="172" height="35" /> <div class="mid"> <table width="100%" border="0" cellspacing="0" cellpadding="0" class="line" style="color:#e70012; font-weight:bold"> <tr> <td width="57%">菜名</td> <td width="19%" align="center">单价</td> <td width="18%" align="center">数量</td> <td width="6%" align="center"> </td> </tr> </table> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="57%">红烧排骨饭</td> <td width="18%" align="center">15</td> <td width="16%" align="center">1</td> <td width="9%" align="center"><img src="images/m_07.gif" /></td> </tr> </table> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="57%">红烧排骨饭</td> <td width="18%" align="center">15</td> <td width="16%" align="center">1</td> <td width="9%" align="center"><img src="images/m_07.gif" /></td> </tr> </table> </div> <div class="bottom"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="center">合计：￥15.00</td> </tr> <tr> <td align="center"><input name="" type="image" src="images/a_07.gif" /></td> </tr> </table> </div> </div> </div>  </div>  </div>  <div id="wrap"> <div class="index_ad"> <a href="#"><img src="images/ad1.jpg"></a> <a href="#"><img src="images/ad1.jpg"></a> <a href="#"><img src="images/ad1.jpg"></a> <div class="index_ad_left loff"></div> <div class="index_ad_right ron"></div> </div> <div class="index_ad_bt"> <img src="images/ad_on.jpg" class="_middle"> <img src="images/ad_off.jpg" class="_middle"> <img src="images/ad_off.jpg" class="_middle"> </div> <div class="xj"> <img src="images/xj.gif" class="_middle"> <input type="text" name="username" class="username"> <input type="password" name="userpwd" class="userpwd"> <a href="" class="inlineblock login"><img src="images/lo_03.gif" width="107" height="30" /></a> <div class="reg_forg"> <a href="reg.html">注册</a> | <a href="">忘记密码</a> </div> </div> <div><img src="images/hot_day.jpg" border="0" usemap="#Map"> <map name="Map" id="Map"> <area shape="rect" coords="937,9,998,37" href="dc.html" /> </map> </div>  <div class="section"> <ul class="clearfix"> <li> <div class="photo"><img src="images/1.jpg" width="235" height="312" /></div> <div class="rsp"></div> <div class="text"> <div class="new"></div> <div style="padding:10px; height:225px;"> <a href="detailed.html"><h3>排骨+米饭+例汤</h3></a> <span>推荐指数：</span> <p>食材配料：食材配料食材配料食材配料食材配料食材配料食材配料食材配料</p> </div> <div class="price">15.00￥</div> <div class="buy_add"> <div class="ico_02">还剩20份</div> <div class="add"><a href="#"><img src="images/cart_index.jpg" /></a></div>

评论收藏

内容反馈