html+css美食主题代码
时间: 2023-08-06 12:18:09 浏览: 114
美食网站js+html+css
以下是一个简单的HTML和CSS美食主题代码示例,其中包括一个美食图片轮播和一个美食菜单列表:
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Food Theme</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>Delicious Food</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<section id="slider">
<div class="slide">
<img src="img/food1.jpg" alt="Food 1">
</div>
<div class="slide">
<img src="img/food2.jpg" alt="Food 2">
</div>
<div class="slide">
<img src="img/food3.jpg" alt="Food 3">
</div>
</section>
<section id="menu">
<h2>Our Menu</h2>
<ul>
<li>
<h3>Burger</h3>
<p>A delicious burger with cheese, lettuce, tomato, and onion. Served with fries.</p>
<span>$8.99</span>
</li>
<li>
<h3>Pizza</h3>
<p>A classic pizza with tomato sauce, mozzarella cheese, and your choice of toppings.</p>
<span>$10.99</span>
</li>
<li>
<h3>Tacos</h3>
<p>Three soft-shell tacos filled with your choice of chicken, beef, or pork. Served with salsa and sour cream.</p>
<span>$9.99</span>
</li>
<li>
<h3>Salad</h3>
<p>A fresh salad with mixed greens, cherry tomatoes, cucumber, and your choice of dressing.</p>
<span>$6.99</span>
</li>
</ul>
</section>
<footer>
<p>© 2021 Delicious Food</p>
</footer>
</body>
</html>
```
CSS代码:
```css
body {
font-family: Arial, sans-serif;
}
header {
background-color: #f2f2f2;
padding: 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
h1 {
margin: 0;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
nav li {
margin-right: 20px;
}
nav a {
text-decoration: none;
color: #333;
}
#slider {
width: 100%;
height: 400px;
display: flex;
overflow: hidden;
}
.slide {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
#menu {
background-color: #f2f2f2;
padding: 50px 20px;
}
#menu h2 {
text-align: center;
margin-bottom: 50px;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#menu li {
width: 300px;
margin: 20px;
background-color: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
#menu h3 {
margin-top: 0;
}
#menu p {
margin-bottom: 20px;
}
#menu span {
font-weight: bold;
float: right;
color: #f00;
}
```
在上面的代码中,我们创建了一个页面标题和导航栏。页面主体分为两个部分:一个美食图片轮播和一个美食菜单列表。轮播使用了CSS的flexbox布局和overflow:hidden属性来实现。菜单列表使用了flexbox布局和box-shadow属性来增加阴影效果。
请注意,上面的示例只是一个简单的美食主题示例,您可以根据自己的需求和喜好进行修改和定制。
阅读全文