神代綺凜

[已完结] 哔哩哔哩 Nekopara B站网页萌化主题
終わりました。
扫描右侧二维码阅读全文
02
2017/09

[已完结] 哔哩哔哩 Nekopara B站网页萌化主题

終わりました。

Bilibili萌化 ネコパラ

最后更新时间:2019-09-08

过去和未来

这个样式原本是我开始学 CSS 的时候 xjb 写的一个东西,其实仅仅是为了熟悉各种属性的运用以及积累一些实际经验

差不多三年过去了,回头再看,样式本身其实十分臃肿,另外,B站样式频繁的改版是必然的,并且也使得成为了社畜的我很难维护并维持当时的自己写出来的大杂烩的样子

而且新版B站的 UI 设计很好,我挑不出什么刺来,我觉得我很多 xjb 改的地方都是多余的

所以我决定重新开始做一些微小的工作,仅仅为了 nekopara 而做一个很简单的附加式的皮肤,只保留我之前做的一些 UI 图片资源,剩下的,原来是什么样的,就还是什么样的

附加功能

  • 去页面推广、广告
  • 隐藏了旧版视频播放器顶部消息栏
  • 对导航栏应用了一些人性化调整
  • 在旧版视频播放界面播放器全屏网页全屏状态下,将鼠标放在右侧边缘可呼出播放器右侧面板

安装

使用前还需要先安装 Stylus 插件

并在 Stylus 插件设置中开启“通过 HTML[stylus-iframe] 方式改变 iframes 的 css”,可解决本样式造成的部分 iframe 背景问题

插件设置可通过 右击 Stylus 插件图标 - 选项 来进入

搬瓦工VPS优惠套餐,建站稳如狗,支持支付宝,循环出账94折优惠码BWH26FXH3HIQ
年付$28CN2线路,1核/512M内存/10G硬盘/500GB@1Gbps【点击购买】(经常售罄,请抓紧机会)
年付$47CN2线路,1核/1G内存/20G硬盘/1T@1Gbps【点击购买
Last modification:September 8th, 2019 at 06:13 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment

