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

Chao 发布于2019-08-29 14:08 / 2490人阅读

摘要：因为要通过不同类型的的来处理样式，而最外层的父级元素并没有一个特别标识的类名，这个特别标识的类名是在最里层，所以只有通过定位方式来处理。不过因为这个标签的父级元素问题，需要增加改变一下定位属性值。

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，这个颜色值的最后两位是透明度。

哦了，搞定，上班……

GPU云服务器云服务器增加样式 stylish 人脸识别相似度小度图像识别

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112945.html

浅聊SEO

摘要：白帽是搜索引擎提倡的，也是一种良性竞争。这当然不被搜索引擎提倡，甚至于说是头疼的，还需要想办法如何在搜索结果内剔除掉那些页面。影响搜索引擎对网站排名的合理和公正性。扁平化目录层次网站层次既然要清晰，目录最好不要超过三次分级。 SEO【search engine optimization】即搜索引擎优化。搜索引擎对用户来说，就是搜东西，那他是怎样展示关键词的相关东西呢？这就需要有人每天...

yedf 2019-08-02 16:14 评论0 收藏0
Javascript调试命令——你只会Console.log() ?

摘要：调试命令你只会对象提供对浏览器控制台的接入如的。分类输出不同类别信息的输出文字信息提示信息警告信息错误信息分组输出使用和包裹分组内容。中的参数作为计时器的标识，具有唯一性。应该需要其他的调试工具。 Javascript调试命令——你只会Console.log() ? Console 对象提供对浏览器控制台的接入（如：Firefox 的 Web Console）。不同浏览器上它的工作方式...

Ocean 2019-08-22 13:59 评论0 收藏0
前端能力中台化之路———— Fusion Design 成长史

摘要：快速摧毁敌军设施，杀伤有敌军生力量，最小化己方伤亡。所以前端工程师在修改完样式以后，需要反复和设计师还原度的问题。前端工程师依照主题包和设计稿进行前端工程开发。前端工程师很开心，因为不用去投入开发组件库和调整还原度。作者: 暮尘 2019年05月11日在上海举办 FDCON 2019。笔者有幸受到邀请，参与这次盛会。这篇文章就是演讲内容的文字提炼版。浅谈中台在开始正文内容之前，先简单聊聊...

MycLambert 2019-05-22 19:16 评论0 收藏0
Web前端开发规范手册

摘要：书写规范微软雅黑网页制作细节区代码规范区是指代码的和之间的内容。一、规范目的1.1 概述 ..................................................................................................................................... 1 二、...

番茄西红柿 2019-04-23 11:56 评论0 收藏0
Android防护扫盲篇

摘要：为了防止这种现象，我们可以对字节码进行混淆。动态链接库是目标文件的集合，目标文件在动态链接库中的组织方式是按照特殊方式形成的。一、已知防护策略 1.不可或缺的混淆 Java 是一种跨平台、解释型语言，Java 源代码编译成的class文件中有大量包含语义的变量名、方法名的信息，很容易被反编译为Java 源代码。为了防止这种现象，我们可以对Java字节码进行混淆。混淆不仅能将代码中的类...

CastlePeaK 2019-08-19 11:40 评论0 收藏0