以下是一个咖啡店网站模板的基本框架,你可以根据自己的需要进行修改:
HTML:
```
咖啡店网站
```
CSS:
```
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
header {
background-color: #f2f2f2;
color: #111111;
padding: 20px;
text-align: center;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
margin-right: 10px;
}
nav a {
color: #111111;
text-decoration: none;
}
main > section {
display: flex;
flex-direction: column;
align-items: center;
}
.menu h2 {
margin-bottom: 20px;
}
.menu ul {
margin: 0;
padding: 0;
list-style: none;
}
.menu li {
display: inline-block;
margin-right: 10px;
}
.menu a {
color: #111111;
text-decoration: none;
}
.service h2 {
margin-bottom: 20px;
}
.service ul {
margin: 0;
padding: 0;
}
.service li {
display: inline-block;
margin-right: 10px;
}
.service a {
color: #111111;
text-decoration: none;
}
.contact p {
margin-bottom: 20px;
}
```
这个模板包括了一个基本的头部元素、导航元素、主体元素和一些样式元素。在主体元素中,你可以根据需要添加各种内容,如菜单、服务、联系我们等。你可以使用Flexbox布局来将不同的子元素排列在同一个水平线上,使它们看起来更美观和易于使用。
