校园跑腿外卖html代码
时间: 2024-09-10 14:00:49 浏览: 20
校园跑腿外卖的HTML代码通常包含了一个基本的网页结构,用于展示跑腿服务的列表、下单表单、以及可能的用户反馈部分。下面是一个简单的HTML代码示例,用于创建一个校园跑腿外卖服务页面:
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>校园跑腿外卖服务</title>
<style>
/* 在这里可以添加一些CSS样式,用于美化页面 */
body {
font-family: Arial, sans-serif;
}
.container {
width: 80%;
margin: 0 auto;
}
header, footer {
text-align: center;
padding: 1em;
}
.service-list {
margin-top: 2em;
}
.service-item {
border: 1px solid #ddd;
padding: 1em;
margin-bottom: 1em;
}
.service-item h3 {
margin: 0;
}
.order-form {
margin-top: 2em;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>校园跑腿外卖服务</h1>
</header>
<div class="service-list">
<!-- 跑腿服务列表 -->
<div class="service-item">
<h3>服务一:代购食堂美食</h3>
<p>我们将为您提供校园内所有食堂的美食代购服务。</p>
</div>
<div class="service-item">
<h3>服务二:快递代取</h3>
<p>帮助您在校园内代取快递,节省您的宝贵时间。</p>
</div>
<!-- 更多服务 -->
</div>
<div class="order-form">
<!-- 订单表单 -->
<h2>立即下单</h2>
<form action="/submit-order" method="post">
<label for="name">姓名:</label>
<input type="text" id="name" name="name" required>
<label for="phone">联系电话:</label>
<input type="tel" id="phone" name="phone" required>
<label for="service">选择服务:</label>
<select id="service" name="service">
<option value="food">代购食堂美食</option>
<option value="express">快递代取</option>
</select>
<label for="details">服务细节:</label>
<textarea id="details" name="details" required></textarea>
<button type="submit">提交订单</button>
</form>
</div>
<footer>
<!-- 版权和联系信息 -->
<p>版权所有 © 校园跑腿外卖服务</p>
</footer>
</div>
</body>
</html>
```
这段代码定义了一个包含服务列表和下单表单的基本网页。服务列表部分简单地展示了两项服务,订单表单则供用户提交他们的需求。请注意,这只是一个非常基础的示例,实际的服务页面可能会包含更复杂的布局和功能,如JavaScript交互、后端数据处理等。