神代綺凜

[已完结] 哔哩哔哩 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硬盘/[email protected]点击购买】(经常售罄,请抓紧机会)
年付$47CN2线路,1核/1G内存/20G硬盘/[email protected]点击购买
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

457 comments

  1. soulGamerrr  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 76.0.3809.100(Google Chrome 76.0.3809.100)

    大佬我什么时候能像你一样! ̄﹃ ̄

  2. seasmogchan  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 76.0.3809.132(Google Chrome 76.0.3809.132)

    完结版打开视频界面时背景好像会被发白头透明的图层盖住。是故意设计成这样的吗?还是bug了?

    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 76.0.3809.132(Google Chrome 76.0.3809.132)
      @seasmogchan

      已修复

      1. seasmogchan  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 76.0.3809.132(Google Chrome 76.0.3809.132)
        @神代綺凜

        还是发白。我重新安装了样式也还是如此
        chrome版本:76.0.3809.132(正式版本) (64 位)
        windows:win10 专业版 18362.329

        1. 神代綺凜  Mac OS X 10.14.6(Mac OS X 10.14.6) / Google Chrome 76.0.3809.132(Google Chrome 76.0.3809.132)
          @seasmogchan

          我和你的环境几乎一样,可以提供下截图吗

          1. seasmogchan  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 76.0.3809.132(Google Chrome 76.0.3809.132)
            1. 神代綺凜  Mac OS X(Mac OS X) / Safari(Safari)
              @seasmogchan

              但这个效果我也不是很满意,在考虑怎么改进

            2. 神代綺凜  Mac OS X(Mac OS X) / Safari(Safari)
              @seasmogchan

              原来指的是这个,这个是故意的,为了不给边缘文字造成阅读困扰淡化了背景

              1. 余水  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 76.0.3809.132(Google Chrome 76.0.3809.132)
                @神代綺凜

                现在的背景感觉蒙了一层白纸。。。还是觉得以前的背景好看点
                ps:为啥更新了之后背景图就换了,安装更新的网址也没有设置背景图的设置就直接装上了

                1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 76.0.3809.132(Google Chrome 76.0.3809.132)
                  @余水

                  现在一切从简,不再大范围修改样式,所以不给自定义背景图,否则会对文字可读性造成影响

              2. seasmogchan  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 76.0.3809.132(Google Chrome 76.0.3809.132)
                @神代綺凜

                话说,稍后再看界面可以适配一下背景图片吗?

                1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 76.0.3809.132(Google Chrome 76.0.3809.132)
                  @seasmogchan

                  本来是有的,但是修了一个bug除了另一个bug,等我想想视频那里怎么改进了一起更

              3. seasmogchan  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 76.0.3809.132(Google Chrome 76.0.3809.132)
                @神代綺凜

                ୧(๑•̀⌄•́๑)૭ 那就期待你的改进啦!

  3. &  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 76.0.3809.132(Google Chrome 76.0.3809.132)

    ヾ(´・ ・`。)ノ"更新了还是有广告欸

    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 76.0.3809.132(Google Chrome 76.0.3809.132)
      @&

      麻烦截个广告所在位置的图
      传到图床上贴一下链接 https://sm.ms

      1. &  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 76.0.3809.132(Google Chrome 76.0.3809.132)
        1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 76.0.3809.132(Google Chrome 76.0.3809.132)
          @&

          好了,写的时候忘了关adblock了

          1. &  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 76.0.3809.132(Google Chrome 76.0.3809.132)
            @神代綺凜

            辛苦大大了ヾ(≧∇≦*)ゝ

  4. 呆毛洗衣机  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 76.0.3809.132(Google Chrome 76.0.3809.132)

    b站首页大改版了 绮凛大大有空可以考虑兼容下么

    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 76.0.3809.132(Google Chrome 76.0.3809.132)
      @呆毛洗衣机

      周末改

      1. 呆毛洗衣机  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 76.0.3809.132(Google Chrome 76.0.3809.132)
        @神代綺凜

        辛苦了( ,,´・ω・)ノ"

  5. seasmogchan  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 76.0.3809.132(Google Chrome 76.0.3809.132)

    首页右侧导航条“排序”和“返回顶部”两个按钮鼠标悬停时显示的文字错位或者不全了。似乎是B站某次修改后就出现了这个问题。期待在你的完结版里能够修改好୧(๑•̀⌄•́๑)૭

  6. 余水  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 76.0.3809.132(Google Chrome 76.0.3809.132)

    最近有更新打算嘛,可能B站的样式改了,搜索页面的结果框背景变成透明的了

    1. 神代綺凜  Mac OS X 10.14.6(Mac OS X 10.14.6) / Google Chrome 76.0.3809.100(Google Chrome 76.0.3809.100)
      @余水

      最近工作比较忙……大概下周或者下下周会出个很简单的完结版样式

      1. 余水  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 76.0.3809.132(Google Chrome 76.0.3809.132)
        @神代綺凜

        完结版的意思是以后不再维护了嘛

        1. 神代綺凜  Mac OS X 10.14.6(Mac OS X 10.14.6) / Google Chrome 76.0.3809.100(Google Chrome 76.0.3809.100)
          @余水

          是,就是保留所有我自己做的 nekopara 素材的样式,不再修改b站本身的布局,以后只要没有大问题都不会再更新了

  7. 迷路也是路  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 75.0.3770.142(Google Chrome 75.0.3770.142)

    是因为我的网不行吗? 背景图经常加载不出来。。。

  8. Vergissmeinnicht  Windows 10 x64 Edition(Windows 10 x64 Edition) / Firefox 68.0(Firefox 68.0)

    我的推广那一栏(在线人数、投稿数下面)的图片刷不出来了。。

    1. 神代綺凜  Mac OS X 10.14.5(Mac OS X 10.14.5) / Google Chrome 75.0.3770.142(Google Chrome 75.0.3770.142)
      @Vergissmeinnicht

      静态资源已经迁移了,现在图片加载应应该会快很多了

      1. Vergissmeinnicht  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 75.0.3770.142(Google Chrome 75.0.3770.142)
        @神代綺凜

        解决了,原来是我装的一个广告拦截扩展的问题(→_→)

  9. Sora  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 74.0.3729.169(Google Chrome 74.0.3729.169)

    使用这个皮肤,B站订阅的动态一直刷新不出来,一片空白,要卡很久

    1. 神代綺凜  Mac OS X 10.14.5(Mac OS X 10.14.5) / Google Chrome 75.0.3770.142(Google Chrome 75.0.3770.142)
      @Sora

      如果你说的是右上角导航栏那个,请看文章的“使用”部分

    2. 神代綺凜  Mac OS X 10.14.5(Mac OS X 10.14.5) / Google Chrome 75.0.3770.142(Google Chrome 75.0.3770.142)
      @Sora

      今晚会迁移静态资源到 Coding Pages 改善访问

  10. 空白  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 74.0.3729.131(Google Chrome 74.0.3729.131)

    好腻害OωO

  11. Lolicon  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 75.0.3770.142(Google Chrome 75.0.3770.142)

    视频播放页板块hover加个阴影跟丢丢透明w?

    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 75.0.3770.142(Google Chrome 75.0.3770.142)
      @Lolicon

      我打算放弃这些大杂烩样式了,实在是不太行

      1. Lolicon  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 75.0.3770.142(Google Chrome 75.0.3770.142)
        @神代綺凜

        是要重做(咕咕咕)了吗

        1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 75.0.3770.142(Google Chrome 75.0.3770.142)
          @Lolicon

          也不算重做,大概就是去掉所有杂七杂八的

          目前在入职培训,先咕到一周后

          1. Lolicon  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 75.0.3770.142(Google Chrome 75.0.3770.142)
            @神代綺凜

            实时版聊海星233
            嘛辛苦了鸭~

  12.   Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.204(Google Chrome 64.0.3282.204)

    那个,背景刷不出来了

  13. XZL  Windows 8.1 x64 Edition(Windows 8.1 x64 Edition) / Google Chrome 69.0.3497.100(Google Chrome 69.0.3497.100)

    不知能否在搜索结果中出现的“番剧”部分增加白色背景(目前为无背景)以减少和自定义背景的冲突呢?

  14. ㄒㄐㄍㄢ  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 74.0.3729.169(Google Chrome 74.0.3729.169)

    麒麟麒麟,搜索结果页面,如果切换了分类(综合、视频、用户啥的),样式会崩,刷新之后又回来了,另外分类栏能不能加个背景,看不清。。。

    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 74.0.3729.169(Google Chrome 74.0.3729.169)
      @ㄒㄐㄍㄢ

      好的,马上就修(咕咕咕)

  15. 神呪様  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 74.0.3729.131(Google Chrome 74.0.3729.131)

    拜托了,无论是新版播放器还是老版播放器一定要把评论居中好吗?划到下面偏向一边我要死了啊啊啊啊OωO

  16. YYDXDEKR  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 74.0.3729.108(Google Chrome 74.0.3729.108)

    播放页面的 侧栏相关推荐 遇到标题过长的情况会伸到背景外面去

  17. 风吹名无  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 70.0.3538.110(Google Chrome 70.0.3538.110)

    主页可用,点击具体的分区就会失效(播放页无误)
    你有什么头猪吗?
    (感觉大问题没有,毕竟结构一致)

  18. Tsing  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 73.0.3683.86(Google Chrome 73.0.3683.86)

    新版播放器宽屏模式下右侧与弹幕内容显示区域有重叠,部分超出。

    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 73.0.3683.103(Google Chrome 73.0.3683.103)
      @Tsing

      宽屏模式下原本就会覆盖弹幕列表,这个不是BUG
      超出一部分以及边框轮廓样式问题是已知问题,这阵子忙完后找时间细调

  19. ㄒㄐㄍㄢ  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 73.0.3683.103(Google Chrome 73.0.3683.103)

    在看番剧的时候新版h5播放器有bug,视频以下的部分背景会透明(普通视频没有这个bug) 想看个评论都看不清

    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 73.0.3683.103(Google Chrome 73.0.3683.103)
      @ㄒㄐㄍㄢ

      看了下,番剧页面的元素id和普通视频是不一样的,需要调一下
      这阵子要肝毕业论文比较忙,先暂时忍一会吧

      1. ㄒㄐㄍㄢ  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 73.0.3683.103(Google Chrome 73.0.3683.103)
        @神代綺凜

        邮件QQ给我分到垃圾箱了,现在才看到。。。其实之前就看到这个小bug了,但是记得你说等B站新UI来着,于是我就切回旧版本的啦 最近想起来B站有新h5播放器了,一切回去发现bug还在,以防万一,我就汇报一下吧

        1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 73.0.3683.103(Google Chrome 73.0.3683.103)
          @ㄒㄐㄍㄢ

          主要因为我平时不用PC补番来着,所以一直没注意有这个问题

          1. ㄒㄐㄍㄢ  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 73.0.3683.103(Google Chrome 73.0.3683.103)
            @神代綺凜

            我也少,正好前几天碰巧,另外为什么这个消息没有提醒 甚至不在垃圾箱里——连邮件都没有 我记得以前是有的啊

            1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 73.0.3683.103(Google Chrome 73.0.3683.103)
              @ㄒㄐㄍㄢ

              emmm,可我自己都有收到邮件提醒

              1. ㄒㄐㄍㄢ  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 73.0.3683.103(Google Chrome 73.0.3683.103)
                @神代綺凜

                刚刚那条有提醒,到垃圾箱了,但是之前的没有

  20. 小见  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 72.0.3626.121(Google Chrome 72.0.3626.121)

    大佬用了之后动态预览会加载不出来

    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 73.0.3683.103(Google Chrome 73.0.3683.103)
      @小见

      请根据“使用”所说的步骤设置一下