基于html5写一份外卖订餐网页首页,并列出包含的元素,并有导航栏和广告的元素,给出上述的html和css源代码
时间: 2024-02-28 10:51:59 浏览: 23
好的,以下是一个简单的外卖订餐网页首页的 HTML 和 CSS 源代码,包含导航栏和广告元素:
HTML 代码:
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外卖订餐网页首页</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<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>
<main>
<section class="ad">
<img src="https://via.placeholder.com/728x90" alt="广告图">
</section>
<section class="menu">
<h1>菜单</h1>
<ul>
<li>
<h2>炸鸡套餐</h2>
<p>价格:20元</p>
<button>订餐</button>
</li>
<li>
<h2>牛肉饭</h2>
<p>价格:25元</p>
<button>订餐</button>
</li>
<li>
<h2>烤鱼套餐</h2>
<p>价格:30元</p>
<button>订餐</button>
</li>
</ul>
</section>
</main>
<footer>
<p>版权所有 © 2021 外卖订餐网页首页</p>
</footer>
</body>
</html>
```
CSS 代码:
```
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
margin-right: 20px;
}
nav a {
color: #fff;
text-decoration: none;
}
main {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.ad {
text-align: center;
margin-bottom: 20px;
}
.ad img {
max-width: 100%;
}
.menu {
margin-top: 20px;
}
.menu h1 {
font-size: 24px;
margin-bottom: 10px;
}
.menu ul {
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
margin-bottom: 20px;
border: 1px solid #ccc;
padding: 10px;
}
.menu h2 {
font-size: 20px;
margin-bottom: 5px;
}
.menu p {
font-size: 16px;
margin-bottom: 10px;
}
.menu button {
background-color: #333;
color: #fff;
border: none;
padding: 5px 10px;
font-size: 16px;
cursor: pointer;
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
```
此外,HTML 中的图片链接和 CSS 中的颜色、字体大小等样式可以根据实际情况进行修改。