网页边栏效果-html代码-BFW代码库

网页边栏效果

代码语言：html

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <style>
        .side-bar {
            position: fixed;
            top: 66px;
            left: 50%;
            margin-left: 0px;
            width: 48px;
            overflow: hidden;
            background-color: #fff;
        }
        .side-item {
            display: inline-block;
            width: 96px;
            height: 48px;
            cursor: pointer;
        }
        .side-bar .side-item .icon-support {
            background-image: url(http://repo.bfw.wiki/bfwrepo/svg/support.73e8a987.svg);
        }
        .side-bar .side-item .icon-comment {
            background-image: url(http://repo.bfw.wiki/bfwrepo/svg/comment.e2c5d384.svg);
        }
        .side-bar .side-item .icon-collect {
            background-image: url(http://repo.bfw.wiki/bfwrepo/svg/collect.bf983e72.svg);
        }
        .side-bar .side-item .icon-back {
            background-image: url(http://repo.bfw.wiki/bfwrepo/svg/back.0bbc447b.svg);
        }

        .side-bar .side-item i {
            background-repeat: no-repeat;
            backgr.........完整代码请登录后点击上方下载按钮下载查看

网页边栏效果

网友评论0

div+css实现漂亮的垂直侧边栏可伸缩菜单效果代码

div+css实现底部横线菜单切换窗口效果代码

div+css实现横向鼠标悬停翻转文字导航菜单效果代码

react+use-web-animations实现横向和竖向图标菜单滑动效果代码

js+css实现滑动图标导航菜单效果代码

matter实现自由落体重力下落的导航菜单效果代码

div+css实现下拉菜单代码

div+css实现左侧悬浮伸缩菜单代码

div+Css实现手风琴二级菜单折叠效果代码

div+css实现二级下拉菜单导航效果代码