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

来自SOKA CAFE
可视化wikitext
（修改页面）
无编辑摘要
 
（未显示1个用户的2个中间版本）
第1行： 第1行：
{{#CSS:
<templatestyles src="栏目块.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;">{{{图片|[[File:Soka Cafe.png|300px]]}}}</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|300px]]}}}</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}}}}
<noinclude>
<noinclude>
本Template复制于https://otomad.wiki/Template:%E5%AD%90%E6%A0%8F%E7%9B%AE
==信息==
==示例==
===来源===
本Template复制于https://otomad.wiki/Template:%E5%AD%90%E6%A0%8F%E7%9B%AE。
===说明===
<div id="left-column-full">
案例：
<pre>
{{栏目块
{{栏目块
|图片=[[File:编辑部.png]]
|图片=[[File:Soka Cafe Favicon.png]]
|标题=Editorial Department
|标题=Soka Cafe Favicon
|内容=Editorial Department是HUIJIA FUN的建立均运营团体。
|内容=这是Soka Cafe站点的Favicon Logo，其设计元素包括Air本的剪影，以及创价学会的标志——八叶莲花，其色彩搭配采用了创价旗的元素。这个设计不仅传达了创价学会的核心理念和精神，还为网站增添了一抹独特的文化色彩。通过这些元素的巧妙结合，Logo不仅视觉上引人注目，还能在简洁中蕴含深意，展示出Soka Cafe与创价学会之间的紧密联系。
|详情=https://huijia.fun
|详情=https://soka.cafe/images/3/31/Soka_Cafe_Favicon.png
}}
}}
</pre>
</div>
<div id="right-column-full">
{{栏目块
|图片=[[File:Soka Cafe Favicon.png]]
|标题=Soka Cafe Favicon
|内容=这是Soka Cafe站点的Favicon Logo，其设计元素包括Air本的剪影，以及创价学会的标志——八叶莲花，其色彩搭配采用了创价旗的元素。这个设计不仅传达了创价学会的核心理念和精神，还为网站增添了一抹独特的文化色彩。通过这些元素的巧妙结合，Logo不仅视觉上引人注目，还能在简洁中蕴含深意，展示出Soka Cafe与创价学会之间的紧密联系。
|详情=https://soka.cafe/images/3/31/Soka_Cafe_Favicon.png
}}
</div>
</noinclude>
</noinclude>

2024年11月27日 (三) 15:34的最新版本

标题

信息

来源

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

说明

案例： 

{{栏目块
|图片=[[File:Soka Cafe Favicon.png]]
|标题=Soka Cafe Favicon
|内容=这是Soka Cafe站点的Favicon Logo，其设计元素包括Air本的剪影，以及创价学会的标志——八叶莲花，其色彩搭配采用了创价旗的元素。这个设计不仅传达了创价学会的核心理念和精神，还为网站增添了一抹独特的文化色彩。通过这些元素的巧妙结合，Logo不仅视觉上引人注目，还能在简洁中蕴含深意，展示出Soka Cafe与创价学会之间的紧密联系。
|详情=https://soka.cafe/images/3/31/Soka_Cafe_Favicon.png
}}
Soka Cafe Favicon
这是Soka Cafe站点的Favicon Logo，其设计元素包括Air本的剪影，以及创价学会的标志——八叶莲花，其色彩搭配采用了创价旗的元素。这个设计不仅传达了创价学会的核心理念和精神，还为网站增添了一抹独特的文化色彩。通过这些元素的巧妙结合，Logo不仅视觉上引人注目，还能在简洁中蕴含深意，展示出Soka Cafe与创价学会之间的紧密联系。
取自“http://soka.cafe/index.php?title=模板:栏目块&oldid=909”