CSS布局：Flex布局
Flexbox布局是CSS中的一种布局模型，可以简化复杂的布局，并在不同尺寸的屏幕上提供一致的用户体验。
以下是一个简单的Flex布局示例，它将创建一个水平的导航菜单：
.nav {
display: flex; /* 使用Flex布局 */
list-style-type: none; /* 移除列表的标记 */
padding: 0; /* 移除默认的内边距 */
margin: 0; /* 移除默认的外边距 */
}
.nav li {
padding: 10px; /* 添加内边距 */
}
.nav li:hover {
background-color: #f0f0f0; /* 鼠标悬停时的背景色 */
}
<ul class="nav">
<li>首页</li>
<li>产品</li>
<li>关于</li>
<li>联系</li>
</ul>这个Flex布局会使得<li>元素在容器.nav中水平排列。当鼠标悬停在某个<li>元素上时，会有背景色的变化，提供了一定的用户反馈。
评论已关闭