User:Hikariii/代码样式

Test

感谢 鬼影233大佬的教程！受益颇多！

常用代码的实现效果

类型	代码名称	举例	实现效果
文字处理	引用条目	[[萌百娘]]	萌百娘
	插入日文	猫：{{lj|ねこ}}	猫：ねこ
	读写上标	{{ruby|聪明|rui zhi}}	聪明（rui zhi）
	插入黑幕	这孩子打小就聪明{{黑幕|rui zhi}}	这孩子打小就聪明rui zhi
	下划线	<u>这孩子打小就聪明</u>	这孩子打小就聪明
	删除线	这孩子打小就<del>聪明</del>	这孩子打小就聪明
	字体大小	这孩子打小就<big><big>聪明</big></big> （或small，可叠加）	这孩子打小就聪明
	引用名言	{{Cquote|这孩子打小就聪明|鲁迅|我不是我没有}}	“ 这孩子打小就聪明 ” ——鲁迅，我不是我没有
	下标&上标	这孩子打小就<sub>聪</sub><sup>明</sup>	这孩子打小就聪明
	文本hover	{{hover |before=聪明 | after={{color|red|睿智}}}}	聪明 睿智
	文字内HoverInline	这孩子打小就{{HoverInline| 聪明 | {{color|red|你才睿智}}| expand=after }}!	这孩子打小就 聪明 你才睿智!
通用处理	其他hover效果	这孩子打小就<div class="hovers-rotate">聪明</div> （"rotate"可替换成其他，详见模板:Hovers）	这孩子打小就 聪明
	鼠标长按	这孩子打小就<div class="actives-rotate">聪明</div> （"rotate"可替换成其他，详见actives）	这孩子打小就 聪明
	字体颜色	这孩子打小就{{color|red|聪明}}	这孩子打小就聪明
	居中	<center>“这孩子真聪明”</center>	“这孩子真聪明”
	隐藏显示	{{Hide|这孩子|打小就聪明}}	展开这孩子 打小就聪明
	滚动条	{{滚动条|code=容器|loop=true|wd=200|ht=100|border=0px solid #000 |item1={{滚动条|code=组件|[[File:Moegirl is watching you.jpg|100px]]}} |item2={{滚动条|code=组件|[[File:Moegirl is watching you2.jpg|100px]]}} }}
	滚动条切换	<div style="width:100px;height:100px;overflow:hidden;border:0px solid #000;"> {{滚动条|code=容器|loop=true|wd=200|ht=100|border=0px solid #000| timing=step | steps=2 |item1={{滚动条|code=组件|[[File:Moegirl is watching you.jpg|100px]]}} |item2={{滚动条|code=组件|[[File:Moegirl is watching you2.jpg|100px]]}} }} （更多滚动条参数设置，详见模板:滚动条）
	切换显示	这孩子打小就{{切换显示|段落1|聪明}}{{切换显示样式|段落1=color: red; font-weight: 700;}} {{切换显示按钮 |段落1@on=开 |段落1@off=关}} 更多切换显示参数设置，详见模板:切换显示	这孩子打小就聪明 开关
特殊模板	时钟	{{U:鬼影233/clock|hc=#111111|mc=#111111|sc=#111111|size=100|bg=#8EE594|rad=50px|utc=+8}} 更多时钟参数设置，详见User:鬼影233/clock
	"模型"旋转	{{ptl|define=frame|tl= <div class="hover-remote" style="width:4.167%;z-index:1;"> <div style="height:200px;"></div> <div class="hover-remote-target" style="top:0;left:0;pointer-events:none;"> {{image|type=outer|img=https://z3.ax1x.com/2021/07/07/R7gT2j.png|display=inline-block |resize=1330|width=200|height=200|x={{#expr:10+{{{x}}}*222}}|y={{#expr:12+{{{y}}}*222}}}} </div> </div> }} <div style="position:relative;width:212px;height:212px;"> <div class="hover-tab-mode" style="width:200px;height:200px;"> <div data-static="true" style="position:absolute;top:0;left:0;pointer-events:none;"> {{image|type=outer|img=https://z3.ax1x.com/2021/07/07/R7gT2j.png|display=inline-block |resize=1330|width=200|height=200|x=10|y=12}}</div> {{ptl|x=0|y=0}}{{ptl|x=1|y=0}}{{ptl|x=2|y=0}}{{ptl|x=3|y=0}}{{ptl|x=4|y=0}}{{ptl|x=5|y=0}} {{ptl|x=0|y=1}}{{ptl|x=1|y=1}}{{ptl|x=2|y=1}}{{ptl|x=3|y=1}}{{ptl|x=4|y=1}}{{ptl|x=5|y=1}} {{ptl|x=0|y=2}}{{ptl|x=1|y=2}}{{ptl|x=2|y=2}}{{ptl|x=3|y=2}}{{ptl|x=4|y=2}}{{ptl|x=5|y=2}} {{ptl|x=0|y=3}}{{ptl|x=1|y=3}}{{ptl|x=2|y=3}}{{ptl|x=3|y=3}}{{ptl|x=4|y=3}}{{ptl|x=5|y=3}} </div></div>