以下是一个美食响应式网站模板的基本框架,可以根据您的需求进行修改和定制。
```html
美食网站模板
美食推荐
这里是一些美食的推荐,供您参考。
更多信息
这里有一些关于美食的信息,包括做法、食材、餐厅推荐等。
```
CSS样式表:
```css
/* 样式表头部 */
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
}
.logo img {
width: 100%;
height: auto;
}
.title {
text-align: center;
font-size: 24px;
margin-bottom: 30px;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-right: 20px;
}
nav a {
color: #333;
text-decoration: none;
}
main .content {
margin-bottom: 30px;
}
main .btn {
margin-top: 10px;
padding: 10px 20px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
main .btn:hover {
background-color: #3e8e41;
}
/* 样式表底部 */
footer {
background-color: #333;
color: #fff;
padding: 20px;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
}
footer .bottom-text {
font-size: 16px;
color: #333;
margin-bottom: 30px;
}
```
这个美食响应式网站模板包括了一个头部、一个导航栏、四个主体段落和一个底部样式表。您可以根据需要添加更多的内容,并根据自己的需求修改样式表。
