码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-06-09 23:31:40      阅读:58      评论:0      收藏:0      [点我收藏+]

标签:png   article   inter   boa   events   透明   css   我不知道   static   

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

技术图片

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

技术图片

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

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

技术图片

因为要通过不同类型的的 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 标签的父级元素问题,需要增加改变一下定位属性值。

技术图片

然后再把最外层的元素增加一个定位特性,这样就可以让 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 了。

技术图片

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

技术图片

哦了,搞定,上班……

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

标签:png   article   inter   boa   events   透明   css   我不知道   static   

原文地址:https://www.cnblogs.com/webshare2020/p/13081527.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!