[分享]css3底部导航栏

在Web开发中，底部导航栏是非常重要的元素之一，它可以为用户提供良好的导航和操作体验。而CSS3技术的发展，让设计和开发者们可以更加简单、便捷地实现底部导航栏的样式效果。 /HTML/ 首页 分类 ...

在Web开发中，底部导航栏是非常重要的元素之一，它可以为用户提供良好的导航和操作体验。而CSS3技术的发展，让设计和开发者们可以更加简单、便捷地实现底部导航栏的样式效果。

  /*HTML*/
        <ul class="navigation">
            <li><a href="#">首页</a></li>
            <li><a href="#">分类</a></li>
            <li><a href="#">购物车</a></li>
            <li><a href="#">个人中心</a></li>
        </ul>

        /*CSS*/
        .navigation {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #fff;
            box-shadow: 0 -1px 3px rgba(0, 0, 0, .15);
            height: 50px;
            padding: 0 20px;
            position: fixed;
            bottom: 0;
            width: 100%;
        }

        .navigation li {
            flex-basis: 0;
            flex-grow: 1;
            flex-shrink: 1;
            list-style: none;
            padding: 5px 0;
            text-align: center;
            position: relative;
        }

        .navigation li a {
            color: #666;
            display: block;
            font-size: .8rem;
            text-decoration:none;
        }

        .navigation li.active a {
            color: #000;
        }

        .navigation li.active::after {
            content: "";
            width: 5px;
            height: 5px;
            background-color: #000;
            position: absolute;
            bottom: -3px;
            left: 50%;
            transform: translateX(-50%) rotate(45deg);
        } 

在以上代码中，使用了flex布局来实现底部导航栏的自适应和居中显示，通过添加阴影和设定背景色来区别页面中的其他内容，同时为每个导航按钮添加了一个底部的小三角图标来突出选中状态。另外，在文本颜色、字体大小和文本装饰等方面也作出了自定义的调整，可以根据实际情况进行更改调整。

总之，CSS3的强大功能让我们可以更加自由地对页面进行美化和设计，通过巧妙的应用可以获得出色的视觉效果和用户体验。