通过stylish调整SF首页样式来增加识别度

林小志

SF 的首页改版之后,我不知道大家的感受是怎么样的,我个人还是不太习惯,感觉有点杂乱,所有的类别都放在一起了。

clipboard.png

为了让自己舒服一点,于是我又一次打开了 stylish 这个小玩意,修改了一下样式,最后就是这样了。

clipboard.png

我不知道别人会不会觉得舒服一点,但是我自己觉得舒服了一点了,识别度至少是清楚了。

不过整个的时候,发现有 SF 首页有一个地方的 CSS 属性不知道是做什么用的。

clipboard.png

因为要通过不同类型的的 tag 来处理样式,而最外层的父级元素并没有一个特别标识的类名,这个特别标识的类名是在最里层,所以只有通过定位方式来处理。

  • 专栏:#407600 => .middle .news-list .news-item .text-live
  • 问答:#8C5825 => .middle .news-list .news-item .text-qa
  • 专栏:#468ee5 => .middle .news-list .news-item .text-article
  • 头条:没有颜色,也没有类名

找到这几个之后,再把这里的 a 标签增加一个 :after 定位一下,撑满外层列表元素的背景就好了。不过因为这个 a 标签的父级元素问题,需要增加改变一下定位属性值。

clipboard.png

然后再把最外层的元素增加一个定位特性,这样就可以让 a 标签的 :after 定位在一个列表的位置上的。不过呢,有一个问题就是,当 a 标签的 :after 定位之后,会覆盖在内容之后,因此需要增加 z-index: -1;,让背景到内容底部去,但是定位好像有点怪怪的,算了,不管,反正这个 :after 是不需要点击的,那么就再来一个 pointer-events: none;

嗯,现在这样就差不多了。所以最后的代码就是:

.middle .news-list .news-item {position: relative;}
.middle .news-list .news-item .news__item-info .news__item-meta {position: static;}
.middle .news-list .news-item .text-article:after,
.middle .news-list .news-item .text-live:after,
.middle .news-list .news-item .text-qa:after {content:"";position: absolute;top:0;left:0;right:0;bottom:0;background-color:#468ee512;pointer-events:none;}
.middle .news-list .news-item .text-live:after {background-color:#40760012;}
.middle .news-list .news-item .text-qa:after {background-color:#8C582512;}

因为只是首页,所以 stylish 中记得加一下域名控制,然后就 OK 了。

clipboard.png

如果好奇 background-color:#8C582512; 这里的颜色值为什么这么长,我只想说,因为我一般情况下是用 Chrome 的,然后又有更新癖好,所以,目前是最新版的 Chrome,这个颜色值的最后两位是透明度。

clipboard.png

哦了,搞定,上班……

阅读 1.5k

“查宿舍”……How To Make Love……
现在博客变专栏了……感觉专栏好像要写很专业的连载的感觉……好怕怕……写的都是很随意的东西,那就选择“转载...
avatar
林小志
《CSS那些事儿》作者、前端开发工程师
3.8k 声望
1.6k 粉丝
0 条评论
avatar
林小志
《CSS那些事儿》作者、前端开发工程师
3.8k 声望
1.6k 粉丝
文章目录
宣传栏