.menu {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 20px;
}
.menu li {
width: calc(33.33% - 10px);
margin-bottom: 20px;
border: 1px solid #ccc;
padding: 10px;
box-sizing: border-box;
border-radius: 5px;
}
.menu li:hover {
background-color: #f5f5f5;
}
.menu h3 {
font-size: 1.5rem;
margin: 0 0 10px 0;
}
.menu p {
margin: 0;
}
.menu span {
color: #c60d0d;
font-weight: bold;
margin-right: 5px;
}首先，大家需要定义一个menu类的样式来控制整个菜单的样式。通过display:flex和flex-wrap:wrap属性，大家可以让菜单项自适应布局，并且使其自动换行。接下来，大家通过justify-content: space-between属性，将菜单项的宽度分散排列，增加整个菜单的美观性。
大家通过给menu li类添加样式来进一步定义菜单项的样式。通过width属性，大家可以将每个菜单项的宽度定为三分之一。再通过margin-bottom属性，定义每个菜单项的底部距离为20像素。大家通过给菜单项添加边框和边距，使其看起来更加整齐。此外，通过给菜单项添加悬停样式，大家为用户提供了更加可交互的餐饮菜单。
然后，大家进一步定义了菜单项中的标题和描述。通过设置font-size和margin属性，大家可以定义标题的样式。大家通过margin属性控制标题上下的空白距离。接下来，大家定义每项菜肴的描述，并通过margin属性去除标题和描述之间的空白。通过设置span类，大家可以更加生动地展示每个菜肴的价格。大家在span标签中设置了字体颜色和加粗样式，以使其在菜单中更加醒目。
最后，通过CSS样式的运用，大家完成了餐饮菜单的制作。通过使用类似的技术，大家可以制作出任何样式的网页菜单。无论您是餐饮业主，还是网页设计人员，都可以使用这些技巧来制作出美观、易于使用的网页菜单。