好的，我可以为您提供一个基本的外卖订餐网站首页，并列出需要的
元素及其相应的
HTML和
CSS代码。
需要的
元素包括：
1. 网站Logo
2. 导航栏菜单
3. 轮播图
4. 推荐菜品列表
5. 订单下单表单
6. 底部版权信息
以下是
HTML代码：
```
html
<!DOCTYPE
html>
<
html lang="en">
<head>
<meta charset="UTF-8">
<title>外卖订餐网站首页</title>
<link rel="stylesheet" href="style.
css">
</head>
<body>
<header>
<
div class="logo">
<
img src="logo.png" alt="网站Logo">
</
div>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">菜单</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
</header>
<
div class="banner">
<
img src="banner.jpg" alt="轮播图">
</
div>
<section class="featured-dishes">
<h2>推荐菜品</h2>
<ul>
<li>
<
img src="dish1.jpg" alt="菜品图片">
<h3>菜品名称</h3>
<p>菜品描述</p>
<span class="price">¥50</span>
</li>
<li>
<
img src="dish2.jpg" alt="菜品图片">
<h3>菜品名称</h3>
<p>菜品描述</p>
<span class="price">¥60</span>
</li>
<li>
<
img src="dish3.jpg" alt="菜品图片">
<h3>菜品名称</h3>
<p>菜品描述</p>
<span class="price">¥70</span>
</li>
</ul>
</section>
<section class="order-form">
<h2>下单</h2>
<form>
<label for="name">姓名</label>
<input type="text" id="name">
<label for="phone">电话</label>
<input type="tel" id="phone">
<label for="address">地址</label>
<input type="text" id="address">
<label for="dish">菜品</label>
<select id="dish">
<option value="1">菜品1</option>
<option value="2">菜品2</option>
<option value="3">菜品3</option>
</select>
<button type="submit">提交订单</button>
</form>
</section>
<footer>
<p>©2021 外卖订餐网站. All Rights Reserved.</p>
</footer>
</body>
</
html>
```
以下是相应的
CSS代码：
```
css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Helvetica Neue', sans-serif;
font-size: 16px;
line-height: 1.5;
color: #333;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.logo
img {
height: 60px;
}
nav ul {
display: flex;
}
nav li {
margin: 0 10px;
}
nav a {
display: block;
padding: 10px;
text-decoration: none;
color: #333;
}
nav a:hover {
background-color: #ffcc00;
color: #fff;
}
.banner
img {
width: 100%;
height: 400px;
object-fit: cover;
}
.featured-dishes {
padding: 60px 20px;
text-align: center;
}
.featured-dishes h2 {
margin-bottom: 30px;
font-size: 36px;
font-weight: bold;
}
.featured-dishes ul {
display: flex;
justify-content: center;
list-style: none;
}
.featured-dishes li {
margin: 0 20px;
text-align: center;
}
.featured-dishes
img {
width: 100%;
max-width: 300px;
height: 200px;
object-fit: cover;
border-radius: 10px;
}
.featured-dishes h3 {
margin-top: 20px;
font-size: 24px;
font-weight: bold;
}
.featured-dishes p {
margin-top: 10px;
font-size: 16px;
color: #777;
}
.featured-dishes .price {
display: block;
margin-top: 10px;
font-size: 20px;
font-weight: bold;
color: #ffcc00;
}
.order-form {
padding: 60px 20px;
text-align: center;
background-color: #f2f2f2;
}
.order-form h2 {
margin-bottom: 30px;
font-size: 36px;
font-weight: bold;
}
.order-form form {
display: flex;
flex-direction: column;
align-items: center;
}
.order-form label {
display: block;
margin-top: 20px;
font-size: 20px;
font-weight: bold;
}
.order-form input[type="text"],
.order-form input[type="tel"],
.order-form select {
width: 100%;
max-width: 400px;
padding: 10px;
margin-top: 10px;
font-size: 16px;
border-radius: 5px;
border: none;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.order-form button {
display: block;
margin-top: 20px;
padding: 10px 20px;
font-size: 20px;
font-weight: bold;
color: #fff;
background-color: #ffcc00;
border: none;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
cursor: pointer;
}
.order-form button:hover {
background-color: #ff9900;
}
footer {
padding: 20px;
text-align: center;
background-color: #fff;
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
}
footer p {
font-size: 14px;
color: #777;
}
```
希望这个例子能对您有所帮助！
190
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
