给牛客改了一套宽屏CSS

如题,给牛客网改了一套CSS,主要适配讨论区

没办法,程序员的手,闲不住的

开门见山

废话不多说,用户样式需要通过浏览器插件才能安装,既然牛客网平均 Chrome 72 ,那么其实你只需要有一个 stylish 或者 stylus(推荐) 插件即可。

事实上,Tampermonkey / Greasemonkey 等脚本管理器亦可。

地址: 牛客 宽屏优化 + 页面调整

功能简介

牛客网的主要布局区域宽度是 960px 的,实际上我的显示器是 1080p,我也相信其他同学不乏有 2k 甚至 4k 显示器的,那么在这个视区大小下,960 其实就显得有些窄了。

主要 Feature

  1. 通过媒体查询,当你的视区宽带大于 1440px 时,把主要区域拉长到 1440px。
  2. 将顶部的牛客网 header 固定,不随窗口滚动,阅读时不占用视区大小。
  3. 将评论区的楼中楼进行瘦身,同时还缩小了评论区的图片,改为了鼠标放上去时放大。
    这一改动主要是为了防止有些图片过大而影响浏览体验
  4. 将用户 ID 的颜色进行了微调,亮度调低,字号放大,但是保留了原有的颜色,至少不刺眼了。
  5. 将楼中楼区域的背景色变淡,提高阅读体验。

非主要 Feature

  1. 可以选择隐藏一些不重要的页面元素,例如广告、例如商业推广。
  2. 添加了一些无伤大雅的过渡效果。
  3. 放大了列表页的标题字号。
  4. 在拉长视区的同时,调整兼容了一下其他模块对1440px的兼容。

重点

以上所有功能,都是 可选的! 可选的!

你可以按照这个图片,自定义你需要的功能:
自定义功能

最后放一张简单的效果图吧:
效果图

欢迎大家尝试、使用!

如果有什么建议,可以在评论反馈。

ps:如果你使用Tampermonkey等脚本管理器,请认准:
脚本管理器使用

#前端#
全部评论
大佬优秀,实际上我们在改版宽屏了,因为涉及的页面比较多,所以上线可能要稍后一点。 960px用了4年多的确要换了。
点赞 回复
分享
发布于 2019-03-18 22:40
6666
点赞 回复
分享
发布于 2019-03-18 22:35
联易融
校招火热招聘中
官网直投
66666
点赞 回复
分享
发布于 2019-03-18 23:54
巨佬
点赞 回复
分享
发布于 2019-03-19 01:17
膜拜
点赞 回复
分享
发布于 2019-03-19 08:19
666
点赞 回复
分享
发布于 2019-03-19 08:55
tql
点赞 回复
分享
发布于 2019-03-19 09:21
.cm-s-monokai.CodeMirror {     font-family: Monaco,Menlo,'Ubuntu Mono',Consolas,source-code-pro,monospace;     font-size: 16px; } 我只改了编程字体,默认的Courier New看腻了
点赞 回复
分享
发布于 2019-03-19 11:19
巨佬
点赞 回复
分享
发布于 2019-03-19 11:21

相关推荐

点赞 4 评论
分享
牛客网
牛客企业服务