请生成外卖订餐系统的前端实现
时间: 2023-11-18 09:04:14 浏览: 34
好的,以下是一个简单的外卖订餐系统前端实现的代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>外卖订餐系统</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>外卖订餐系统</h1>
<p>请选择您想要订购的菜品:</p>
<form>
<div>
<label for="food1">炸鸡套餐</label>
<input type="checkbox" id="food1" name="food" value="炸鸡套餐">
<span>¥28</span>
</div>
<div>
<label for="food2">牛肉拉面</label>
<input type="checkbox" id="food2" name="food" value="牛肉拉面">
<span>¥18</span>
</div>
<div>
<label for="food3">手抓饼</label>
<input type="checkbox" id="food3" name="food" value="手抓饼">
<span>¥5</span>
</div>
<div>
<label for="food4">水饺</label>
<input type="checkbox" id="food4" name="food" value="水饺">
<span>¥10</span>
</div>
<div>
<label for="food5">烤串</label>
<input type="checkbox" id="food5" name="food" value="烤串">
<span>¥2/串</span>
</div>
<p>请选择配送地址:</p>
<div>
<label for="address1">北京市海淀区中关村大街1号</label>
<input type="radio" id="address1" name="address" value="北京市海淀区中关村大街1号">
</div>
<div>
<label for="address2">上海市浦东新区陆家嘴环路1000号</label>
<input type="radio" id="address2" name="address" value="上海市浦东新区陆家嘴环路1000号">
</div>
<div>
<label for="address3">广州市天河区珠江新城华夏路100号</label>
<input type="radio" id="address3" name="address" value="广州市天河区珠江新城华夏路100号">
</div>
<p>请输入您的联系电话:</p>
<input type="tel" name="phone" placeholder="请输入您的联系电话">
<button type="submit">提交订单</button>
</form>
</body>
</html>
```
这段代码实现了一个简单的外卖订餐系统前端界面,包括菜品选择、配送地址选择和联系电话输入等功能。用户可以在界面中选择自己喜欢的菜品,并选择配送地址和输入联系电话,最后提交订单。