给牛客改了一套宽屏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
巨佬
点赞 回复 分享
发布于 2019-03-19 11: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
tql
点赞 回复 分享
发布于 2019-03-19 09:21
666
点赞 回复 分享
发布于 2019-03-19 08:55
膜拜
点赞 回复 分享
发布于 2019-03-19 08:19
巨佬
点赞 回复 分享
发布于 2019-03-19 01:17
66666
点赞 回复 分享
发布于 2019-03-18 23:54
点赞 回复 分享
发布于 2019-03-18 22:41
6666
点赞 回复 分享
发布于 2019-03-18 22:35

相关推荐

面了这么多场试,总有公司总喜欢压力面一个小时面试+手撕,哪里不会就点哪里,说了不会不会还继续追着问不尊重求职者,稍微有些细节记不清了,就开始怀疑项目真实性以及人格让求职者开摄像头但是自己不开,说话声音还贼小,pardon几次就开始不耐烦的不知道这个算不算,手撕的时候,面试官人跑了。。。最后快结束才来
一纸丿繁华丶:你换位思考一下,自己在职场被领导push麻了,身心俱疲,现在有个机会让你放松一下,体验一把上位者的感觉,还能看着那些高学历人才、未来自己的竞争者,抓耳挠腮、手足无措的样子,没给你当场笑出来就不错了,理解一下面试官吧。
点赞 评论 收藏
分享
05-11 11:48
河南大学 Java
程序员牛肉:我是26届的双非。目前有两段实习经历,大三上去的美团,现在来字节了,做的是国际电商的营销业务。希望我的经历对你有用。 1.好好做你的CSDN,最好是直接转微信公众号。因为这本质上是一个很好的展示自己技术热情的证据。我当时也是烂大街项目(网盘+鱼皮的一个项目)+零实习去面试美团,但是当时我的CSDN阅读量超百万,微信公众号阅读量40万。面试的时候面试官就告诉我说觉得我对技术挺有激情的。可以看看我主页的美团面试面经。 因此花点时间好好做这个知识分享,最好是单拉出来搞一个板块。各大公司都极其看中知识落地的能力。 可以看看我的简历对于博客的描述。这个帖子里面有:https://www.nowcoder.com/discuss/745348200596324352?sourceSSR=users 2.实习经历有一些东西删除了,目前看来你的产出其实很少。有些内容其实很扯淡,最好不要保留。有一些点你可能觉得很牛逼,但是面试官眼里是减分的。 你还能负责数据库表的设计?这个公司得垃圾成啥样子,才能让一个实习生介入数据库表的设计,不要写这种东西。 一个公司的财务审批系统应该是很稳定的吧?为什么你去了才有RBAC权限设计?那这个公司之前是怎么处理权限分离的?这些东西看着都有点扯淡了。 还有就是使用Redis实现轻量级的消息队列?那为什么这一块不使用专业的MQ呢?为什么要使用redis,这些一定要清楚, 就目前看来,其实你的这个实习技术还不错。不要太焦虑。就是有一些内容有点虚了。可以考虑从PR中再投一点产出
点赞 评论 收藏
分享
喜欢核冬天的哈基米很想上市:会爆NullPointerException的
点赞 评论 收藏
分享
评论
点赞
4
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务