Re:萌娘百科上的黑幕实现
Re:萌娘百科上的黑幕
說明
本文所有的代碼均來自萌娘百科。萌娘百科打錢!
第零段話(我想說的)
這方面不是我的專長,所以有的地方說的不對也請糾正!
我可不是萌娘百科的員工或者管理員或者收了錢
我只是對這個黑幕很感興趣就去做了點研究而已……
雖然這篇博客帶有一些幽默性
但是這些不是廣告!!!
第一段話(復(fù)制東西時會自動添加滴)
:https://zh.moegirl.org/MediaWiki:Mobile.css
本文引自萌娘百科(https://zh.moegirl.org),文字內(nèi)容默認(rèn)使用《知識共享 署名-非商業(yè)性使用-相同方式共享 3.0》協(xié)議。
第二段話(引用MediaWiki:Common.css的注釋)
1 /* 2 * 放置于這里的CSS將應(yīng)用于所有皮膚 3 * 萌娘百科僅開放Vector皮膚 4 * 請尊重萌娘百科版權(quán),以下代碼除非注明均是管理員手敲出來的!!!復(fù)制需要注明源自萌娘百科,并且附上URL地址http://zh.moegirl.org/MediaWiki:Common.css 5 * 版權(quán)協(xié)定:知識共享 署名-非商業(yè)性使用-相同方式共享 3.0 6 * 復(fù)制之后請把圖片換成自己網(wǎng)站上URL地址! 7 */介紹
不動它,它就是個黑條子。你盯著它看什么都不會發(fā)生。
當(dāng)你把鼠標(biāo)移到了黑幕上,一些神奇的事情就會發(fā)生……
手機?or?平板打開方式
示例
這條黑幕是用來讓你鼠標(biāo)懸停的
用處
當(dāng)然是隱藏一些見不得人的話啦!
不過這樣也可以讓人很好奇呢!
黑幕模版是整個萌百中,最早建立的功能模板。最初這個模板是效仿英語維基百科,用于那些可能會涉及到劇情的段落,避免劇透。后來逐漸被用于吐槽。
最初編輯們使用這個黑幕也只是進(jìn)行一些適當(dāng)?shù)耐虏?#xff0c;避免訪客將吐槽的內(nèi)容誤以為是條目的正文內(nèi)容。但是,隨著新編輯的加入,黑幕就逐漸開始泛濫了。
?
當(dāng)然,還會有些刮不開的……
CSS
?放到“頁面定制CSS代碼”中
1 .heimu, .heimu a, a .heimu, .heimu a.new { 2 background-color: #252525; 3 color: #252525; 4 text-shadow: none; 5 } 6 .heimu:hover, .heimu:active, 7 .heimu:hover .heimu, .heimu:active .heimu { 8 color: white !important; 9 } 10 .heimu:hover a, a:hover .heimu, 11 .heimu:active a, a:active .heimu { 12 color: lightblue !important; 13 } 14 .heimu:hover .new, .heimu .new:hover, .new:hover .heimu, 15 .heimu:active .new, .heimu .new:active, .new:active .heimu { 16 color: #BA0000 !important; 17 } 18 19 /*:https://zh.moegirl.org/MediaWiki:Mobile.css 本文引自萌娘百科(https://zh.moegirl.org),文字內(nèi)容默認(rèn)使用《知識共享 署名-非商業(yè)性使用-相同方式共享 3.0》協(xié)議。*/html
首先點開編輯HTML源碼
以博客園為例
然后只要在你想要加黑幕的話之前加上
<span class="heimu" title="你知道的太多了">在你想要加黑幕的話之后加上
</span>即可
?
當(dāng)然,要是覺得這句話太長不想打,可以先復(fù)制好前半句,將你想要加黑幕的話先“選擇背景顏色”為黑色(都行),這時候在HTML源碼里面就能清晰的看到你要加黑幕的是哪里,最后只要把“選擇背景顏色”的<span……>粘貼為 <span class="heimu" title="你知道的太多了"> 即可。
注意
小彈框里的字
當(dāng)然了,當(dāng)鼠標(biāo)放在黑幕上時,小彈框里的字是可以自己設(shè)置的哦
比如說萌娘百科的默認(rèn)黑幕彈出字就是“你知道的太多了”
“你知道的太多了”
如今網(wǎng)絡(luò)上多用于調(diào)侃,分幾種:
//為什么這里復(fù)制的時候不會添加“版權(quán)協(xié)議廣告”呢?要不我手動添加一個吧。
:你知道的太多了(https://zh.moegirl.org/%E4%BD%A0%E7%9F%A5%E9%81%93%E7%9A%84%E5%A4%AA%E5%A4%9A%E4%BA%86)
本文引自萌娘百科(https://zh.moegirl.org),文字內(nèi)容默認(rèn)使用《知識共享 署名-非商業(yè)性使用-相同方式共享 3.0》協(xié)議。
還有
還有就是,我很喜歡萌娘百科!!!
Upd
(2020-02-29 08:36:37)
轉(zhuǎn)載時請依然附上本文鏈接!
(2020-03-01 20:59:55)
本文中的那些版權(quán)聲明,不是指我,而是指萌娘百科啊……算了我也不修改了,
轉(zhuǎn)載時請依然附上本文鏈接!
手機?or?平板如何看黑幕里的內(nèi)容?
(2020-03-06?11:34:47)
手機
蘋果手機 貌似是點一下就會顯示?再點一下別的地方就消失了
安卓手機?暫未嘗試
平板
蘋果平板?長按出現(xiàn)選擇文字?將那段黑幕選中即可
安卓平板?暫未嘗試
總結(jié)
以上是生活随笔為你收集整理的Re:萌娘百科上的黑幕实现的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: STM32--学习笔记 常用协议总结
- 下一篇: 苹果手机计算机怎样拉到桌面,苹果手机怎样