模板:栏目块：修订间差异

来自SOKA CAFE
可视化wikitext
（创建页面，内容为“{{#CSS： }} <div class="childbox-box"> <div class="childbox-image {{#if:{{{详情|}}}|childbox-image-more" data-more="{{{详情}}}"|"}}><div {{#if:{{{详情|}}}|class="childbox-image-more-child"}} style="pointer-events: none;">{{{图片}}}</div></div> <div class="childbox-text"> <div class="childbox-title">{{{标题|标题}}}</div> {{#if:{{{内容|}}}|<div style="flex:1;font-size:14px;margin-top:10px">{{{内容|}}}</div>}} </div> </div>{{#if:{{{详情|}}}|{{#W…”）
 
（修改页面）
第1行： 第1行：
{{#CSS：
{{#CSS:
/* 复制于https://otomad.wiki/Template:%E5%AD%90%E6%A0%8F%E7%9B%AE.css */
.childbox-image-more::before {
content: "";
opacity: 0;
transition:opacity 0.2s;
}
 
.childbox-image-more:hover::before {
    content: "了解更多";
    font-weight: bold;
    position: absolute;
    display: flex;
    font-size: 20px;
    color: black;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    z-index: 200;
    opacity: 1;
    background-color: rgba(255,255,255,0.7);
}
 
.childbox-image-more {
transform: scale(1);
transition:all 0.2s;
}
 
.childbox-image-more:hover {
transform: scale(1.01);
}
 
.childbox-image-more-child img {
width: 100%;
height: auto;
}
 
@media (min-width: 850px) {
.childbox-box {
margin:10px;
display:flex;
font-size: 0;
}
.childbox-image {
width:30%;
border-radius:6px;
overflow:hidden;
/*box-shadow: 0 3px 6px rgb(0 0 0 / 20%)*/;
cursor: default;
align-items: center;
margin:auto;
}
.childbox-text {
width:65%;
margin-left:20px;
}
.childbox-title {
flex:1;
font-weight:700;
font-size:20px;
margin-top:5px;
}
}
@media (max-width: 850px) {
.childbox-box {
margin:10px;
display:flex;
flex-direction: column;
font-size: 0;
}
.childbox-image {
width:100%;
border-radius:6px;
overflow:hidden;
/*box-shadow: 0 3px 6px rgb(0 0 0 / 20%)*/;
cursor: default;
align-items: center;
margin:auto;
}
.childbox-text {
width:100%;
}
.childbox-title {
text-align:center;
flex:1;
font-weight:700;
font-size:20px;
margin-top:5px;
}
}
}}
}}
<div class="childbox-box">
<div class="childbox-box">
<div class="childbox-image {{#if:{{{详情|}}}|childbox-image-more" data-more="{{{详情}}}"|"}}><div {{#if:{{{详情|}}}|class="childbox-image-more-child"}} style="pointer-events: none;">{{{图片}}}</div></div>
<div class="childbox-image {{#if:{{{详情|}}}|childbox-image-more" data-more="{{{详情}}}"|"}}><div {{#if:{{{详情|}}}|class="childbox-image-more-child"}} style="pointer-events: none;">{{{图片|[[File:壁纸.png]]}}}</div></div>
<div class="childbox-text">
<div class="childbox-text">
<div class="childbox-title">{{{标题|标题}}}</div>
<div class="childbox-title">{{{标题|标题}}}</div>
{{#if:{{{内容|}}}|<div style="flex:1;font-size:14px;margin-top:10px">{{{内容|}}}</div>}}
{{#if:{{{内容|}}}|<div style="flex:1;font-size:14px;margin-top:10px">{{{内容|内容}}}</div>}}
</div>
</div>
</div>{{#if:{{{详情|}}}|{{#Widget:Childbox-more}}}}
</div>{{#if:{{{详情|}}}|{{#Widget:Childbox-more}}}}

2024年6月25日 (二) 00:04的版本

标题

本Template复制于https://otomad.wiki/Template:%E5%AD%90%E6%A0%8F%E7%9B%AE

示例

文件:编辑部.png
Editorial Department
Editorial Department是HUIJIA FUN的建立均运营团体。


取自“http://soka.cafe/index.php?title=模板:栏目块&oldid=17”