神代綺凜

[已完结] 哔哩哔哩 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折优惠码BWH3HYATVBJW
年付$47CN2线路,1核/1G内存/20G硬盘/1T@1Gbps【点击购买】($28套餐已经不再销售)
年付$47CN2 GIA线路,1核/512MB内存/10G硬盘/500G@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

485 comments

  1. Killua  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 65.0.3325.181(Google Chrome 65.0.3325.181)
    大佬大佬!
  2. hugbio  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 65.0.3325.146(Google Chrome 65.0.3325.146)
    你网站输入框输入文字的特效很好看。不知道有没有办法弄个脚本实现全局所有网页输入框的特效?
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 65.0.3325.162(Google Chrome 65.0.3325.162)
      @hugbio 自己写个油猴脚本是可以,让每个网页在加载的时候都插入这个js
      1. hugbio  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 65.0.3325.146(Google Chrome 65.0.3325.146)
        @神代綺凜 不会写这个js代码。您能否提供一下吗?
        1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 65.0.3325.162(Google Chrome 65.0.3325.162)
          @hugbio 我没有这个需求所以自己也不会去写
          1. hugbio  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 65.0.3325.146(Google Chrome 65.0.3325.146)
            @神代綺凜 不过你的网站有这个特效啊。好喜欢。如果能弄出来。我估计很多人很会喜欢。。。
            1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 65.0.3325.162(Google Chrome 65.0.3325.162)
              @hugbio 可能吧
              但是我自己都不需要用的东西我是不会去花时间去做的,就这样
  3. hugbio  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 65.0.3325.146(Google Chrome 65.0.3325.146)
    请问你视频中鼠标的样式和点击特效是什么弄的?
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 65.0.3325.162(Google Chrome 65.0.3325.162)
      @hugbio 鼠标样式是很久以前从一个第三方Windows主题上拿下来的
      点击特效是Bandicam自带的功能
      1. hugbio  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 65.0.3325.146(Google Chrome 65.0.3325.146)
        @神代綺凜 原来如此。那就真没办法了
  4. Void  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 65.0.3325.181(Google Chrome 65.0.3325.181)
    可还行.....
  5. seasmogchan  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 65.0.3325.181(Google Chrome 65.0.3325.181)
    番剧播放页面 硬币 追番下面白色溢出。不清楚是否 B站更新了什么的原因?
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 65.0.3325.162(Google Chrome 65.0.3325.162)
      @seasmogchan 修复了,更新即可
  6. Archeb  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 65.0.3325.181(Google Chrome 65.0.3325.181)
    poi
  7. 咸鱼  Windows 7 x64 Edition(Windows 7 x64 Edition) / Maxthon 5.1.5.2000(Maxthon 5.1.5.2000)
    视频播放页如果往下拉看评论的话会有白色的部分升起挡住背景艹猫的图片
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 65.0.3325.162(Google Chrome 65.0.3325.162)
      @咸鱼 能不能提供一下浏览器和你发现有错误的视频地址?
      1. 咸鱼  Windows 7 x64 Edition(Windows 7 x64 Edition) / Maxthon 5.1.5.2000(Maxthon 5.1.5.2000)
        @神代綺凜 遨游,我觉得是浏览器内核的问题.
        所有视频都这样,主页没有问题
        还有上次那个排行变到第二行的被我 padding: -1px 30px 0px 30px !important; 第一个数据改成负数就行了,但是整体有点跑到边框外面了
        1. 神代綺凜  Mac OS X(Mac OS X) / Safari(Safari)
          @咸鱼 建议还是用chrome(
          1. 咸鱼  Windows 7 x64 Edition(Windows 7 x64 Edition) / Maxthon 5.1.5.2000(Maxthon 5.1.5.2000)
            @神代綺凜 有时候用习惯了就再也回不来了
            青春也是这样
            1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 65.0.3325.162(Google Chrome 65.0.3325.162)
  8. seasmogchan  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 65.0.3325.181(Google Chrome 65.0.3325.181)
    4月1日出来个古文模式,不过样式中看不到这个开关按钮。不过也不清楚这个模式是否一直会有,先观望一天。如果是以后都有的话,希望能弄出来φ( ̄∇ ̄o)
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 65.0.3325.162(Google Chrome 65.0.3325.162)
      @seasmogchan 古文模式在哪里……为啥我关了样式也看不到
      1. seasmogchan  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 65.0.3325.181(Google Chrome 65.0.3325.181)
        @神代綺凜 看来就是个愚人节彩蛋而已
        1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 65.0.3325.162(Google Chrome 65.0.3325.162)
  9. 广树  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 65.0.3325.181(Google Chrome 65.0.3325.181)
    哇,这个好棒!感觉自己弱爆了 ̄﹃ ̄
  10. lain  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 65.0.3325.146(Google Chrome 65.0.3325.146)
    看到更新日志有FGO,安卓的能PY吗
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 65.0.3325.162(Google Chrome 65.0.3325.162)
      @lain 我是日服的噢 OωO
      1. lain  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 65.0.3325.146(Google Chrome 65.0.3325.146)
        @神代綺凜 最遥远的距离,我还差一年就能赶上你的脚步了
        1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 65.0.3325.162(Google Chrome 65.0.3325.162)
  11. 乐馗  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 65.0.3325.162(Google Chrome 65.0.3325.162)
    大佬,有的视频播放页面硬币、收藏和up主信息栏背景是白色的同时,右侧的蓝色功能按钮也不显示。求解决!
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.140(Google Chrome 64.0.3282.140)
      @乐馗 修复了,更新即可
      按钮问题学业原因暂时拖更
  12. 司来吉兰丷  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 65.0.3325.162(Google Chrome 65.0.3325.162)
    大佬,视频播放页面硬币、收藏和up主信息栏背景是白色的
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.140(Google Chrome 64.0.3282.140)
      @司来吉兰丷 修复了,更新即可
    2. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.140(Google Chrome 64.0.3282.140)
  13. 夜风  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 64.0.3282.140(Google Chrome 64.0.3282.140)
    匹配规则可能有些问题了,好多视频播放界面都不能正确的应用
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.140(Google Chrome 64.0.3282.140)
      @夜风 修复了,更新即可
    2. 神代綺凜  Mac OS X(Mac OS X) / Safari(Safari)
      @夜风 是因为b站新版视频页面html结构不一样了
  14. geralt  Windows 7 x64 Edition(Windows 7 x64 Edition) / Sogou Explorer(Sogou Explorer)
    天哪你的网页做的真是太HUAluo好QIAOli了
    1. 神代綺凜  Windows 7(Windows 7) / Google Chrome 65.0.3325.162(Google Chrome 65.0.3325.162)
      @geralt 过奖了
  15. 无花无酒  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.140(Google Chrome 64.0.3282.140)
    什么时候支持下新番时刻表页面
    1. 神代綺凜  Windows 7(Windows 7) / Google Chrome 65.0.3325.162(Google Chrome 65.0.3325.162)
      @无花无酒 这个问题等同于“我的神船什么时候能修好”
      1. 无花无酒  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.140(Google Chrome 64.0.3282.140)
        @神代綺凜 恩,你的回复速度也太强了吧
        1. 神代綺凜  Windows 7(Windows 7) / Google Chrome 65.0.3325.162(Google Chrome 65.0.3325.162)
          @无花无酒 有空的时候就会秒回了
  16. 境界的彼方  Windows 8.1 x64 Edition(Windows 8.1 x64 Edition) / Google Chrome 63.0.3239.132(Google Chrome 63.0.3239.132)
    恩,好的,麻烦了
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.140(Google Chrome 64.0.3282.140)
      @境界的彼方 修复了,更新即可
      1. 境界的彼方  Windows 8.1 x64 Edition(Windows 8.1 x64 Edition) / Google Chrome 63.0.3239.132(Google Chrome 63.0.3239.132)
        @神代綺凜 恩,已经好了,辛苦了大佬|´・ω・)ノ
  17. 境界的彼方  Windows 8.1 x64 Edition(Windows 8.1 x64 Edition) / Google Chrome 63.0.3239.132(Google Chrome 63.0.3239.132)
    大佬,视频名称下和UP简介下的长条广告似乎没有去除,并且有那种广告的视频中,视频标题与up信息部分,背景显示不完全。不知能否修复
    1. 神代綺凜  Windows 7(Windows 7) / Google Chrome 65.0.3325.162(Google Chrome 65.0.3325.162)
      @境界的彼方 那应该是新的视频页面结构了
      了解了,等电脑修好了我才能修……
  18. 图安  Windows 10 x64 Edition(Windows 10 x64 Edition) / Firefox 58.0(Firefox 58.0)
    大佬大佬 请问那个给网页添加音乐的代码 可以让我用下吗|´・ω・)ノ不知能否发一下吗
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Microsoft Edge 16.16299(Microsoft Edge 16.16299)
      @图安 说的是博客顶部的音乐播放器?那个是主题带的,并没有独立的代码
  19. 乡下来的喵  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.186(Google Chrome 64.0.3282.186)
    首页上边的导航,广场和直播下面的那个框,跑屏幕外面去了。
    建议改成右对齐= ̄ω ̄=

    #primary_menu .side-nav .square-wrap,#primary_menu .side-nav .nav-live{
        right: 0;
        left: auto;
    }
    1. 神代綺凜  Mac OS X(Mac OS X) / Safari(Safari)
      @乡下来的喵 我是有这样改的,不过仅限于低宽度的情况
      一般情况下不会有宽度不够展现并且还没触发低宽度自适应布局的情况,因此我还是保持了向右
      不过既然这么说,我到时候再找到临界点去改吧
      1. 乡下来的喵  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.186(Google Chrome 64.0.3282.186)
        @神代綺凜 我的分辨率是3000*2000,系统缩放200%,可能是这个不一般的长宽比,导致出现了不一般的情况。(/ω\)
        1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.140(Google Chrome 64.0.3282.140)
          @乡下来的喵 这个问题解决了,你可以更新看看,顺便修复了很多显示问题
  20. seasmogchan  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 65.0.3325.146(Google Chrome 65.0.3325.146)
    你好!在某些视频页面下右侧的按键会无法正常显示。例如av20448584 av20458413。你能找出是哪个元素导致的吗?虽然不影响使用φ( ̄∇ ̄o)
    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.140(Google Chrome 64.0.3282.140)
      @seasmogchan 你说的无法正常显示应该指的是按照原始的样子显示吧,这个是因为按钮那部分的结构改了,而且因为过于复杂需要花一点精力来弄,目前因学业这个问题暂时拖更(
    2. 神代綺凜  Mac OS X(Mac OS X) / Safari(Safari)
      @seasmogchan 等电脑修好了我再看。。目前无能为力_(:3」∠)_