网页边栏效果

代码语言: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