Re:萌娘百科上的黑幕实现
Re:萌娘百科上的黑幕
说明
本文所有的代码均来自萌娘百科。萌娘百科打钱!
第零段话(我想说的)
这方面不是我的专长,所以有的地方说的不对也请纠正!
我可不是萌娘百科的员工或者管理员或者收了钱
我只是对这个黑幕很感兴趣就去做了点研究而已……
虽然这篇博客带有一些幽默性
但是这些不是广告!!!
第一段话(复制东西时会自动添加滴)
阅读更多:https://zh.moegirl.org/MediaWiki:Mobile.css
本文引自萌娘百科(https://zh.moegirl.org),文字内容默认使用《知识共享 署名-非商业性使用-相同方式共享 3.0》协议。
第二段话(引用MediaWiki:Common.css的注释)
/*
* 放置于这里的CSS将应用于所有皮肤
* 萌娘百科仅开放Vector皮肤
* 请尊重萌娘百科版权,以下代码除非注明均是管理员手敲出来的!!!复制需要注明源自萌娘百科,并且附上URL地址http://zh.moegirl.org/MediaWiki:Common.css
* 版权协定:知识共享 署名-非商业性使用-相同方式共享 3.0
* 复制之后请把图片换成自己网站上URL地址!
*/
介绍
不动它,它就是个黑条子。你盯着它看什么都不会发生。
当你把鼠标移到了黑幕上,一些神奇的事情就会发生……
示例
这条黑幕是用来让你鼠标悬停的
用处
当然是隐藏一些见不得人的话啦!
不过这样也可以让人很好奇呢!
黑幕模版是整个萌百中,最早建立的功能模板。最初这个模板是效仿英语维基百科,用于那些可能会涉及到剧情的段落,避免剧透。后来逐渐被用于吐槽。
最初编辑们使用这个黑幕也只是进行一些适当的吐槽,避免访客将吐槽的内容误以为是条目的正文内容。但是,随着新编辑的加入,黑幕就逐渐开始泛滥了。
当然,还会有些刮不开的……

CSS
放到“页面定制CSS代码”中
.heimu, .heimu a, a .heimu, .heimu a.new {
background-color: #252525;
color: #252525;
text-shadow: none;
}
.heimu:hover, .heimu:active,
.heimu:hover .heimu, .heimu:active .heimu {
color: white !important;
}
.heimu:hover a, a:hover .heimu,
.heimu:active a, a:active .heimu {
color: lightblue !important;
}
.heimu:hover .new, .heimu .new:hover, .new:hover .heimu,
.heimu:active .new, .heimu .new:active, .new:active .heimu {
color: #BA0000 !important;
}
/*阅读更多:https://zh.moegirl.org/MediaWiki:Mobile.css 本文引自萌娘百科(https://zh.moegirl.org),文字内容默认使用《知识共享 署名-非商业性使用-相同方式共享 3.0》协议。*/
html
首先点开编辑HTML源码
以博客园为例

然后只要在你想要加黑幕的话之前加上
<span class="heimu" title="你知道的太多了">
在你想要加黑幕的话之后加上
</span>
即可
当然,要是觉得这句话太长不想打,可以先复制好前半句,将你想要加黑幕的话先“选择背景颜色”为黑色(都行),这时候在HTML源码里面就能清晰的看到你要加黑幕的是哪里,最后只要把“选择背景颜色”的<span……>粘贴为 <span class="heimu" title="你知道的太多了"> 即可。
注意
小弹框里的字
当然了,当鼠标放在黑幕上时,小弹框里的字是可以自己设置的哦
比如说萌娘百科的默认黑幕弹出字就是“你知道的太多了”
“你知道的太多了”
如今网络上多用于调侃,分几种:
- 对敏感问题的调侃。使用者可能有“提醒对方注意”、“隐晦地表示自己的关注”或“活跃气氛”意图。
- 调侃对方火星了,刚刚知道很久以前的消息或者人尽皆知的事情。
- 针对对方调侃自己的回复。承认对方的同时又不失颜面与幽默感。
//为什么这里复制的时候不会添加“版权协议广告”呢?要不我手动添加一个吧。
阅读更多:你知道的太多了(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),文字内容默认使用《知识共享 署名-非商业性使用-相同方式共享 3.0》协议。
还有
还有就是,我很喜欢萌娘百科!!!
Upd
(2020-02-29 08:36:37)
转载时请依然附上本文链接!
(2020-03-01 20:59:55)
本文中的那些版权声明,不是指我,而是指萌娘百科啊……算了我也不修改了,
转载时请依然附上本文链接!
手机 or 平板如何看黑幕里的内容?
(2020-03-06 11:34:47)
手机
苹果手机 貌似是点一下就会显示 再点一下别的地方就消失了
安卓手机 暂未尝试
平板
苹果平板 长按出现选择文字 将那段黑幕选中即可
安卓平板 暂未尝试
Re:萌娘百科上的黑幕实现的更多相关文章
- python_爬虫一之爬取糗事百科上的段子
目标 抓取糗事百科上的段子 实现每按一次回车显示一个段子 输入想要看的页数,按 'Q' 或者 'q' 退出 实现思路 目标网址:糗事百科 使用requests抓取页面 requests官方教程 使用 ...
- 艺萌TCP文件上传下载及自动更新系统介绍(TCP文件传输)(一)
艺萌TCP文件上传下载及自动更新系统介绍(TCP文件传输) 该系统基于开源的networkComms通讯框架,此通讯框架以前是收费的,目前已经免费并开元,作者是英国的,开发时间5年多,框架很稳定. 项 ...
- 转载百度百科上的强回复,关于spring的IOC和DI
IoC与DI 首先想说说IoC(Inversion of Control,控制倒转).这是spring的核心,贯穿始终.所谓IoC,对于spring框架来说,就是由spring来负责控制对象的生命 ...
- 维基百科上—数据仓库、数据挖掘、OLAP三者之间的区别
数据仓库可以作为数据挖掘和OLAP等分析工具的资料来源,由于存放于数据仓库中的资料,必需经过筛选与转换,因此可以避免分析工具使用错误的资料,而得到不正确的分析结果. 数据挖掘和OLAP同为分析工具,其 ...
- CTS/APIO后文化课游记
根据ghj1222的尿性,干什么事都要写一个游记划水记啥的...然后就写嘛... 现在是5.30微机课,先开个坑,学校6.5放假,我将于6.5后开始更新本文 APIO回来后发生的事真的特别多...有的 ...
- Cnblogs关于嵌入js和css的一些黑科技
#pong .spoiler{cursor:none;display:inline-block;line-height:1.5;}sup{cursor:help;color:#3BA03B;} Pon ...
- 【Unity Shader】Unity Chan的卡通材质
写在前面 时隔两个月我终于来更新博客了,之前一直在学东西,做一些项目,感觉没什么可以分享的就一直没写.本来之前打算写云彩渲染或是Compute Shader的,觉得时间比较长所以打算先写个简单的. 今 ...
- ECS7天实践进阶训练营Day2:基于阿里云ECS部署MediaWiki
一.概述 MediaWiki是全球最著名的开源Wiki程序,运行于PHP+MySQL环境,MediaWiki从2002年被作为维基百科的系统软件,并由大量其他应用实例(例如萌娘百科),因此MediaW ...
- CS起源-havana地图红方打法分析
作者:海底淤泥 havana是美国第一人称射击游戏<反恐精英>中的地图之一,编号为cs_havana,这张地图发生在古巴哈瓦那的某座城市中,恐怖分子们挟持了几名美裔的重要政治人物,以此为筹 ...
随机推荐
- 实用代码|Linux定时检查应用状态
有时候,我们挂在服务器上的应用会因为一些特殊情况挂掉,致使项目经理又对我们说:又挂了!赶紧去看看!于是又了以下脚本,使用shell编写,用于定时检查应用情况,挂掉则重启.这里以tomcat为例. 根据 ...
- 百度搜索关键词联想API JSONP使用实例
许多搜索引擎都提供了关键词联想api,且大多数都是jsonp. Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获 ...
- BZOJ 3691 游行
题目传送门 分析: 没被访问的点要C费用,跑一次路要C费用 把这两个统一一下试试... 那就是每次不标记起点或者终点 那就是路径覆盖了2333 二分图,x 部 i 号点与 y 部 j 号点连 i 到 ...
- Redis(八):zset/zadd/zrange/zrembyscore 命令源码解析
前面几篇文章,我们完全领略了redis的string,hash,list,set数据类型的实现方法,相信对redis已经不再神秘. 本篇我们将介绍redis的最后一种数据类型: zset 的相关实现. ...
- git---如何在远程某个分支的基础上新建分支
问题场景 技术主管让你去再某个git分支上新建一个分支去做你的项目,那么如何在原远程分支的基础上新建自己的分支呢? 解决方法 按照以下命令敲即可 git branch newBranch //新建本地 ...
- 线程池技术之:ThreadPoolExecutor 源码解析
java中的所说的线程池,一般都是围绕着 ThreadPoolExecutor 来展开的.其他的实现基本都是基于它,或者模仿它的.所以只要理解 ThreadPoolExecutor, 就相当于完全理解 ...
- Docker Mysql部署与使用
参考链接:Docker 安装 Mysql 详解
- 惠普电脑win10关闭自动调节亮度
自动调节亮度真的太烦人了,突然从亮的画面变暗,又从暗的亮度变量,眼睛受不了.但是试了很多种方法都不行. 方法 第一种: 有一些电脑是有在设置--->显示界面--->有一个 关闭自动调节 按 ...
- 下载STRING数据库检索互作关系结果为空,但是在STRING网站却能检索出互作关系,为什么呢???关键词用的是蛋白ID(ENSP开头)
首先介绍下两种方法: 一.本地分析 1.在STRING数据库下载人的互作文件,如下图,第一个文件 https://string-db.org/cgi/download.pl?sessionId=HGr ...
- Linux系统的用户和用户组管理
一.用户账户管理 Linux/Unix是一个用户.多任务的操作系统:在讲Linux账号及账户组管理之前,先简单了解一下多用户.多任务操作系统的基本概念. Linux的单用户多任务 在Linux下,当你 ...