效果图: 

这是小程序的html样式,<scroll-view></scroll-view>可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度,view相当于div.

左边是scss,右边是css

用border-left 也可以实现,但是相对来说不够美观

代码:

    .cate-left {
            height: 500rpx;
            width: 240rpx;
            background-color: red;

            .cate-left-item {
                height: 120rpx;
                background-color: #efefef;
                font-size: 28rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                &.active {
                    background-color: #FFFFFF;
                    display: flex;
                    justify-content: space-between;
                    &::before {
                        content: '';
                        width: 4rpx;
                        height: 60rpx;
                        background-color: #C00000;
                    }
                    &::after {
                        content: '';
                        width: 4rpx;
                        height: 60rpx;
                        background-color: #FFFFFF;
                    }
                }

            }
        }

最后

以上就是漂亮网络为你收集整理的HTML+CSS实现分类导航静态样式+美化效果图: 的全部内容，希望文章能够帮你解决HTML+CSS实现分类导航静态样式+美化效果图: 所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。