用html和css写一个关于清真食堂的网页
时间: 2023-10-05 11:11:03 浏览: 39
好的,以下是一个简单的清真食堂网页示例:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清真食堂</title>
<style>
/* 设置全局样式 */
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #f6f6f6;
}
/* 设置导航栏样式 */
nav {
background-color: #333;
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
}
nav h1 {
margin: 0;
font-size: 28px;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
}
nav li {
margin-left: 10px;
}
nav a {
color: #fff;
text-decoration: none;
padding: 10px;
}
nav a:hover {
background-color: #555;
}
/* 设置主要内容区域样式 */
.main {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
h2 {
font-size: 32px;
margin-top: 0;
}
p {
font-size: 18px;
line-height: 1.5;
}
/* 设置底部样式 */
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<nav>
<h1>清真食堂</h1>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">菜单</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
<div class="main">
<h2>欢迎来到清真食堂</h2>
<p>我们提供最新鲜、最美味的清真食品,以及舒适的用餐环境。我们的口号是“品尝健康,享受生活”。</p>
<h2>今日特色菜单</h2>
<ul>
<li>烤羊肉串 - $5.99</li>
<li>炒拉面 - $6.99</li>
<li>牛肉煲仔饭 - $8.99</li>
<li>绿色蔬菜沙拉 - $4.99</li>
</ul>
</div>
<footer>
<p>版权所有 © 2021 清真食堂</p>
</footer>
</body>
</html>
```
上面的代码包含了基本的 HTML 和 CSS 标记,包括:
- 网页标题 `<title>`
- 导航栏 `<nav>`
- 主要内容区域 `<div class="main">`
- 特色菜单列表 `<ul>`
- 底部 `<footer>`
你可以将代码复制到任何文本编辑器中,并保存为 `.html` 文件,然后在浏览器中打开它,即可在网页中查看它的外观和功能。