写一个关于美食的响应式网站html+css
时间: 2023-12-28 16:05:39 浏览: 179
好的，以下是一个简单的关于美食的响应式网站的HTML和CSS代码示例，仅供参考：
HTML代码：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>美食网站</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>美食网站</h1>
<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="banner">
<h2>今日推荐</h2>
<p>这里是今日推荐的菜品介绍</p>
<a href="#">查看详情</a>
</section>
<section class="categories">
<h2>菜品分类</h2>
<ul>
<li><a href="#">川菜</a></li>
<li><a href="#">粤菜</a></li>
<li><a href="#">鲁菜</a></li>
<li><a href="#">湘菜</a></li>
<li><a href="#">东北菜</a></li>
</ul>
</section>
<section class="recipes">
<h2>最新菜谱</h2>
<ul>
<li>
<a href="#">
<img src="images/recipe1.jpg" alt="菜品1">
<h3>菜品名称1</h3>
<p>制作难度：初级</p>
<p>制作时间：30分钟</p>
</a>
</li>
<li>
<a href="#">
<img src="images/recipe2.jpg" alt="菜品2">
<h3>菜品名称2</h3>
<p>制作难度：中级</p>
<p>制作时间：1小时</p>
</a>
</li>
<li>
<a href="#">
<img src="images/recipe3.jpg" alt="菜品3">
<h3>菜品名称3</h3>
<p>制作难度：高级</p>
<p>制作时间：2小时</p>
</a>
</li>
</ul>
</section>
</main>
<footer>
<p>版权信息</p>
</footer>
</body>
</html>
```
CSS代码：
```css
/* 全局样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
color: #333;
}
/* 头部样式 */
header {
background-color: #fff;
padding: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
h1 {
font-size: 36px;
font-weight: bold;
}
nav ul {
list-style: none;
display: flex;
}
nav li + li {
margin-left: 20px;
}
nav a {
color: #333;
text-decoration: none;
font-size: 18px;
font-weight: bold;
}
/* 主体样式 */
main {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.banner {
background-image: url(images/banner.jpg);
background-size: cover;
background-position: center;
height: 400px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
text-align: center;
}
.banner h2 {
font-size: 48px;
font-weight: bold;
margin-bottom: 20px;
}
.banner p {
font-size: 24px;
margin-bottom: 40px;
}
.banner a {
background-color: #ff6600;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
font-size: 18px;
}
.categories {
margin-top: 40px;
}
.categories h2 {
font-size: 36px;
font-weight: bold;
margin-bottom: 20px;
}
.categories ul {
list-style: none;
display: flex;
flex-wrap: wrap;
}
.categories li + li {
margin-top: 20px;
margin-left: 20px;
}
.categories a {
background-color: #fff;
color: #333;
padding: 10px 20px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 18px;
}
.recipes {
margin-top: 40px;
}
.recipes h2 {
font-size: 36px;
font-weight: bold;
margin-bottom: 20px;
}
.recipes ul {
list-style: none;
display: flex;
flex-wrap: wrap;
}
.recipes li {
width: calc(100% / 3 - 20px);
margin-right: 20px;
margin-bottom: 20px;
}
.recipes li:last-child {
margin-right: 0;
}
.recipes a {
display: block;
background-color: #fff;
color: #333;
padding: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
border-radius: 5px;
font-size: 18px;
}
.recipes img {
max-width: 100%;
margin-bottom: 10px;
}
/* 通用响应式样式 */
@media screen and (max-width: 768px) {
.banner {
height: 200px;
}
.banner h2 {
font-size: 36px;
}
.banner p {
font-size: 18px;
margin-bottom: 20px;
}
.banner a {
font-size: 16px;
padding: 5px 10px;
}
.categories h2 {
font-size: 24px;
}
.categories li + li {
margin-left: 10px;
margin-top: 10px;
}
.categories a {
font-size: 16px;
padding: 5px 10px;
}
.recipes h2 {
font-size: 24px;
}
.recipes li {
width: calc(100% / 2 - 10px);
margin-right: 10px;
margin-bottom: 10px;
}
.recipes a {
font-size: 16px;
padding: 10px;
}
footer {
font-size: 14px;
text-align: center;
padding: 10px;
}
}
@media screen and (max-width: 480px) {
.categories li {
width: calc(100% / 2 - 10px);
margin-right: 10px;
margin-bottom: 10px;
}
.recipes li {
width: 100%;
margin-right: 0;
margin-bottom: 10px;
}
.recipes a {
font-size: 14px;
padding: 5px;
}
footer {
font-size: 12px;
padding: 5px;
}
}
```
以上代码只是一个简单的示例，实际开发中可能需要更多的CSS样式以及JavaScript交互效果。同时，也需要使用图片等资源来丰富网站内容。
阅读全文
相关推荐
最新推荐
Python项目-自动办公-56 Word_docx_格式套用.zip
Python课程设计，含有代码注释，新手也可看懂。毕业设计、期末大作业、课程设计、高分必看，下载下来，简单部署，就可以使用。
包含：项目源码、数据库脚本、软件工具等，该项目可以作为毕设、课程设计使用，前后端代码都在里面。
该系统功能完善、界面美观、操作简单、功能齐全、管理便捷，具有很高的实际应用价值。
《松鼠》生态性课堂体验教案.docx
《松鼠》生态性课堂体验教案
Java系统源码+智慧图书管理系统
Java系统源码+智慧图书管理系统
内容概要：
本资源包含了完整的Java前后端源码及说明文档，适用于想要快速搭建并部署Java Web应用程序的开发者、学习者。
技术栈：
后端：Java生态系统，包含Spring Boot、Shiro、MyBatis等，数据库使用Mysql
前端：Vue、Bootstrap、Jquery等
适用场景示例：
1、毕业生希望快速启动一个新的Java Web应用程序。
2、团队寻找一个稳定的模板来加速产品开发周期。
3、教育机构或个人学习者用于教学目的或自学练习。
4、创业公司需要一个可以立即投入使用的MVP（最小可行产品）。
基于ssm+jsp实现的超市管理系统高级版v2-lw.zip
项目包含前后台完整源码。
项目都经过严格调试，确保可以运行！
具体项目介绍可查看博主文章或私聊获取
助力学习实践，提升编程技能，快来获取这份宝贵的资源吧！
深入了解Django框架：Python中的网站开发利器
资源摘要信息:"Django 是一个高级的 Python Web 框架，它鼓励快速开发和干净、实用的设计。它负责处理 Web 开发中的许多常见任务，因此开发者可以专注于编写应用程序，而不是重复编写代码。Django 旨在遵循 DRY（Don't Repeat Yourself，避免重复自己）原则，为开发者提供了许多默认配置，这样他们就可以专注于构建功能而不是配置细节。"
知识点:
1. Django框架的定义与特点：Django是一个开源的、基于Python的高级Web开发框架。它以简洁的代码、快速开发和DRY原则而著称。Django的设计哲学是“约定优于配置”（Conventions over Configuration），这意味着它为开发者提供了一系列约定和默认设置，从而减少了为每个项目做出决策的数量。
2. Django的核心特性：Django具备许多核心功能，包括数据库模型、ORM（对象关系映射）、模板系统、表单处理以及内容管理系统等。Django的模型系统允许开发者使用Python代码来定义数据库模式，而不需要直接写SQL代码。Django的模板系统允许分离设计和逻辑，使得非编程人员也能够编辑页面内容。
3. Django的安全性：安全性是Django框架的一个重要组成部分。Django提供了许多内置的安全特性，如防止SQL注入、跨站请求伪造（CSRF）保护、跨站脚本（XSS）防护和密码管理等。这些安全措施大大减少了常见Web攻击的风险。
4. Django的应用场景：Django被广泛应用于需要快速开发和具有丰富功能集的Web项目。它的用途包括内容管理系统（CMS）、社交网络站点、科学数据分析平台、电子商务网站等。Django的灵活性和可扩展性使它成为许多开发者的首选。
5. Django的内置组件：Django包含一些内置组件，这些组件通常在大多数Web应用中都会用到。例如，认证系统支持用户账户管理、权限控制、密码管理等功能。管理后台允许开发者快速创建一个管理站点来管理网站内容。Django还包含缓存系统，用于提高网站的性能，以及国际化和本地化支持等。
6. Django与其他技术的整合：Django能够与其他流行的技术和库无缝整合，如与CSS预处理器（如SASS或LESS）配合使用，与前端框架（如React、Vue或Angular）协同工作，以及与关系型数据库（如PostgreSQL、MySQL）以及NoSQL数据库（如MongoDB）集成。
7. Django的学习与社区资源：Django有一个活跃的社区和丰富的学习资源，包括官方文档、社区论坛、教程网站和大量的书籍。对于初学者来说，Django的官方教程是一个很好的起点，它会引导开发者从基础到创建一个完整的Django项目。
8. Django版本和兼容性：Django遵循语义化版本控制，每个版本都有特定的稳定性和新特性。开发者需要根据自己的项目需求选择合适的Django版本。同时，为了确保项目的正常运行，需要关注Django版本更新的兼容性问题，并根据需要进行代码调整或升级。
9. Django与Python的关系：作为Python的Web框架，Django充分利用了Python语言的简洁和易读性。随着Python语言的发展，Django也在不断更新，以支持最新的Python语言特性。Django和Python之间的紧密集成使得两者相辅相成。
10. Django的扩展和插件：Django的生态系统中存在大量扩展和插件，这些扩展覆盖了从支付处理、API开发到数据分析的各种领域。开发者可以通过使用这些扩展和插件，加速开发流程，降低开发难度。
通过以上知识点的总结，可以全面了解Django框架的各个方面，从其基本概念到应用场景，再到如何与Python和其他技术整合，以及社区支持和版本管理等。对于希望从事Web开发的开发者来说，掌握Django将是一个宝贵的技能，它能够帮助开发者高效地构建复杂的Web应用。
管理建模和仿真的文件
管理Boualem Benatallah引用此版本：布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学，1996年。法语。NNT：电话：00345357HAL ID：电话：00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆，用于存放和传播科学研究论文，无论它们是否被公开。论文可以来自法国或国外的教学和研究机构，也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
Thermo-calc中文版：预测材料热膨胀行为的精确科学
参考资源链接：[Thermo-Calc中文用户指南：入门与精通](https://wenku.csdn.net/doc/5hpcx03vej?spm=1055.2635.3001.10343)
# 1. Thermo-calc中文版概述
Thermo-calc中文版作为材料科学领域内的重要工具，其核心功能是帮助
5.1输出一个整数的逆序数
在编程中，将一个整数的逆序数是指按照位权从右到左读取数字得到的新数。例如，整数123的逆序数就是321。这里有一种常见的做法是通过循环或递归来逐位取出并累加：
1. **迭代法**:
```python
def reverse_number(n):
rev = 0
while n > 0:
rev = rev * 10 + n % 10
n = n // 10
return rev
# 示例
print(reverse_number(123)) # 输出：321
```
Spring Boot集成框架示例：深入理解与实践
资源摘要信息:"Spring Boot子的例子是一个展示如何将Spring Boot与不同框架集成的实践案例集合。Spring Boot是基于Spring的框架，旨在简化Spring应用的创建和开发过程。其设计目标是使得开发者可以更容易地创建独立的、生产级别的Spring基础应用。Spring Boot提供了一个快速启动的特性，可以快速配置并运行应用，无需繁琐的XML配置文件。
Spring Boot的核心特性包括：
1. 自动配置：Spring Boot能够自动配置Spring和第三方库，它会根据添加到项目中的jar依赖自动配置Spring应用。例如，如果项目中添加了H2数据库的依赖，那么Spring Boot会自动配置内存数据库H2。
2. 起步依赖：Spring Boot使用一组称为‘起步依赖’的特定starter库，它们是一组集成了若干特定功能的库。这些起步依赖简化了依赖管理，并且能够帮助开发者快速配置Spring应用。
3. 内嵌容器：Spring Boot支持内嵌Tomcat、Jetty或Undertow容器，这意味着可以不需要外部容器即可运行应用。这样可以在应用打包为JAR文件时包含整个Web应用，简化部署。
4. 微服务支持：Spring Boot非常适合用于微服务架构，因为它可以快速开发出独立的微服务。Spring Boot天然支持与Spring Cloud微服务解决方案的集成。
5. 操作简便：Spring Boot提供一系列便捷命令行操作，例如spring-boot:run，这可以在开发环境中快速启动Spring Boot应用。
6. 性能监控：Spring Boot Actuator提供了生产级别的监控和管理特性，例如应用健康监控、审计事件记录等。
标签中提到的Java，意味着这个例子项目是使用Java语言编写的。Java是一种广泛使用的、面向对象的编程语言，它以其跨平台能力、强大的标准库和丰富的第三方库而闻名。
压缩包子文件的文件名称列表中只有一个名称‘springboot-main’。这暗示了整个项目可能被组织为一个主项目，其中可能包含了多个模块或子模块。在Maven或Gradle构建系统中，一个主项目可以包含多个子模块，每个模块负责应用中的不同部分或特性。Spring Boot允许开发者将应用分割为多个独立模块，每个模块可以有自己的配置和依赖，这对于大型应用的组织和维护非常有帮助。
从给出的信息中可以看出，springboot-main项目可能是一个包含多个集成示例的大型Spring Boot项目。开发者可以通过查看这个项目的代码示例，来学习如何将Spring Boot与各种不同的技术栈和框架集成起来，例如数据库、消息队列、搜索引擎、缓存框架等。这种集成能力是Spring Boot广泛应用在企业级应用开发中的一个重要原因。
综合以上信息，可以得出Spring Boot子的例子是一个很好的资源，用于学习如何利用Spring Boot的优势来快速开发出能够与其他框架无缝集成的应用程序。"
"互动学习：行动中的多样性与论文攻读经历"
多样性她- 事实上SCI NCES你的时间表ECOLEDO C Tora SC和NCESPOUR l’Ingén学习互动，互动学习以行动为中心的强化学习学会互动，互动学习，以行动为中心的强化学习计算机科学博士论文于2021年9月28日在Villeneuve d'Asq公开支持马修·瑟林评审团主席法布里斯·勒菲弗尔阿维尼翁大学教授论文指导奥利维尔·皮耶昆谷歌研究教授：智囊团论文联合主任菲利普·普雷教授，大学。里尔/CRISTAL/因里亚报告员奥利维耶·西格德索邦大学报告员卢多维奇·德诺耶教授，Facebook /索邦大学审查员越南圣迈IMT Atlantic高级讲师邀请弗洛里安·斯特鲁布博士，Deepmind对于那些及时看到自己错误的人...3谢谢你首先，我要感谢我的两位博士生导师Olivier和Philippe。奥利维尔，"站在巨人的肩膀上"这句话对你来说完全有意义了。从科学上讲，你知道在这篇论文的（许多）错误中，你是我可以依