html 外卖（可以随意改名）平台登录界面+ 点单界面
以下是一个简单的外卖平台登录界面和点单界面的HTML示例代码。请注意，这只是一个起点，您可以根据需要添加更多功能和样式。
登录界面 (login.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外卖平台登录</title>
</head>
<body>
<h1>外卖平台登录</h1>
<form action="dashboard.html">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required>
<label for="password">密码:</label>
<input type="password" id="password" name="password" required>
<button type="submit">登录</button>
</form>
</body>
</html>点单界面 (dashboard.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外卖点单</title>
<style>
.food-item {
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 10px;
}
.food-item h3 {
margin: 0;
padding: 0;
}
.food-item .price {
font-weight: bold;
color: #ca0000;
}
</style>
</head>
<body>
<h1>外卖点单</h1>
<div class="food-item">
<h3>香肠炒蛋</h3>
<span class="price">¥ 10.99</span>
<button>加入购物车</button>
</div>
<div class="food-item">
<h3>蚝油芥兰</h3>
<span class="price">¥ 12.99</span>
<button>加入购物车</button>
</div>
<!-- 其他食品列表 -->
</body>
</html>在实际应用中，登录界面应该与后端服务器进行验证，并存储登录状态。点单界面应该根据用户的选择动态更新购物车的内容，并且提交订单时与后端进行数据交互。这里的示例仅展示了静态页面的基础结构。
评论已关闭