通過stylish調整SF首頁樣式來增加識別度

Chao 發布于2019-08-29 14:08 / 2513人閱讀

摘要：因為要通過不同類型的的來處理樣式，而最外層的父級元素并沒有一個特別標識的類名，這個特別標識的類名是在最里層，所以只有通過定位方式來處理。不過因為這個標簽的父級元素問題，需要增加改變一下定位屬性值。

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 人臉識別相似度小度圖像識別

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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