用html5+CSS3写一个美食网页
时间: 2024-09-29 10:01:16 浏览: 51
HTML5+CSS3+JavaScript 网页设计与制作期末综合大作业 杭帮美食五个页面(附完整答案和学生用要求及素材)
5星 · 资源好评率100%
HTML5和CSS3一起可以创建出响应式的、美观的美食网站。下面是一个简单的步骤和示例:
1. **结构** (HTML):
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>美食网页</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>美食探索</h1>
<nav>
<ul>
<li><a href="#首页">首页</a></li>
<li><a href="#菜单">特色菜单</a></li>
<li><a href="#优惠">优惠活动</a></li>
</ul>
</nav>
</header>
<main>
<section id="首页">
<h2>欢迎来到我们的餐厅</h2>
<p>展示一些吸引人的图片和简介...</p>
</section>
<section id="菜单">
<h2>特色菜品</h2>
<!-- 使用CSS Grid或Flexbox来布局 -->
<div class="recipe-grid">
<article class="recipe-item">
<img src="dish1.jpg" alt="红烧肉">
<h3>红烧肉</h3>
<p>详细介绍...</p>
</article>
<!-- 更多菜品... -->
</div>
</section>
<section id="优惠">
<h2>今日优惠</h2>
<ul>
<li>优惠一...</li>
<li>优惠二...</li>
</ul>
</section>
</main>
<footer>
<p>© 2023 美食探索网</p>
</footer>
</body>
</html>
```
2. **样式** (CSS, 部分内容):
```css
/* styles.css */
header {
background-color: #f4f4f4;
}
nav ul {
list-style-type: none;
padding: 0;
}
.recipe-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.recipe-item img {
width: 100%;
height: auto;
}
/* 添加媒体查询以实现响应式设计 */
@media screen and (max-width: 768px) {
.recipe-grid {
grid-template-columns: 1fr;
}
}
```
阅读全文