463 comments

  1. admin  Windows 10 x64 Edition(Windows 10 x64 Edition) / Firefox 56.0(Firefox 56.0)
    报告三个bug:
    1、所有界面下,我的稍后再看的按钮都变成乱码了。
    2、播放页面的“分享”、“收藏”、“稍后再看”、“充电”的按钮内容是乱码。
    3、1366×768的分辨率下,鼠标停留在“分享”按钮上的时候,展开的菜单会到屏幕外面去。
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 55.0.2883.87(Google Chrome 55.0.2883.87)
      @admin 1&2:请看注意事项第二条,如果不能解决再跟我说明
      3:低分辨率用户可以尝试我最新添加的“视频播放界面工具栏显示在视频左侧”功能

      头像会变成QQ头像是因为有QQ邮箱自动解析头像的功能

      1. admin  Windows 10 x64 Edition(Windows 10 x64 Edition) / Firefox 56.0(Firefox 56.0)
        @神代綺凜 好好,谢谢。
    2. admin  Windows 10 x64 Edition(Windows 10 x64 Edition) / Firefox 56.0(Firefox 56.0)
      @admin 好神奇,为什么头像自动变成了我的QQ头像
  2. kissoul  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 61.0.3163.100(Google Chrome 61.0.3163.100)
    报告个小bug
    在视频播放, 如果浏览器用了页面缩放, 我习惯用150%
    那么左右会多出来一节, 就是按鼠标中键后可以往左右拖动页面, 下方会有横向的滚动条
    这个问题在哔哩哔哩首页是没有的
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 55.0.2883.87(Google Chrome 55.0.2883.87)
      @kissoul 已更新,你可以在 Advance Setting 里设置显示在左侧
      1. kissoul  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 61.0.3163.100(Google Chrome 61.0.3163.100)
        @神代綺凜 谢谢
        因为之前的那个问题, 我关闭了几天脚本
        感觉除了有背景图片
        其他功能我都没察觉到改进了什么
        1. 神代綺凜  Mac OS X(Mac OS X) / Mozilla Compatible(Mozilla Compatible)
          @kissoul 其实主要就是给b站换个样子啦
    2. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 55.0.2883.87(Google Chrome 55.0.2883.87)
      @kissoul 这个……是正常现象
      是因为我的侧边栏按钮显示是往右弹的,div是有一定宽度的,你放大之后这个div的最右端超出了页面原本宽度的范围,所以就变得可滑动了
      如果我强行缩小宽度的话,会导致弹出的文字不能正常显示
      这个问题要解决的话,我一会做多一个选项,让工具栏显示在左侧,以应对放大或者是低宽度屏幕的这种情况
  3. smogchan  Windows 7(Windows 7) / Google Chrome 62.0.3202.75(Google Chrome 62.0.3202.75)
    你好!"稍后再看“列表下点进具体视频页面啥官方导航条不居中显示
    系统win7 浏览器chrome 62.0.3202.75(正式版本) (32 位)
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 55.0.2883.87(Google Chrome 55.0.2883.87)
      @smogchan 已修复,更新即可
    2. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 55.0.2883.87(Google Chrome 55.0.2883.87)
      @smogchan 噢导航条说的是上面那个,了解了,我去修一下
  4. 失足少女  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 60.0.3112.78(Google Chrome 60.0.3112.78)
    问一下自定义背景是怎么做到的OωO
    1. kilin  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 55.0.2883.87(Google Chrome 55.0.2883.87)
      @失足少女 你的意思是,在样式中怎么做到的?这个你需要了解css,用background-image设置一个div的背景
      1. 失足少女  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 60.0.3112.78(Google Chrome 60.0.3112.78)
        @kilin 去百度了一下,一头雾水哇
        1. kilin  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 55.0.2883.87(Google Chrome 55.0.2883.87)
          @失足少女 这个至少需要html和css知识。。。感兴趣可以靠w3cschool自学一下
          1. 失足少女  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 60.0.3112.78(Google Chrome 60.0.3112.78)
            @kilin 我选择放弃。。。技术宅是真的可怕
            1. kilin  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 55.0.2883.87(Google Chrome 55.0.2883.87)
              @失足少女 23333我一开始也是去年底才开始研究网页相关的东西的
              1. 失足少女  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 60.0.3112.78(Google Chrome 60.0.3112.78)
                @kilin 如果可以的话能发个教程传到b站上吗
                1. kilin  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 55.0.2883.87(Google Chrome 55.0.2883.87)
                  @失足少女 这种东西不好做教程,因为涉及到的东西太多了,不是一个教程能讲的完的,我也没有那么多时间做系列教程。只能靠自学或者看html和css相关教程
  5. smogchan  Windows 7(Windows 7) / Google Chrome 61.0.3163.100(Google Chrome 61.0.3163.100)
    9月28号 B站视频页 小黑屋的图标被挤下来
    1. kilin  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 55.0.2883.87(Google Chrome 55.0.2883.87)
      @smogchan I see. 我去修复一下
      1. smogchan  Windows 7(Windows 7) / Google Chrome 61.0.3163.100(Google Chrome 61.0.3163.100)
        @kilin 回复的好快!很喜欢你制作的这个样式,赞!φ( ̄∇ ̄o)
        1. kilin  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 55.0.2883.87(Google Chrome 55.0.2883.87)
          @smogchan 已更新
        2. kilin  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 55.0.2883.87(Google Chrome 55.0.2883.87)
          @smogchan 谢谢w,因为是Nekopara真爱粉୧(๑•̀⌄•́๑)૭
          1. smogchan  Windows 7(Windows 7) / Google Chrome 61.0.3163.100(Google Chrome 61.0.3163.100)
            @kilin 视频播放页小黑屋还是挤下来了!
            系统 win7 32 浏览器 chrome 61.0.3163.100(正式版本) (32 位)
            1. kilin  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 55.0.2883.87(Google Chrome 55.0.2883.87)
              @smogchan 修复了
            2. kilin  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 55.0.2883.87(Google Chrome 55.0.2883.87)
              @smogchan 好像确实是这样,今天凌晨明明修复了。。。(B站到底干了什么
              1. smogchan  Windows 7(Windows 7) / Google Chrome 61.0.3163.100(Google Chrome 61.0.3163.100)
                @kilin 我这里“广场”“直播”“小黑屋”3个都挤下来了。不知道是不是我的电脑问题
              2. smogchan  Windows 7(Windows 7) / Google Chrome 61.0.3163.100(Google Chrome 61.0.3163.100)
                @kilin 我这里“广场”“直播”“小黑屋”3个都挤下来了。不知道是不是我的电脑问题,你那里正常显示?
                1. kilin  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 55.0.2883.87(Google Chrome 55.0.2883.87)
                  @smogchan 这下应该是修复了。。不好意思刚才改完就光想着写作业了忘记检查低分辨率的时候的情况了(:3」∠)
                  1. smogchan  Windows 7(Windows 7) / Google Chrome 61.0.3163.100(Google Chrome 61.0.3163.100)
                    @kilin 修复了!你道歉什么呀,我应该感谢你才对!ヾ(≧∇≦*)ゝ
                    1. kilin  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 55.0.2883.87(Google Chrome 55.0.2883.87)
                      @smogchan 23333反正还是要感谢你及时发现问题
  6. TT  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 61.0.3141.7(Google Chrome 61.0.3141.7)
    ⌇●﹏●⌇这么咔咔,博主哪的?
    1. kilin  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 55.0.2883.87(Google Chrome 55.0.2883.87)
      @TT 哪的指的是。。?