[分享]css3手机底部菜单tab

CSS3手机底部菜单Tab是一种常见的UI界面设计，其具有简单明了、易于操作等特点。在本文中，我们将介绍如何通过CSS3来实现一个优美的手机底部菜单Tab。/ CSS代码部分 / .tab { dis...

CSS3手机底部菜单Tab是一种常见的UI界面设计，其具有简单明了、易于操作等特点。在本文中，我们将介绍如何通过CSS3来实现一个优美的手机底部菜单Tab。

/* CSS代码部分 */
.tab {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 60px;
    position: fixed;
    bottom: 0;
    background-color: #fff;
    box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.05);
    z-index: 9999;
}

.tab__item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 12px;
    color: #999;
    text-decoration: none;
}

.tab__item.active {
    color: #1890ff;
} 

首先，我们创建一个class名为“tab”的div元素，并设置display为flex布局，其中justify-content和align-items属性用于实现水平居中和垂直居中，width、height和position属性则用于确定Tab的大小和位置，bottom为0表示将Tab位于底部。接下来，我们设置Tab的背景颜色和阴影效果，使用z-index属性保证其在其他元素之上。

接着，我们创建一个class名为“tab__item”的a元素，用于实现菜单项，并设置flex为1，使其占据Tab的全部宽度。同时，我们通过justify-content、align-items和flex-direction属性实现垂直居中，并使其文字大小为12px，颜色为#999，text-decoration属性去除下划线。

最后，我们为Tab设置一个“active”类，颜色设为#1890ff，用于标识当前激活的菜单项。在实际应用中，我们只需要在需要激活的菜单项上添加“active”类即可。